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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
javascript实现画板功能
Apr 12 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 删除指定文件夹的实例讲解
2017/07/25 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
python实现百度关键词排名查询
2014/03/30 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python unittest实现api自动化测试
2018/04/04 Python
python K近邻算法的kd树实现
2018/09/06 Python
django 将model转换为字典的方法示例
2018/10/16 Python
对python3新增的byte类型详解
2018/12/04 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
简单了解python数组的基本操作
2019/11/26 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
总裁助理岗位职责
2014/02/17 职场文书
清扬洗发水广告词
2014/03/14 职场文书
公司聘任书模板
2014/03/29 职场文书
交通安全寄语大全
2014/04/08 职场文书
纠纷协议书
2014/04/16 职场文书
学生鉴定评语大全
2014/05/05 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android