move.js
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//运动框架
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
//1.取当前的值
var icur = 0;
if(attr == ‘opacity‘){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur = parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (json[attr] - icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur != json[attr]){
flag = false;
}
if(attr == ‘opacity‘){
obj.style.filter = ‘alpha(opacity:‘+icur+speed+‘)‘;
obj.style.opacity = (icur+speed)/100;
}else{
obj.style[attr] = icur+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},10);
}
sport.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝效果</title>
<style type="text/css">
div.all { padding: 10px;border: 1px solid blue; background: #ccc;width: 250px; position: relative;top:100px;left: 40%;float: left;}
div#img { width: 40px;height: 50px; border: 1px solid #000;text-align: center; margin: 20px;float: left;position: relative;overflow: hidden;}
img { width: 25px;height: 25px;margin: 2px auto;display: block;position: absolute;top: 5px;
left: 7px;}
span{ position: absolute;bottom: 0px;left: 3px; }
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload = function(){
var imgs = document.getElementsByTagName(‘img‘);
var divs = document.getElementsByTagName(‘div‘);
for( var i = 0; i<imgs.length; i++){
(function(i){
//效果onmouseenter只触发一次，onmouseover可以同时触发多次
divs[i+1].onmouseenter = function(){
startMove(imgs[i],{top:-25},function(){
imgs[i].style.top = "20px";
startMove(imgs[i],{top:0});
});
}
})(i);
}
}
</script>
</head>
<body>
<div class="all">
<div id="img"><img src="1.jpg" id="img1"><span>大毛</span></div>
<div id="img"><img src="2.jpg" id="img2"><span>二毛</span></div>
<div id="img"><img src="3.jpg" id="img3"><span>三毛</span></div>
<div id="img"><img src="4.jpg" id="img4"><span>四毛</span></div>
<div id="img"><img src="5.jpg" id="img5"><span>五毛</span></div>
<div id="img"><img src="1.jpg" id="img6"><span>六毛</span></div>
</div>
</body>
</html>
时间： 2024-07-31 12:43:53