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

您现在的位置：万象互联帮助中心>> 最新资讯>>详细内容

<<返回上一页

网页按钮控制网页图片运动速度: 大中小文章来源：万象互联更新时间：2011-8-18

分享到：

<p>按钮控制网页中图片的运行，而且还可以控制运行速度呢！大家测试下！！如果你总是一直点“click me”则运动速度会很快啊！</p> <p align="center"><textarea class="fm" id="code" style="WIDTH: 490px; HEIGHT: 466px" rows="27" cols="78"><!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 全部选择 ]

分享到：复制地址新浪微博腾讯微博 QQ空间开心网人人网百度空间百度贴吧网易微博搜狐微博

上一篇：双边框的网页图片而且鼠标经过背景变色

下一篇：网页图片旋转的网页特效代码

广告联盟中的CPA、CPS、CPC、CPM分别是什么意思