IE 上下滚动展示模仿Marquee机制
作者:bea
代码如下: var STARTINGOPACITY = 40;//设置不透明度 var STARTINP = 70;//设置透明度 var SCROLLSTUP = 1;//滚动速度,1为一个像素 var SCROLLSYY = 100;//滚动时间请求 var reqflg = false; // handles manual scrolling of the content // function scrollContent(pardiv,id,sub)
代码如下:
var STARTINGOPACITY = 40; //设置不透明度
var STARTINP = 70;//设置透明度
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");
//设置高度
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设置为最下面
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设置为最下面
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);
}
}
代码打包下载
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js 效率组装字符串 StringBuffer
- JS+CSS实现的一种交互体验 表单页面
- javascript 仿开心网好友印象功能(点击文字弹出印象框)
- JavaScript 未知高度元素垂直居中实现代码
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- Div+Js实现的带阴影菜单 微软以前网站曾用过
- Js倒计时代码,当鼠标离开页面与回到页面会自动停止与开始
- javascript强制弹出新窗口实现代码
- javaScript 删除确认实现方法小结
- jquery 表单取值常用代码
- JavaScript是否可实现多线程 深入理解JavaScript定时机制
- JavaScript 图片预览效果 推荐
- javascript 年月日联动实现核心代码
- 兼容firefox的文本框只能输入两位小数的数字的代码
- js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE
- Javascript和Ajax中文乱码吐血版解决方案
- 利用jQuery的$.event.fix函数统一浏览器event事件处理
- jQuery 连续列表实现代码
- jQuery解决iframe高度自适应代码