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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
js 单引号 传递方法
Jun 22 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
JS实现的自定义map方法示例
May 17 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 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简单分页类实现方法
2015/02/26 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python实现图片滑动式验证识别方法
2017/11/09 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python保存数据到本地文件的方法
2018/06/23 Python
浅谈django 重载str 方法
2020/05/19 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
会议欢迎标语
2014/06/30 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
禁毒心得体会范文
2016/01/15 职场文书