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)文章
打開新窗口關(guān)閉當(dāng)前頁(yè)面不彈出關(guān)閉提示js代碼
打開新窗口關(guān)閉當(dāng)前頁(yè)面時(shí)總是彈出提示框,有沒有辦法避免它的彈出呢,答案是可以的接下來(lái)為大家分享一個(gè)方法可以解決此問(wèn)題,感興趣的你可不要錯(cuò)過(guò)了哈,希望可以幫助到你2013-03-03通過(guò)Javascript讀取本地Excel文件內(nèi)容的代碼示例
這篇文章主要介紹了通過(guò)Javascript讀取本地Excel文件內(nèi)容的代碼示例,但需要一定的條件才可以使用js操作本地文件,需要的朋友參考下吧2014-04-04在layui.use 中自定義 function 的正確方法
今天小編就為大家分享一篇在layui.use 中自定義 function 的正確方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript 創(chuàng)建類并動(dòng)態(tài)添加屬性及方法的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Javascript 創(chuàng)建類并動(dòng)態(tài)添加屬性及方法的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JavaScript 浮點(diǎn)數(shù)運(yùn)算 精度問(wèn)題
JavaScript小數(shù)在做四則運(yùn)算時(shí),精度會(huì)丟失,這會(huì)在項(xiàng)目中引起諸多不便,先請(qǐng)看下面腳本。2009-10-10js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果
這篇文章主要介紹了js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果,通過(guò)由上往下滾動(dòng)來(lái)實(shí)現(xiàn)不斷顯示微博的,而且每一天新微博都是通過(guò)淡入效果顯示的,需要的朋友可以參考下2015-12-12用循環(huán)或if語(yǔ)句從json中取數(shù)據(jù)示例
倘若想將id和pid數(shù)據(jù)依次取出,就只能用循環(huán),若想有選擇性的輸出時(shí),需要添加if條件2014-08-08