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 私有成员分析
Jan 13 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
Augularjs-起步详解
Jul 08 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
vue组件间通信子与父详解(二)
Nov 07 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
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/11/03 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python 导入文件过程图解
2019/10/15 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
国际贸易专业自荐信
2014/06/10 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
效能风暴心得体会
2014/09/04 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
后备干部推荐材料
2014/12/24 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
python中pycryto实现数据加密
2022/04/29 Python