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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
js 上传图片预览问题
Dec 06 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
删除table表格行的实例讲解
Sep 21 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 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
学习php中的正则表达式
2014/08/17 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
javascrit中undefined和null的区别详解
2019/04/07 Javascript
js实现图片实时时钟
2020/01/15 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
Python selenium如何设置等待时间
2016/09/15 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
程序员岗位职责
2013/11/11 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
座谈会主持词
2014/03/20 职场文书
函授生自我鉴定
2014/03/25 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python