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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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中simplexml_load_string函数使用说明
2011/01/01 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
JavaScript中的私有成员
2006/09/18 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
python中使用while循环的实例
2019/08/05 Python
python logging添加filter教程
2019/12/24 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
python开发一款翻译工具
2020/10/10 Python
数据库的约束含义
2012/09/09 面试题
建筑自我鉴定
2013/10/19 职场文书
生日宴会答谢词
2014/01/09 职场文书
六查六看剖析材料
2014/10/06 职场文书