IE 上下滾動展示模仿Marquee機制
更新時間:2009年12月20日 02:11:13 作者:
最近要做一個大屏幕展示上下滾動的列表,而IE自帶的Marquee,無法滿足需要,隨自己寫了一個滾動機制,代碼在附件中
復(fù)制代碼 代碼如下:
var STARTINGOPACITY = 40; //設(shè)置不透明度
var STARTINP = 70;//設(shè)置透明度
var SCROLLSTUP = 1;//滾動速度,1為一個像素
var SCROLLSYY = 100;//滾動時間請求
var reqflg = false;
// handles manual scrolling of the content //
function scrollContent(pardiv,id,sub) {
var div = document.getElementById("textslider");
var divsub = document.getElementById(sub);
var divpar = document.getElementById(pardiv);
clearInterval(div.timer);
div.style.opacity = STARTINGOPACITY * .01;
div.style.filter = 'alpha(opacity=' + STARTINP + ')';
var div2 = document.getElementById("textslider2");
if(div2!=null){
clearInterval(div2.timer);
div2.style.opacity = STARTINGOPACITY * .01;
div2.style.filter = 'alpha(opacity=' + STARTINP + ')';
}
var tem = div.innerHTML;//第一個頁
tem1 = "<div class=\"slidercontent1\" id=\"textslider2\">"+tem+"</div>";//第二個頁
var objheight = divpar.offsetHeight;
var divheight = div.offsetHeight;
//判斷是否需要滾屏,如果不需要就不滾動
if(objheight<divheight){
if(!reqflg){
divpar.innerHTML += tem1;
reqflg = true;
div = document.getElementById("textslider");
div2 = document.getElementById("textslider2");
//設(shè)置高度
div2.style.top = divheight-1+ "px";
}
div.timer = setTimeout( function() { scrollAnimate(div,div2) }, SCROLLSYY);
}
}
function scrollAnimate(div,div2) {
//獲取兩個子div的top值
var divtop = div.offsetTop;
//alert(divtop);
if(divtop==0){
div.style.top = "0px";
divtop = 0;
}
var div2top = div2.offsetTop;
if(div2top==0){
div2top = 0;
div2.style.top = "0px";
}
if(divtop<div2top){
//1號在上面 2號在下面
div.style.top = divtop - SCROLLSTUP+'px';
div2.style.top = div2top - SCROLLSTUP+'px';
//alert("div.style.top:"+div.style.top+"---div2.style.top:"+div2.style.top+":height:"+div.offsetHeight);
//判斷是否交換位置,如果高度位置等于top那么交換
if(div.offsetTop==-div.offsetHeight){
//將top設(shè)置為最下面
div.style.top = div2.offsetHeight;
}
}else{
//2號在上面 1號在下面
div2.style.top = div2top - SCROLLSTUP+'px';
div.style.top = divtop - SCROLLSTUP+'px';
//判斷是否交換位置,如果高度位置等于top那么交換
if(div2.offsetTop==-div2.offsetHeight){
//將top設(shè)置為最下面
div2.style.top = div.offsetHeight;
}
}
div.timer = setTimeout( function() { scrollAnimate(div,div2) }, SCROLLSYY);
}
// cancel the scrolling on mouseout //
function cancelScroll(pardiv,id,sub) {
var div = document.getElementById(id);
div.style.opacity = 1;
div.style.filter = 'alpha(opacity=100)';
clearTimeout(div.timer);
var div2 = document.getElementById("textslider2");
if(div2!=null){
div2.style.opacity = 1;
div2.style.filter = 'alpha(opacity=100)';
clearTimeout(div2.timer);
}
}
代碼打包下載
相關(guān)文章
Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知
這篇文章給大家介紹了Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知的方法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-08-08JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式
這篇文章介紹了JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06php gethostbyname獲取域名ip地址函數(shù)詳解
php gethostbyname獲取域名ip地址函數(shù),需要根據(jù)域名得到ip地址的朋友有福了。2010-01-01js針對ip地址、子網(wǎng)掩碼、網(wǎng)關(guān)的邏輯性判斷
這篇文章主要介紹了js針對ip地址、子網(wǎng)掩碼、網(wǎng)關(guān)的邏輯性判斷,感興趣的小伙伴們可以參考一下2016-01-01