javascript实现控制图片播放的代码分享

程序员文章站 2022-03-10 14:59:37

...

一般实现用鼠标控制图片的滚动效果都比较麻烦，大段大段的代码让新手头疼无从下手，下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了，兼容ie、firefox和google浏览器。

分享代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
&lt;title>javascript控制图片或p层的上下移动滚动效果&lt;/title>
&lt;/head>

&lt;body>

&lt;a href="javascript: void(0);" onmouseover="ScrollpUp_T=setInterval(ScrollpUp,10);" onmouseout="clearInterval(ScrollpUp_T)">上&lt;/a>
&lt;p id="items" style="margin:5px 0px 5px 0px;width:100px;height:200px;border:1px solid #dddddd;overflow:hidden">
  图片1...&lt;br />
  图片2...&lt;br />
  图片3...&lt;br />
  图片4...&lt;br />
  图片5...&lt;br />
  图片6...&lt;br />
  图片7...&lt;br />
  图片8...&lt;br />
  图片9...&lt;br />
  图片10...&lt;br />
  图片11...&lt;br />
  图片12...&lt;br />
  图片13...&lt;br />
  图片14...&lt;br />
  图片15...&lt;br />
  图片16...&lt;br />
  图片17...&lt;br />
  图片18...&lt;br />
  图片19...&lt;br />
  图片20...
&lt;/p>
&lt;a href="javascript: void(0);" onmouseover="ScrollpDown_T=setInterval(ScrollpDown,10);" onmouseout="clearInterval(ScrollpDown_T)">下&lt;/a>
&lt;script language="javascript">
  function ScrollpUp(){document.getElementById("items").scrollTop -= 1;}
  function ScrollpDown(){document.getElementById("items").scrollTop += 1;}
&lt;/script>

&lt;/body>

&lt;/html>

运行效果图：

javascript实现控制图片播放的代码分享

以上就是javascript实现控制图片播放的代码分享的详细内容，更多请关注其它相关文章！

javascript实现控制图片播放的代码分享

PHP实现Javascript中的escape及unescape函数代码分享，escapeunescape

js 图片随机不定向浮动的实现代码_javascript技巧

JavaScript中的星星评分效果的实现代码分享

JavaScript实现防止网页被嵌入Frame框架的代码分享_javascript技巧

用css来控制图片大小显示的实现方法与代码

C#控制台程序实现开启、关闭SQLServer服务的代码分享

C#对图片进行马赛克处理可控制模糊程度的实现代码

C#对图片进行马赛克处理可控制模糊程度的实现代码

javascript实现图片切换的幻灯片效果源代码

Javascript实现图片不间断滚动的代码