<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style>
.box{
width: 380px;
height: 180px;
margin: 20px auto;
border: dashed 2px #f0f;
position: relative;
overflow: hidden;
}
.img-box{
position: absolute;
}
.img-box img{
width: 380px;
height: 180px;
}
</style>
</head>
<body>
<div class="box">
<div class="img-box">
</div>
</div>
<script>
var imgBox=document.getElementsByClassName('img-box')[0];
var imgs=document.getElementsByTagName('img');
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
var currentStyle=getComputedStyle(obj);
return currentStyle[attr];
}
}
function scroll(obj){
var timer = setInterval(function(){
var top = getStyle(obj, 'top');
top = parseInt(top);
top -= 5;
if(top < -180){
top = -180;
}
obj.style.top = top + 'px';
if(top === -180){
obj.appendChild(obj.children[0]);
obj.style.top = 0 + 'px';
}
}, 50);
}
scroll(imgBox)
图片抖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片抖动</title>
<style>
img{
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<script>
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
var currentStyle = getComputedStyle(obj);
return currentStyle[attr];
}
}
function sheak(obj,attr,position){
var pos=getStyle(obj,attr);
pos=parseInt(pos);
var arr=[];
for(var i=30;i>0;i=i-2){
arr.push(i);
arr.push(-i)
}
arr.push(0);
var num=0;
var T=setInterval(function(){
obj.style[attr]=(pos+arr[num])+'px';
num++;
if(num==arr.length){
clearInterval(T);
position && position();
}
},100)
}
var img=document.getElementsByTagName('img')[0];
var onOff=false;
img.onclick=function(){
var bbg=this;
if(onOff){
return;
}
onOff=true;
sheak(bbg,'top',function(){
sheak(bbg,'left')
})
}
</script>
</body>
</html>
网友评论