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

Html

Css

   
  jQuery
     
  淘宝
    
  jQuery
    
  淘宝
    
  jQuery
     
  jQuery

* {
	margin:0;
	padding:0;
}
.oDiv {
	margin:10px auto;
	width:400px;
	height:280px;
	border:3px solid #9D9E9B;
	margin-top:100px;
}
a {
	display:inline-block;
	width:100px;
	height:130px;
	border:1px solid #ddd;
	border-radius:3px;
	float:left;
	text-align:center;
	margin-left:25px;
	margin-top:8px;
	font-size:24px;
	position:relative;
	text-decoration:none;
}
a i {
	position:absolute;
	top:0px;
	left:0px;
	opacity:1;
}
p {
	position:absolute;
	top:100px;
	left:25px;
}

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

立即下载

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

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

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

麋鹿精灵

相关代码

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

最新