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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
vue监听键盘事件的相关总结
Jan 29 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
基于php iconv函数的使用详解
2013/06/09 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
学习PHP session的传递方式
2016/06/15 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
Prototype Number对象 学习
2009/07/19 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
深入浅出学习python装饰器
2017/09/29 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python容器类型公共方法总结
2020/08/19 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
SQL Server面试题
2016/10/17 面试题
学生上课迟到检讨书
2015/01/01 职场文书
营销计划书范文
2015/01/17 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
共青团员自我评价
2015/03/10 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书