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代码
Nov 09 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
javascript 面向对象 function类
May 13 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 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
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
php实现评论回复删除功能
2017/05/23 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
vue实现购物车的监听
2020/04/20 Javascript
python列表与元组详解实例
2013/11/01 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
学院领导推荐信
2013/10/30 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
安全生产承诺书范文
2014/05/22 职场文书
社区服务活动报告
2015/02/05 职场文书
情人节活动总结范文
2015/02/05 职场文书