IE 上下滚动展示模仿Marquee机制

所属分类: 网络编程 / JavaScript 阅读数: 1124
收藏 0 赞 0 分享
复制代码 代码如下:

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);
}
}

代码打包下载
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多