这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 控制图片播放的实现代码,代码很简单, 需要的朋友可以参考下
一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的 javascript 控制图片滚动的效果。代码简洁明了,兼容 ie、firefox 和 google 浏览器。
分享代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
- <title>
- javascript控制图片或div层的上下移动滚动效果
- </title>
- </head>
- <body>
- <a href="javascript: void(0);" onmouseover="ScrollDivUp_T=setInterval(ScrollDivUp,10);"
- onmouseout="clearInterval(ScrollDivUp_T)">
- 上
- </a>
- <div id="items" style="margin:5px 0px 5px 0px;width:100px;height:200px;border:1px solid #dddddd;overflow:hidden">
- 图片1...
- <br />
- 图片2...
- <br />
- 图片3...
- <br />
- 图片4...
- <br />
- 图片5...
- <br />
- 图片6...
- <br />
- 图片7...
- <br />
- 图片8...
- <br />
- 图片9...
- <br />
- 图片10...
- <br />
- 图片11...
- <br />
- 图片12...
- <br />
- 图片13...
- <br />
- 图片14...
- <br />
- 图片15...
- <br />
- 图片16...
- <br />
- 图片17...
- <br />
- 图片18...
- <br />
- 图片19...
- <br />
- 图片20...
- </div>
- <a href="javascript: void(0);" onmouseover="ScrollDivDown_T=setInterval(ScrollDivDown,10);"
- onmouseout="clearInterval(ScrollDivDown_T)">
- 下
- </a>
- <script language="javascript">
- function ScrollDivUp() {
- document.getElementById('items').scrollTop -= 1;
- }
- function ScrollDivDown() {
- document.getElementById('items').scrollTop += 1;
- }
- </script>
- </body>
- </html>
运行效果图:
以上就是实现 javascript 控制图片滚动的效果,希望大家可以喜欢。
来源: http://www.phperz.com/article/17/0420/270151.html