JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動效果)實(shí)例代碼
更新時(shí)間:2013年11月28日 15:02:47 作者:
這篇文章主要介紹了offsetLeft實(shí)現(xiàn)圖片滾動效果實(shí)例代碼,有需要的朋友可以參考一下
效果:
代碼:
復(fù)制代碼 代碼如下:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 245px;
height: 150px;
background: red;
margin: 250px;
margin-left: 500px;
position: absolute;
overflow: hidden;
}
#div1 ul li
{
float: left;
width: 44px;
height: 66px;
margin-top: 20px;
margin-right: 5px;
list-style: none;
}
#div1 ul
{
width: 250px;
position: absolute;
padding: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oul = document.getElementsByTagName('ul')[0];
var odiv = document.getElementById('div1');
var ali = document.getElementsByTagName('li');
oul.innerHTML = oul.innerHTML + oul.innerHTML;
oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
function roll() {
if (oul.offsetLeft <= -oul.offsetWidth / 2) {
oul.style.left = '0';
}
oul.style.left = oul.offsetLeft - 2 + 'px';
}
var timer = null;
timer = setInterval(roll, 30);
odiv.onmouseover = function () {
clearInterval(timer);
}
odiv.onmouseout = function () {
timer = setInterval(roll, 30);
}
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li>
<img src="../Images/Number1/0.jpg" /></li>
<li>
<img src="../Images/Number1/1.jpg" /></li>
<li>
<img src="../Images/Number1/2.jpg" /></li>
<li>
<img src="../Images/Number1/3.jpg" /></li>
<li>
<img src="../Images/Number1/4.jpg" /></li>
</ul>
</div>
</body>
您可能感興趣的文章:
- 基于js中style.width與offsetWidth的區(qū)別(詳解)
- js獲取元素的偏移量offset簡單方法(必看)
- 詳解原生js實(shí)現(xiàn)offset方法
- JavaScript中offsetWidth的bug及解決方法
- JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
- javascript中offset、client、scroll的屬性總結(jié)
- JavaScript中的getTimezoneOffset()方法使用詳解
- js實(shí)現(xiàn)jquery的offset()方法實(shí)例
- Javascript 運(yùn)動中Offset的bug解決方案
- javascript中style.left和offsetLeft的用法說明
- JS OffsetParent屬性深入解析
- JS中offset和勻速動畫詳解
相關(guān)文章
layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)
今天小編就為大家分享一篇layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09uniapp H5 https跨域請求實(shí)現(xiàn)
這篇文章主要介紹了uniapp H5 https跨域請求實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01小程序中使用css var變量(使js可以動態(tài)設(shè)置css樣式屬性)
這篇文章主要介紹了小程序中使用css var變量,使js可以動態(tài)設(shè)置css樣式屬性,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03JS中mouseover和mouseout多次觸發(fā)問題如何解決
這篇文章主要介紹了JS中mouseover和mouseout多次觸發(fā)問題如何解決的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JavaScript中json數(shù)組查找數(shù)據(jù)的幾種方式(含模糊查找)
這篇文章主要給大家介紹了關(guān)于JavaScript中json數(shù)組查找數(shù)據(jù)的幾種方式,文中包括模糊查找,文中給出了詳細(xì)的代碼示例,對大家學(xué)習(xí)或者使用json具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09js計(jì)算兩個(gè)日期間的天數(shù)月的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了基于js計(jì)算兩個(gè)日期間的天數(shù)月,文中還通過一段代碼給大家簡單說明了js計(jì)算兩個(gè)日期差的方法,感興趣的朋友跟隨小編一起看看吧2018-09-09