网页按钮控制网页图片运动速度

大中小文章来源：万象互联更新时间：2011-8-18 14:30:33

按钮控制网页中图片的运行，而且还可以控制运行速度呢！大家测试下！！如果你总是一直点“click me”则运动速度会很快啊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>按钮控制图片运动-webjx.com</title> <style type="text/css"> div#top { position: relative; top: 50px; left: 200px; z-index: 10; width: 200px; height: 200px; background-color: red; } div#top button { margin-left: 50px; } </style> </head> <body style="overflow-x:hidden;width:1280px;"> <script type="text/javascript"> var left1 =0; var i = 0; var set; function dong() { document.getElementById("img").style.left = (left1 + i) + 'px'; i = i + 10; set = setTimeout('dong();', 100); if (i == 1010) { document.getElementById("img").style.left=0+'px'; i=0; } } </script> <div id="top"> <button type="button" onclick="dong();">click me</button> </div> <div id="img" style="position:absolute;top:300px;left:0px;height:300px;"> <div id="img1" style="position:absolute;top:0px;left:0px;border:1px solid black;"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /> </div> <div id="img2" style="position:absolute;top:0px;left:-1010px;border:1px solid red;"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /> </div> </div> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

版权说明:本站原创文章,由万象互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4050.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博