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 相关文章推荐
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
angular实现商品筛选功能
Feb 01 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
vue 给数组添加新对象并赋值
Apr 20 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
mysql 搜索之简单应用
2007/04/27 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php生成图片验证码
2015/06/09 PHP
php递归实现无限分类的方法
2015/07/28 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
python实现bucket排序算法实例分析
2015/05/04 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
用Python编写简单的微博爬虫
2016/03/04 Python
python实现Adapter模式实例代码
2018/02/09 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
详解Python传入参数的几种方法
2019/05/16 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
大一自我鉴定范文
2013/12/27 职场文书
前处理班长职位说明书
2014/03/01 职场文书
可口可乐广告词
2014/03/20 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
教师一帮一活动总结
2014/07/08 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers