欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

div+css布局的圖片連續(xù)滾動(dòng)js實(shí)現(xiàn)代碼

 更新時(shí)間：2010年05月04日 16:39:46   作者：  
整理一個(gè)div+css圖片連續(xù)滾動(dòng)代碼，原理跟腳本之家之前發(fā)布的文章一樣。
html布局代碼
復(fù)制代碼 代碼如下:

<!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=gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript" src="Marquee.js"></script>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#demo {
/*********必須的 保證超出寬度能夠滾動(dòng)*********/
width:600px;/*可視區(qū)域?qū)挾?/
overflow:hidden;
/*********必須的 保證超出寬度能夠滾動(dòng)*********/
height:80px;
}
#demo1,#demo2 {
width:800px;/*整個(gè)圖片寬度*/
float:left;
}
#demo img{
display:block;
float:left;
}
#demo li {
float:left;
width:60px;
height:80px;
}
-->
<!--
#demo0 {
/*********必須的 保證超出寬度能夠滾動(dòng)*********/
width:600px;/*可視區(qū)域?qū)挾?/
overflow:hidden;
/*********必須的 保證超出寬度能夠滾動(dòng)*********/
height:80px;
}
#demo11,#demo22 {
width:1020px;/*整個(gè)圖片寬度*/
display:block;
height:80px;
}
#demo0 li {
float:left;
margin:0 5px;
width:60px;
height:80px;
}
-->
</style>
</head>
<body>
<!--結(jié)構(gòu)必須的——<div class="demo">
<div class="demo1"></div>
<div class="demo2"></div>
</div>——結(jié)構(gòu)必須的——-->
<div id="demo">
<ul id="demo1">
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
</ul>
<ul id="demo2"></ul>
</div>

<!--<div id="demo0">
<div id="demo11">
<ul>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
<li><a href="#"><img src="" width="60" height="60" alt="圖片占有位" /></a> </li>
</ul>
</div>
<div id="demo22"></div>
</div>-->
<script>
toleft("demo","demo1","demo2",30,"onedemo");
//toright("demo0","demo11","demo22",20,"ti2");
</script>
</body>
</html>

js核心代碼
復(fù)制代碼 代碼如下:

//調(diào)用向左滾動(dòng)
//toleft("demo","demo1","demo2",30,"ti1")
//調(diào)用向右滾動(dòng)
//toright("demo0","demo11","demo22",20,"ti2")

function $(id)
{
return document.getElementById(id)
}

//向左滾動(dòng)函數(shù)，demo包含demo1與demo2,speed是滾動(dòng)速度，flag一個(gè)網(wǎng)頁(yè)內(nèi)有多個(gè)時(shí)設(shè)置為不同的任意字符。
function toleft(demo,demo1,demo2,speed,flag)
{
demo=$(demo);
demo1=$(demo1);
demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft-=demo1.offsetWidth
}
else
{
demo.scrollLeft++
}
}
flag=setInterval(Marquee,speed)
demo.onmouseover=function()
{
clearInterval(flag);
}
demo.onmouseout=function()
{
flag=setInterval(Marquee,speed);
}
}


//向右滾動(dòng)函數(shù)，demo包含demo1與demo2,speed是滾動(dòng)速度，flag一個(gè)網(wǎng)頁(yè)內(nèi)有多個(gè)時(shí)設(shè)置為不同的任意字符。
function toright(demo,demo1,demo2,speed,flag)
{
demo=$(demo);
demo1=$(demo1);
demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo.scrollLeft<=0)
{
demo.scrollLeft=demo2.offsetWidth
}
else
{
demo.scrollLeft--
}
}
flag=setInterval(Marquee,speed)
demo.onmouseover=function()
{
clearInterval(flag);
}
demo.onmouseout=function()
{
flag=setInterval(Marquee,speed);
}
}

如需要更多的功能可以參考下面的內(nèi)容：
JavaScript 四個(gè)方向圖片滾動(dòng)效果
JavaScript 無(wú)縫上下左右滾動(dòng)加定高定寬停頓效果(兼容ie/ff)

