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中通过URL传递汉字的方法
Apr 09 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
javascript 节点遍历函数
2010/03/28 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
vue实现扫码功能
2020/01/17 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
写给女生的道歉信
2014/01/14 职场文书
保安公司服务承诺书
2014/05/28 职场文书
关爱留守儿童标语
2014/06/18 职场文书
医院义诊活动总结
2014/07/04 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
离婚协议书范本2014
2014/10/27 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
党员民主生活会材料
2014/12/15 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL