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学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
javascript每日必学之运算符
Feb 16 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
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
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python实现XML文件解析的示例代码
2018/02/05 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python中entry用法讲解
2020/12/04 Python
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
前台文员的岗位职责
2013/11/14 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
青年文明号复核材料
2014/02/11 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
综合内勤岗位职责
2014/04/14 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2014年政工师工作总结
2014/12/18 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL