快捷導(dǎo)航

javascript控制圖片播放的實(shí)現(xiàn)代碼

更新時(shí)間：2020年07月29日 13:19:58 投稿：lijiao

這篇文章主要介紹了javascript控制圖片播放的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一般實(shí)現(xiàn)用鼠標(biāo)控制圖片的滾動(dòng)效果都比較麻煩，大段大段的代碼讓新手頭疼無從下手，下面我來寫個(gè)簡(jiǎn)單的javascript控制圖片滾動(dòng)的效果。代碼簡(jiǎn)潔明了，兼容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層的上下移動(dòng)滾動(dòng)效果</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>

運(yùn)行效果圖：

以上就是實(shí)現(xiàn)javascript控制圖片滾動(dòng)的效果，希望大家可以喜歡。

您可能感興趣的文章:

相關(guān)文章

javascript 折半查找字符在數(shù)組中的位置(有序列表)
折半查找字符在數(shù)組中的位置(有序列表)，需要的朋友可以參考下。
2010-12-12
淺談JavaScript 瀏覽器對(duì)象
下面小編就為大家?guī)硪黄獪\談JavaScript 瀏覽器對(duì)象。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
JavaScript實(shí)現(xiàn)控制并發(fā)請(qǐng)求數(shù)量的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)控制并發(fā)請(qǐng)求數(shù)量,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
JS面試題大坑之隱式類型轉(zhuǎn)換實(shí)例代碼
這篇文章主要介紹了JS面試題大坑之隱式類型轉(zhuǎn)換實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-10-10
js刪除數(shù)組中某幾項(xiàng)的方法總結(jié)
在本篇文章里小編給大家分享了關(guān)于js刪除數(shù)組中某一項(xiàng)或幾項(xiàng)的幾種方法內(nèi)容，有需要的朋友們學(xué)習(xí)下。
2019-01-01
Javascript 錯(cuò)誤處理的幾種方法
瀏覽器不會(huì)拋出Error類型的exception異常，所以如果捕獲到Error類型的異常，可以確定這個(gè)異常是用戶代碼拋出的，不是瀏覽器拋出的。
2009-06-06
JavaScript之面向?qū)ο骭動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript的面向?qū)ο缶幊毯痛蠖鄶?shù)其他語言如Java、C#的面向?qū)ο缶幊潭疾惶粯?。下面通過本文給大家介紹js面向?qū)ο笾R(shí)，包括面向?qū)ο蟮膬蓚€(gè)基本概念，一起看看吧
2017-06-06
判斷一個(gè)變量是數(shù)組Array類型的方法
JavaScript中如何判斷一個(gè)變量是數(shù)組Array類型呢？本文向大家提供一個(gè)比較不錯(cuò)的方法，可以說是無懈可擊了
2013-09-09
關(guān)于BootStrap modal 在IOS9中不能彈出的解決方法(IOS 9 bootstrap modal ios
本文給大家介紹BootStrap modal 在IOS9中不能彈出的問題以及bootstrap datepicker 在bootstrap modal中不顯示問題的解決方案，非常不錯(cuò)，需要的朋友參考下
2016-12-12
javascript instanceof,typeof的區(qū)別
區(qū)分string 與 String的區(qū)別
2010-03-03