网页按钮控制网页图片运动速度_电脑软硬件应用网_国内最受关注的计算机应用解决中心

首页·电脑学院·电脑故障·操作系统·硬件教程·局域网技术·QQ技巧·网络安全·办公软件· 数据库

导航·设计学院·图像处理·网页设计·软件教程·服务器技术·笔记本·专家装机·网络编程·在线问答

当前位置：电脑软硬件应用网 > 设计学院 > 网页特效 > 正文

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

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

2009-8-9 22:36:48　　文/网络收集　　出处:网页教学网　　

按钮控制网页中图片的运行，而且还可以控制运行速度呢！大家测试下！！如果你总是一直点“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.45its.com/Images/logo.gif" alt="" /> </div> <div id="img2" style="position:absolute;top:0px;left:-1010px;border:1px solid red;"> <img src="http://www.45its.com/Images/logo.gif" alt="" /> </div> </div> </body> </html>

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

上一篇文章：超强超靓网页日历代码

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

最新热点		最新推荐		相关文章
				网页特效代码:仿京东的商品分类导航… 不能屏蔽的网页右下角窗口特效装载页面进度条代码链接特效之js做引用文章链接代码左右移动转换文字特效HTML代码解析网页页面实现自动刷新的3种代码网页特效代码:纯css下拉菜单列表 JS特效代码:实现间歇无缝文字滚动特… 文字滚动特效（兼容多浏览器）网页特效代码:JavaScript显示系统时…