<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; } </style> </head> <body> <input id="btn1" type="button" value="往后" /> <input id="btn2" type="button" value="往前" /> <div id="div1"></div> <script> var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { clearInterval( oDiv.timer );//开定时器之前要先停止定时器,停止div身上的timer,clearInterval(null/未定义)是可以的, oDiv.timer = setInterval(function () {//变量尽量不要放在外面 var speed = parseInt(getStyle( oDiv, 'left' )) + -12;// getStyle( oDiv, 'left' )返回30px,parseInt()去掉px, if ( speed < 10 ) {//先控制speed,再将speed赋值给style.left, speed = 10; } oDiv.style.left = speed + 'px'; if ( speed == 10 ) { clearInterval( oDiv.timer ); } }, 30); }; function getStyle ( obj, attr ) { //获取对象的属性,认识obj.currentStyle表示是IE6.7.8,不同的语法获取属性, return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; } </style> </head> <body> <input id="btn1" type="button" value="往上" /> <input id="btn2" type="button" value="往下" /> <div id="div1"></div> <script> var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { doMove ( oDiv, 'top', 12, 40 ); }; oBtn2.onclick = function () { doMove ( oDiv, 'top', 12, 500 ); }; function doMove ( obj, attr, dir, target ) {//把标签div对象传进来,dir是整数,attr是属性名, dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;//当前位置比目标位置小就是正数,比目标位置大就是负数 clearInterval( obj.timer );//给标签添加自定义属性 obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; if ( speed > target && dir > 0 || speed < target && dir < 0 ) { speed = target; } obj.style[attr] = speed + 'px';//js修改样式 if ( speed == target ) { clearInterval( obj.timer ); } }, 30); } function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; } </style> </head> <body> <input id="btn1" type="button" value="往上" /> <input id="btn2" type="button" value="往下" /> <div id="div1"></div> <script> var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { doMove ( oDiv, 'top', 12, 40 ); }; oBtn2.onclick = function () { doMove ( oDiv, 'top', 12, 500 ); }; function doMove ( obj, attr, dir, target ) {//把标签div对象传进来,dir是整数,attr是属性名, dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;//当前位置比目标位置小就是正数,比目标位置大就是负数 clearInterval( obj.timer );//给标签添加自定义属性 obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; if ( speed > target && dir > 0 || speed < target && dir < 0 ) { speed = target; } obj.style[attr] = speed + 'px';//js修改样式 if ( speed == target ) { clearInterval( obj.timer ); } }, 30); } function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; } </style> </head> <body> <input id="btn1" type="button" value="走" /> <div id="div1"></div> <script> var oBtn1 = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { // doMove ( oDiv, 'width', 34, 600 ); doMove ( oDiv, 'left', 12, 900, function () { doMove ( oDiv, 'top', 34, 500 );//doMove有5个参数,这里传递4个也可以 }); }; function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; if ( speed > target && dir > 0 || speed < target && dir < 0 ) { speed = target; } obj.style[attr] = speed + 'px'; if ( speed == target ) { clearInterval( obj.timer ); /* if ( endFn ) //函数不是undefined就执行 endFn(); } */ endFn && endFn(); // endFn 是真不是undefined就走到后面去 } }, 30); } function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片抖动</title> <style> img { position:absolute; top:200px; left:300px; 180px; } #img1 { left:100px; } </style> <script src="miaov.js"></script> <script> window.onload = function () { var oImg1 = document.getElementById('img1'); var oImg2 = document.getElementById('img2'); oImg1.onclick = fnShake; oImg2.onclick = fnShake; function fnShake() { var _this = this;//this是图片 shake( _this, 'left', function(){ shake( _this, 'top' ); }); } }; function shake ( obj, attr, endFn ) { var pos = parseInt( getStyle(obj, attr) );//原来位置 var arr = []; // 20, -20, 18, -18 ..... 0 var num = 0; var timer = null; for ( var i=20; i>0; i-=2 ) { arr.push( i, -i );//push 2个 } arr.push(0); clearInterval( obj.shake ); obj.shake = setInterval(function (){ obj.style[attr] = pos + arr[num] + 'px';//原来位置加上数组值 num++; if ( num === arr.length ) { clearInterval( obj.shake ); endFn && endFn();//左右抖动在上下抖动 } }, 50); } </script> </head> <body> <img id="img1" src="img/4.jpg" /> <img id="img2" src="img/5.jpg" /> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片抖动</title> <style> img { 100px; height:100px; position:absolute; top:200px; } </style> <script> function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } function shake ( obj, attr, endFn ) { var pos = parseInt( getStyle(obj, attr) );// 抖动没有停止时候,获取的是抖动的位置,不是最初的位置,有隐患的 var arr = []; // 20, -20, 18, -18 ..... 0 var num = 0; var timer = null; for ( var i=20; i>0; i-=2 ) { arr.push( i, -i ); } arr.push(0); clearInterval( obj.shake ); obj.shake = setInterval(function (){ obj.style[attr] = pos + arr[num] + 'px'; num++; if ( num === arr.length ) { clearInterval( obj.shake ); endFn && endFn(); } }, 50); } window.onload = function () { var aImg = document.getElementsByTagName('img'); for ( var i=0; i<aImg.length; i++ ) {//遍历所有图片,所有图片加事件。 aImg[i].style.left = 80+i*110 + 'px'; aImg[i].onmouseover = function () { shake( this, 'top' ); }; } }; </script> </head> <body> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> </body> </html>
function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; // 步长 if ( speed > target && dir > 0 || speed < target && dir < 0 ) { speed = target; } obj.style[attr] = speed + 'px'; if ( speed == target ) { clearInterval( obj.timer ); /* if ( endFn ) { endFn(); } */ endFn && endFn(); } }, 30); } function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }