图标跳动代码（悬浮上移）

浏览：892次- 评论：0次- 发布时间：2018-05-15

Html

Css

   
  jQuery
     
  淘宝
    
  jQuery
    
  淘宝
    
  jQuery
     
  jQuery

window.onload = function() {
    var oDiv = document.getElementById('oDiv'),
        aList = oDiv.getElementsByTagName('a');
    //alert(aList.length);
    for (var i = 0; i < aList.length; i++) {
        aList[i].onmouseenter = function() {
            //alert('1');
            var _i = this.getElementsByTagName('i')[0]; //此处没有【0】不能完成
            //var _i=aList.getElementsByTagName('i')
            starMove(_i, {
                top: -100,
                opacity: 0
            }, function() {
                _i.style.top = 140 + 'px';

starMove(_i, {
                    top: 0,
                    opacity: 100
                }); //注意这里的opacity为百分制！！！
                //alert('hello');
            });
        }
    }

function getStyle(obj, sty) {
        if (obj.currentStyle) {
            return obj.currentStyle[sty]; //ie
        } else {
            return getComputedStyle(obj, false)[sty]; //ff获取元素的样式的函数
        }
    }
    //starMove(obj,{stty1:iTarget1,stty2:iTarget2})
    function starMove(obj, json, fn) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

var flag = true; //判读运动是是否都达到目标//为什么一定要放在function下面！！才能执行回调函数！！

for (var stty in json) {
                //1.取当前的值
                var icur = 0; //stty=style='height'或者其他
                if (stty === 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, stty)) * 100); //四舍五入

} else {
                    icur = parseInt(getStyle(obj, stty));
                }
                //2.算速度			 
                var speed = (json[stty] - icur) / 2;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

//3.监测停止		 //alert(obj.style.width)为什么这里第一次加载显示不出来width所以parseInt(obj.style.width)=NaN
                if (icur !== json[stty]) {
                    flag = false; //判断是否全部完成目标！！！
                }

if (stty === 'opacity') {
                    obj.style[stty] = (icur + speed) / 100;
                } else {
                    obj.style[stty] = icur + speed + 'px';
                } //icur=parseInt(getStyle(obj,'width'))===obj.offsetWidth,但是这里的后者有bug 所以被替代

} //json终止处

if (flag) {

clearInterval(obj.timer);

if (flag) {
                    fn();
                }
            }
        }, 50);

}
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.4

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：利用简单的jQuery实现图片的悬浮跳动

具体代码可以参考题目里面设置的，具体我就不解释了，你可以看看ody和css都是简单的代码，只需要其实这不是jq的代码，简单的原生js实现滚动效果，可以加深你对js的理解能力，实现一些简单的操作，当然你也可以将这些js代码，转化为jq来实现对jq库的熟悉

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取