`
入云涛
  • 浏览: 156039 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

IE 展示 上下滚动 实现Marquee机制

IE 
阅读更多
最近要做一个大屏幕展示上下滚动的列表,而IE自带的Marquee,无法满足需要,随自己写了一个滚动机制,代码在附件中,


重要的代码
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);
  }
}



具体见附件
  • 大小: 179.6 KB
  • 大小: 177.9 KB
分享到:
评论

相关推荐

    利用Marquee实现无缝循环滚动文字

    ### 利用Marquee实现无缝循环滚动文字 在网页设计中,为了使页面更加生动、吸引人,常常会使用到动态效果。其中一种常见的动态效果就是利用`&lt;marquee&gt;`标签来实现文字或图片的自动滚动。不过,在提供的代码片段中,...

    IE 上下滚动展示模仿Marquee机制

    总的来说,这个自定义的IE上下滚动展示机制通过JavaScript动态操作DOM元素的位置和透明度,实现了类似Marquee的滚动效果,同时提供了更多的定制选项,如滚动速度和透明度变化。这种方法虽然比HTML的`&lt;marquee&gt;`标签...

    js Marquee上下滚动效果

    在网页设计中,Marquee元素常被用来实现文本或图像的滚动展示,尤其在有限的空间内展示大量信息时非常实用。本篇将深入讲解如何利用JavaScript实现一个上下滚动的效果,并参考提供的"MSClass.js"文件进行分析。 一...

    jQuery实现网站中公告上下无缝滚动,marquee

    jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理和动画效果,因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中,我们将深入探讨如何使用jQuery实现这个功能。 首先,我们需要在...

    marquee图片无缝滚动(上下左右均可)

    描述提到"marquee一款非常NB的插件可以实现无缝滚动上下左右都可以。使用简单操作容易",这表明存在一个名为“marquee”的插件或者扩展,它增强了原始`&lt;marquee&gt;`元素的功能,提供了更丰富的滚动方式,并且用户友好...

    用Javascript来实现Marquee效果

    在网页设计中,Marquee是一种常见的滚动文本或图像效果,常用于展示新闻头条、广告等动态内容。传统的Marquee效果可以通过HTML `&lt;marquee&gt;` 标签实现,但由于该标签在HTML5中已被废弃,因此现代网页通常采用...

    Javascript实现Marquee的滚动功能

    鄙人上传的此脚本(含Demo)是一个Marquee类,开放了几个接口轻松实现滚动的方向、延时、尺寸等参数的设置,对从事网页前端开发的设计人员有很大的好处。需要注意的地方就是:table的width要大于外框的width(呵呵,...

    Android 实现TextView上下滚动效果

    在Android开发中,实现TextView的上下滚动效果可以让信息在有限的空间内持续展示,提升用户体验。以下将详细讲解如何实现这一功能。 首先,我们要明白TextView是Android SDK中的一个基础组件,用于显示单行或多行...

    jQuery实现网站中公告上下无缝滚动,marquee(每条广告之间的高度无需一致)

    类似以前的公告通知,上下marquee滚动,导入该插件,调用myScroll方法, 设置speed即可。jQuery实现网站中公告上下无缝滚动,marquee(每条广告之间的高度无需一致),自己的坑自己来填了,这个和我以前上传的一样,...

    js实现marquee标签

    在网页设计中,有时我们需要创建一个滚动效果,例如新闻标题的自动滚动,这在早些年经常使用HTML的`&lt;marquee&gt;`标签来实现。然而,`&lt;marquee&gt;`是Internet Explorer浏览器特有的标签,它在Firefox和其他标准浏览器中并...

    juqery实现marquee的效果

    总结,这个项目展示了如何使用jQuery在手机端实现平滑的marquee效果。通过结合HTML、CSS和jQuery,我们可以创建一个适应各种设备且性能良好的滚动动画。在实际应用中,根据需求可以进一步定制滚动速度、方向、暂停和...

    js替代marquee实现图片无缝滚动

    通过JavaScript实现的无缝滚动相比`&lt;marquee&gt;`标签有更高的灵活性和控制性,可以适应不同的布局和滚动效果。这种技术可以应用于网站的广告栏、滚动新闻、产品展示等多个场景,提升用户界面的动态效果和交互体验。

    HTML标签marquee实现滚动效果

    HTML标签marquee实现滚动效果,实现文字在网页中漂移的代码。

    js实现上下滚动跑马灯效果

    在前端开发中,跑马灯效果是一种常见的动态展示方式,常用于新闻滚动、广告轮播等场景。在HTML5时代,`&lt;marquee&gt;`标签曾是实现这种效果的简便手段,但由于它缺乏语义化、性能不佳且不支持现代Web标准,逐渐被淘汰。...

    字幕滚动——MarQuee控件

    在IT领域,尤其是在网页设计和用户界面开发中,"Marquee"控件是一个常见的元素,它主要用于实现文本或图像的滚动展示效果。标题中的“字幕滚动——MarQuee控件”指的就是这个功能,它允许信息以滚动的方式在有限的...

    纯文字横向滚动组件 marquee.vue

    JavaScript ,前端,vue

    js 实现上下滚动

    标题“js 实现上下滚动”涉及的是JavaScript编程中如何创建页面元素的上下滚动效果,这在网页设计中非常常见,特别是在动态展示信息或创建滚动通知时。JavaScript是一种强大的客户端脚本语言,它允许我们对HTML文档...

Global site tag (gtag.js) - Google Analytics