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触发器详解
Mar 10 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
js中自定义react数据验证组件实例详解
Oct 19 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 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
一个用php实现的获取URL信息的类
2007/01/02 PHP
php使用正则验证中文
2016/04/06 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
讲解Python中的递归函数
2015/04/27 Python
python字典排序实例详解
2015/05/20 Python
python中__slots__用法实例
2015/06/04 Python
python实现自动重启本程序的方法
2015/07/09 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
营业经理岗位职责
2013/11/10 职场文书
高级工程师岗位职责
2013/12/15 职场文书
办公室主任先进事迹
2014/01/18 职场文书
大型会议接待方案
2014/03/01 职场文书
节水口号标语
2014/06/19 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
详解MySQL集群搭建
2021/05/26 MySQL