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

当前位置: 首页 > 图文教程 > 网页特效 > 图片特效 > 网页按钮控制网页图片运动速度

图片特效: 网页按钮控制网页图片运动速度; 双边框的网页图片而且鼠标经过背景变色; 淡入淡出效果的图片提示特效代码; 特效代码:弹出一个淡入淡出的提示框

No. « ‹ 1 2 »

技术文章搜索

关键字

图片特效中的网页按钮控制网页图片运动速度

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 235 ::

收藏到网摘: n/a

网页图片旋转的网页特效代码双边框的网页图片而且鼠标经过背景变色

按钮控制网页中图片的运行，而且还可以控制运行速度呢！大家测试下！！如果你总是一直点“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>按钮控制图片运动-ruanchen.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 全部选择 ]

网页图片旋转的网页特效代码双边框的网页图片而且鼠标经过背景变色

图片特效 中的 网页按钮控制网页图片运动速度

评论 (0) All

图片特效中的网页按钮控制网页图片运动速度