js 文本滾動(dòng)效果的實(shí)例代碼
更新時(shí)間：2013年08月17日 12:32:07 作者：
一個(gè)簡(jiǎn)單的滾動(dòng)效果，我只測(cè)試了文本，對(duì)于圖片有需要的朋友可以測(cè)試一下哦
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
.slchanpin001{width:200px;border:1px solid orange;margin:55px auto}
.slchanpin001-t{height:25px;background:orange}
.slchanpin001-c{width:200px;height:60px;overflow:hidden;position:relative}
.slchanpin001-c li{float:left;width:200px;height:60px;background:red;}
.slchanpingCon01{height:60px;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div class="slchanpin001">
<div class="slchanpin001-t"></div>
<div class="slchanpin001-c">
<div class="slchanpingCon01" id="slchanpingCon01">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>10</li>
<li>10</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var sl = function(id){ return document.getElementById(id)}
var speed = 0;
var timer = null;
var i=0;
function slProdust(){
var slchanpingCon01 = sl("slchanpingCon01").getElementsByTagName("li");
var slElem = sl("slchanpingCon01");
var slDivWidth = slchanpingCon01[0].offsetWidth * slchanpingCon01.length;
slElem.style.width = slDivWidth +"px";
function autoFunc(){
if(speed > -slDivWidth ){
speed--;
slElem.style.left = speed + "px"
}
else{
clearTimeout(timer);
}
timer = setTimeout(function(){autoFunc()},10);
}
autoFunc();
}
slProdust();
</script>
</body>
</html>
您可能感興趣的文章:
- javascript實(shí)現(xiàn)自動(dòng)輸出文本（打字特效）
- js實(shí)現(xiàn)點(diǎn)擊文本框顯示日期選擇器特效代碼分享
- 隨日期每天自動(dòng)變換的文本的js特效
- javascript特殊文本輸入框網(wǎng)頁(yè)特效
- Js+CSS實(shí)現(xiàn)的間斷和不間斷文本滾動(dòng)代碼
- js實(shí)現(xiàn)文本上下來(lái)回滾動(dòng)
- js實(shí)現(xiàn)單行文本向上滾動(dòng)效果實(shí)例代碼
- JS實(shí)用的帶停頓的逐行文本循環(huán)滾動(dòng)效果實(shí)例
- 純javascript實(shí)現(xiàn)四方向文本無(wú)縫滾動(dòng)效果
- JavaScript文本特效實(shí)例小結(jié)【3個(gè)示例】
相關(guān)文章
JS try catch語(yǔ)句一般在什么情況下使用？是必須使用的嗎？下面就讓小編來(lái)給大家介紹一下試用心得。2015-08-08
JavaScript數(shù)組及常見(jiàn)操作方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組及常見(jiàn)操作方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11JavaScript數(shù)據(jù)在不同頁(yè)面的傳遞（URL參數(shù)獲?。?/a>
這篇文章主要介紹了JavaScript數(shù)據(jù)在不同頁(yè)面的傳遞（URL參數(shù)獲取），下面文章圍繞JavaScript數(shù)據(jù)在不同頁(yè)面的傳遞的實(shí)現(xiàn)過(guò)，想了解的小伙伴可以和小編一起進(jìn)入文章了解具體內(nèi)容,需要的也朋友可參考一下2021-12-12
JavaScript實(shí)現(xiàn)私有屬性的幾種方式小結(jié)
在JavaScript中,私有屬性是指只能在對(duì)象內(nèi)部訪問(wèn)的屬性,外部無(wú)法直接訪問(wèn),JavaScript并沒(méi)有提供官方的私有屬性的支持,但可以通過(guò)一些技巧來(lái)模擬實(shí)現(xiàn)私有屬性,所以本文給大家總結(jié)了JavaScript實(shí)現(xiàn)私有屬性的幾種方式,需要的朋友可以參考下2024-04-04
JavaScript中錯(cuò)誤正確處理方式小結(jié)你用對(duì)了嗎
本文將會(huì)討論客戶端JavaScript中的錯(cuò)誤處理。主要介紹JavaScript中的易犯錯(cuò)誤、錯(cuò)誤處理、異步代碼編寫(xiě)等內(nèi)容。下面就讓我們一起看看如何正確處理JavaScript中的錯(cuò)誤2017-10-10
js Firefox 加入收藏夾功能代碼 兼容Firefox 和 IE
最近改用Firefox后，發(fā)現(xiàn)很多網(wǎng)站的“加入收藏”鏈接點(diǎn)擊無(wú)效了，后來(lái)發(fā)現(xiàn)原來(lái)是IE瀏覽器和Firefox瀏覽器的“加入收藏夾”的寫(xiě)法是不同的。2009-12-12
element select下拉框編輯時(shí)回顯已經(jīng)刪除的數(shù)據(jù)操作代碼
今天做項(xiàng)目遇到一個(gè)棘手的問(wèn)題,關(guān)于element select下拉框編輯時(shí)回顯問(wèn)題,下面小編通過(guò)實(shí)例代碼介紹element select下拉框編輯時(shí)回顯已經(jīng)刪除的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-05-05
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截屏的5種方法小結(jié)
本文主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截屏的5種方法小結(jié),感興趣的可以了解一下2009-10-10
下面小編就為大家分享一篇switchery按鈕的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Bootstrap table 服務(wù)器端分頁(yè)功能實(shí)現(xiàn)方法示例
這篇文章主要介紹了Bootstrap table 服務(wù)器端分頁(yè)功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了Bootstrap table 服務(wù)器端后臺(tái)交互與分頁(yè)功能相關(guān)操作技巧,需要的朋友可以參考下2020-06-06