当前位置： > 网页特效 > 图片特效 > 文章内容

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

http://www.itjxue.com 2015-08-05 00:16 来源:未知 点击次数:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>按钮控制图片运动-itjxue.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 全部选择 ]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：刷新一次显示不同图片的特效代码

下一篇：网页图片放大预览网页特效代码

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

(责任编辑：IT教学网)

相关图片特效文章

阅读排行

专题教程

推荐图片特效文章

最新更新图片特效