相關(guān)文章

  • JS實(shí)現(xiàn)常見(jiàn)的TAB、彈出層效果(TAB標(biāo)簽，斑馬線，遮罩層等)

    JS實(shí)現(xiàn)常見(jiàn)的TAB、彈出層效果(TAB標(biāo)簽，斑馬線，遮罩層等)

    這篇文章主要介紹了JS實(shí)現(xiàn)常見(jiàn)的TAB、彈出層效果,包括TAB標(biāo)簽，斑馬線，遮罩層等.以完整實(shí)例總結(jié)分析了JavaScript實(shí)現(xiàn)tab切換、隔行變換及彈出遮罩層的完整實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2015-10-10
  • NW.js 簡(jiǎn)介與使用方法

    NW.js 簡(jiǎn)介與使用方法

    NW.js （原名 node-webkit）是一個(gè)基于 Chromium 和 node.js 的應(yīng)用運(yùn)行時(shí)，通過(guò)它可以用 HTML 和 JavaScript 編寫原生應(yīng)用程序.這篇文章主要介紹了NW.js 簡(jiǎn)介與使用,需要的朋友可以參考下
    2018-02-02
  • 關(guān)于JavaScript作用域你想知道的一切

    關(guān)于JavaScript作用域你想知道的一切

    關(guān)于JavaScript作用域你想知道的一切，本文全部告訴大家，幫助大家全面的了解JavaScript作用域，感興趣的小伙伴們可以參考一下
    2016-02-02
  • Javascript中的作用域及塊級(jí)作用域

    Javascript中的作用域及塊級(jí)作用域

    作用域永遠(yuǎn)都是任何一門編程語(yǔ)言中的重中之重，因?yàn)樗刂浦兞颗c參數(shù)的可見(jiàn)性與生命周期。下面給大家介紹Javascript中的作用域及塊級(jí)作用域，需要的朋友參考下吧
    2017-12-12
  • JS訪問(wèn)DOM節(jié)點(diǎn)方法詳解

    JS訪問(wèn)DOM節(jié)點(diǎn)方法詳解

    這篇文章主要介紹了JS訪問(wèn)DOM節(jié)點(diǎn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JS訪問(wèn)DOM節(jié)點(diǎn)的相關(guān)函數(shù)與使用方法,需要的朋友可以參考下
    2016-11-11
  • CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨

    CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨

    這篇文章主要介紹了CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨，想要學(xué)習(xí)follow的同學(xué)，一定要看一下
    2021-04-04
  • javascript中一些數(shù)組常用的API總結(jié)

    javascript中一些數(shù)組常用的API總結(jié)

    Js中數(shù)組是一個(gè)重要的數(shù)據(jù)結(jié)構(gòu),它相比于字符串有更多的方法,本篇文章總結(jié)了一些數(shù)組中常用的API,我們把它們分成兩類,一類是會(huì)改變?cè)紨?shù)組,一類是不會(huì)改變?cè)紨?shù)組,感興趣的小伙伴可以學(xué)習(xí)一下
    2023-09-09
  • JavaScript 最佳實(shí)踐：幫你提升代碼質(zhì)量

    JavaScript 最佳實(shí)踐：幫你提升代碼質(zhì)量

    在本篇教程中，我將指出一些重要的 JavaScript 最佳實(shí)踐，讓你不必去用另外一種艱難的方式來(lái)了解它們。準(zhǔn)備好去升級(jí)你的代碼吧
    2016-12-12
  • url特殊字符編碼encodeURI?VS?encodeURIComponent分析

    url特殊字符編碼encodeURI?VS?encodeURIComponent分析

    這篇文章主要介紹了url特殊字符編碼encodeURI?VS?encodeURIComponent分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • JS獲得QQ號(hào)碼的昵稱,頭像,生日的簡(jiǎn)單實(shí)例

    JS獲得QQ號(hào)碼的昵稱,頭像,生日的簡(jiǎn)單實(shí)例

    這篇文章主要介紹了JS獲得QQ號(hào)碼的昵稱,頭像,生日的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下
    2013-12-12

最新評(píng)論