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


Posted in Javascript onDecember 20, 2009
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); 
} 
}

代码打包下载
Javascript 相关文章推荐
JavaScript执行效率与性能提升方案
Dec 21 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
js控制div弹出层实现方法
May 11 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
js控制div及网页相关属性的代码
Dec 19 #Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 #Javascript
JS 的应用开发初探(mootools)
Dec 19 #Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 #Javascript
javascript demo 基本技巧
Dec 18 #Javascript
IE和Firefox下event事件杂谈
Dec 18 #Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 #Javascript
You might like
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python处理数据,存进hive表的方法
2018/07/04 Python
kafka-python批量发送数据的实例
2018/12/27 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
浅谈Python type的使用
2019/11/19 Python
python 实现生成均匀分布的点
2019/12/05 Python
python标准库os库的函数介绍
2020/02/12 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
优秀班主任材料
2014/12/16 职场文书
焦裕禄观后感
2015/06/03 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers