图片点击隐藏 js运动效果原理
1、点击让图片隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ document.getElementById('dd').onclick = function(){ document.getElementById("tt").style.display="none"; } } </script> </head> <body> <input type="button" name="dd" id="dd" value="点击我呀" /> <br /><br /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902131550032408323289.jpg" alt="" id="tt"/> </body> </html> 2、运动原理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #dt{ position: absolute; /*为了能获得当前图片的left值,把left值写在body里面*/ /*left: 0px;*/ top: 100px; } </style> <script type="text/javascript"> window.onload = function(){ // 先抓元素 var yy =document.getElementById('yy'); var dt = document.getElementById('dt'); // 给按钮加单机事件 yy.onclick = function(){ // 设置一个定时器,每隔一秒钟,将left值变大10个像素; setInterval(function(){ // 获得当前图片的left值 var ww = dt.style.left; // 计算新的left值 var dd = parseInt(ww)+10; // 将新值赋值回去 dt.style.left= dd+'px'; },1000) } } </script> </head> <body> <input type="button" name="yy" id="yy" value="点我呀！！" /> <br /><br /> <!--为了能获得当前图片的left值,把left值写在body里面--> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902131550032481703463.gif" alt="" id="dt" style="left: 0px;"/> </body> </html> 3、停止运动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #dt{ position: absolute; /*为了能获得当前图片的left值,把left值写在body里面*/ /*left: 0px;*/ top: 100px; } /*后加上去的*/ #qian{ position: absolute; top: 0px; left: 1035px; } </style> <script type="text/javascript"> window.onload = function(){ // 先抓元素 var yy =document.getElementById('yy'); var dt = document.getElementById('dt'); // 给按钮加单机事件 yy.onclick = function(){ // 设置一个定时器,每隔十分之一秒钟,将left值变大5个像素; // 给定时器取个名字,要不然清理不到它 var dsc= setInterval(function(){ // 获得当前图片的left值 var ww = dt.style.left; // 计算新的left值 var dd = parseInt(ww)+5; // 将新值赋值回去 dt.style.left= dd+'px'; // 判断图片是否停止了 if (dd==600) { // 清理定时器,让运动停止 clearInterval(dsc); } else{ } },100) } } </script> </head> <body> <input type="button" name="yy" id="yy" value="点我呀！！" /> <br /><br /> <!--为了能获得当前图片的left值,把left值写在body里面--> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902131550032481703463.gif" alt="" id="dt" style="left: 0px;"/> <!--后加上去的--> <img src="https://www.qiquanji.com/mip/data/img/dmj/201902131550032567214401.jpg" alt="" id="qian"/> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知