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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
jquery图片切换实例分析
Apr 15 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 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 md5下16位和32位的实现代码
2008/04/09 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python3转换code128条形码的方法
2019/04/17 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
个人作风剖析材料
2014/02/02 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript