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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
心扬JS分页函数代码
Sep 10 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
php 常用的系统函数
2017/02/07 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
Vue render深入开发讲解
2018/04/13 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Python文件操作的面试题
2013/06/22 面试题
应用数学专业求职信
2014/03/14 职场文书
建筑横幅标语
2014/10/09 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
考研英语辞职信
2015/05/13 职场文书
入队仪式主持词
2015/07/04 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB