javascript控制圖片播放的實現(xiàn)代碼
更新時間:2020年07月29日 13:19:58 投稿:lijiao
這篇文章主要介紹了javascript控制圖片播放的實現(xiàn)代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
一般實現(xiàn)用鼠標控制圖片的滾動效果都比較麻煩,大段大段的代碼讓新手頭疼無從下手,下面我來寫個簡單的javascript控制圖片滾動的效果。代碼簡潔明了,兼容ie、firefox和google瀏覽器。
分享代碼如下:
<html">
<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>
運行效果圖:

以上就是實現(xiàn)javascript控制圖片滾動的效果,希望大家可以喜歡。
相關文章
javascript 折半查找字符在數(shù)組中的位置(有序列表)
折半查找字符在數(shù)組中的位置(有序列表),需要的朋友可以參考下。2010-12-12
JavaScript實現(xiàn)控制并發(fā)請求數(shù)量的方法詳解
這篇文章主要為大家詳細介紹了JavaScript如何實現(xiàn)控制并發(fā)請求數(shù)量,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
JavaScript之面向?qū)ο骭動力節(jié)點Java學院整理
JavaScript的面向?qū)ο缶幊毯痛蠖鄶?shù)其他語言如Java、C#的面向?qū)ο缶幊潭疾惶粯?。下面通過本文給大家介紹js面向?qū)ο笾R,包括面向?qū)ο蟮膬蓚€基本概念,一起看看吧2017-06-06
關于BootStrap modal 在IOS9中不能彈出的解決方法(IOS 9 bootstrap modal ios
本文給大家介紹BootStrap modal 在IOS9中不能彈出的問題以及bootstrap datepicker 在bootstrap modal中不顯示問題的解決方案,非常不錯,需要的朋友參考下2016-12-12
javascript instanceof,typeof的區(qū)別
區(qū)分string 與 String的區(qū)別2010-03-03

