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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
vue-router源码之history类的浅析
May 21 Javascript
js实现九宫格抽奖
Mar 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邮件发送,php发送邮件的类
2011/03/24 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
Python多线程实例教程
2014/09/06 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python中__slots__用法实例
2015/06/04 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python中eval与int的区别浅析
2019/08/11 Python
python如何处理程序无法打开
2020/06/16 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
玄武湖导游词
2015/02/05 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android