`
hope598
  • 浏览: 67076 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

实现内容滚动

    博客分类:
  • web
阅读更多

下面是两种实现内容滚动效果的实例,供大家参考指正

一、js控制

<div id=ov style="height:32px;overflow:hidden;">
			<div id=iv style="padding:32px 0px;">
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期一 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期二 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期三 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期四 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期五 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期六 ^_^
				</div>
				<div style="height:32px;overflow:hidden;font-size:12px;" onmouseover="ccc.stop()" onmouseout="ccc.start()">
					今天是星期日 ^_^
				</div>
			</div>
		</div>

 

 对应的js部分如下:

var i=null,ccc;
	var mf=function(o1,o2){
		this.oo=o1;this.oi=o2;this.pl=15;
		this.Me=this.Mf=i;this.lt=2E3;this.ah=100;
		this.Xz=0;this.Ki=3;this.zi=0
	};
	pt=mf.prototype;
	pt.start=function(){
		if(!this.Mf){
			var a=this;
			this.Mf=window.setInterval(function(){a.Ax()},this.lt)
		}
	};
	pt.stop=function(){
		if(this.Mf){
			window.clearInterval(this.Mf);
			this.Mf=i
		}
		if(this.Me){
			window.clearInterval(this.Me);
			this.Me=i
		}
	};
	pt.Pk=function(a){
		this.pl=a
	};
	pt.Ax=function(){
		if(!this.Me){
			this.zi=1;
			var a=this;
			this.Me=window.setInterval(function(){a.ci()},this.ah)
		}
	};
	pt.ci=function(){
		if(!this.rp()){
			this.Xz=0;this.rp()
		}
		++this.zi;
		if(this.zi>this.Ki){
			window.clearInterval(this.Me);
			this.Me=i;++this.Xz
		}
	};
	pt.rp=function(){
		var a=Math.round(this.pl*(this.Xz+this.zi/this.Ki));
		this.oo.scrollTop=a;
		return this.oo.scrollTop==a
	};
	var D=function(did){
		return document.getElementById(did)
	};
	var minit=function(k){
		var bb=k[0],cc=k[1];
		k=k[2];bb=D(bb);cc=D(cc);
		if(bb&&cc){
			ccc=new mf(bb,cc);ccc.Pk(k);ccc.start();
		}
	}
	window.onload=function(){
		var pms=["ov","iv","32"];minit(pms);
	}

 

 

二、marquee标签

 

<div>
	<MARQUEE scrollAmount=2 direction=up style="height:38px"
		onmouseover="this.setAttribute('scrollamount', 0, 0);"
		onmouseout="this.setAttribute('scrollamount', 2, 0);">
		<ul>
			<li style="margin:5px 0 0 5px;">
				今天是星期一 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期二 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期三 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期四 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期五 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期六 ^_^
			</li>
			<li style="margin:5px 0 0 5px;">
				今天是星期日 ^_^
			</li>
		</ul>
	</MARQUEE>
</div>

 

ps:下载附件即可看到效果.

 

0
0
分享到:
评论

相关推荐

    jQuery实现表头固定表格内容滚动效果

    在网页设计中,当表格数据过多...总之,通过`jQuery`实现表头固定表格内容滚动效果,可以提升用户在浏览大量数据时的体验。在实际应用中,可以根据项目需求对上述代码进行调整和优化,以达到最佳的视觉效果和性能表现。

    用php实现图片滚动

    `:使超出容器部分不可见,实现滚动效果。 - `float: left;`:允许其他元素环绕该容器。 - **`#demoimg`**:为内部的图片元素添加样式,例如边框、显示方式等。 ##### 4. JavaScript动态滚动逻辑 - **变量初始化**...

    原生JS实现列表内容自动向上滚动效果

    因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图:  (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden;)  2. 样式方面:由于要滚动,所以必须2个ul的高度 &gt; ...

    js 实现div里面的内容滚动,并可以通过按钮控制

    【标题】:“JS实现div内滚动内容及按钮控制” 在网页设计中,有时我们需要在一个固定的div区域展示大量的文本或图片,而这个div的大小又是有限的。这时,我们可以利用JavaScript来实现div内的滚动效果,并通过按钮...

    Unity实现文字滚动效果

    Unity实现文字滚动效果,可自适应文字长度,鼠标放入UI文字开始滚动,移出后恢复原位。

    Android实现TextView文字滚动.zip

    然而,当TextView中的文本内容超出显示区域时,我们有时需要实现文本的滚动效果,以便用户可以查看全部内容。本教程将深入讲解如何在Android中实现TextView的文字滚动功能。 首先,我们要了解TextView的两种滚动...

    js实现文字内容无缝滚动动画效果

    "js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用,主要用于创建一种视觉上连续、无中断的文字滚动展示,常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息,而不会显得拥挤。...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    总的来说,通过理解和掌握这些 CSS3 的滚动条样式技巧,开发者能够实现滚动条不挤占内容区的布局,从而优化网页的用户体验。同时,结合提供的博客链接(https://blog.csdn.net/fukaiit/article/details/100069537)...

    文件滚动-----css

    在使用Flexbox或Grid布局时,可以设置容器的 `overflow` 属性来实现内容滚动。这在创建响应式布局或者需要特定滚动效果时非常有用。 5. **Scroll Snap** CSS Scroll Snap 可以让你定义元素滚动到特定位置时的停靠...

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

    - 使用`setInterval()`方法周期性地调用`Marquee()`函数,实现内容的持续滚动。 - `Marquee()`函数通过调整滚动区域的`scrollTop`属性来实现滚动效果。 - 通过`onmouseover`和`onmouseout`事件处理鼠标悬停和离开...

    Qt控件QLabel实现滚动字幕

    然后使用`setText()`方法添加需要滚动的文本内容。 3. **开启定时器**:利用`QTimer`类创建一个定时器,并连接到一个自定义的槽函数,这个槽函数将负责滚动文本的操作。使用`start()`方法启动定时器,设定合适的...

    js+实现+滚动的表格

    为了解决这个问题,“js+实现+滚动的表格”技术应运而生。这种技术允许用户在有限的屏幕空间内查看表格,通过滚动条查看超出可视区域的数据,从而提高网页的可读性和交互性。 JavaScript(简称JS)是实现这一功能的...

    js Tab选项卡标签滑动带滚动条的内容滚动切换显示代码

    在这个特定的场景中,我们讨论的是如何使用JS实现Tab选项卡的滑动切换,同时带有滚动条的内容滚动功能。这种功能常见于网页设计中,可以有效地组织和展示大量信息,提升用户体验。 首先,`index.html`是网页的主体...

    MFC滚动的静态文本。实现垂直滚动,可设置

    为了实现一个具有垂直滚动功能的静态文本控件,我们需要对其进行扩展和自定义。这个主题主要涉及到MFC中的控件自绘、消息处理以及滚动条的集成。 1. **控件自绘**: MFC中的控件自绘是通过重载`OnPaint()`函数来...

    纯css控制内容随滚动条滚动,可放任意位置

    标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...

    ViewPager+Fragment实现自动循环滚动

    在Android开发中,`ViewPager`是一个非常常用的组件,它允许用户通过左右滑动来浏览多个页面,通常用于实现Tab切换或者展示多个相似内容的页面。`Fragment`则是Android中的一个模块化组件,它可以独立于Activity存在...

    HTML5手机端实现 上下滚动

    设置适当的视口宽度和初始缩放比例可以使内容适应不同尺寸的屏幕,从而实现流畅的上下滚动。 二、CSS3与滚动效果 CSS3提供了许多新的选择器和样式规则,比如`transform`和`transition`属性,可以用来优化滚动动画。...

    html5全屏滚动实例 完美实现全屏滚动带动画

    全屏滚动通常应用于网站的首页或展示型页面,以展示丰富的视觉内容,引导用户逐步了解信息。下面将详细阐述实现全屏滚动动画的关键知识点。 1. **HTML5新特性** HTML5引入了新的语义化标签,如`&lt;section&gt;`、`...

    h5实现移动端横向滚动tab,并响应内容

    本文将深入探讨如何使用HTML5技术来实现移动端的横向滚动Tab,并且这些Tab的内容能够响应式地显示。 首先,我们需要了解基本的HTML结构。一个简单的Tab布局可以由一个包含多个`&lt;div&gt;`的容器组成,每个`&lt;div&gt;`代表一...

Global site tag (gtag.js) - Google Analytics