`

页面信息滚动块

    博客分类:
  • Web
阅读更多

 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>滚动页面</title>
    <!-- author:chendonghua -->
    <!-- 直接把这些代码放html文件中在IE下即可运行 -->
  </head>
  <body>
    <div style="width:400px;"><font size="5" color="red">2009年世界富豪排行榜666</font></div>
    <div id="demo" style="overflow:hidden;width:320px; height:260px;float:none;border-style:dotted;">
      <ul class="padding10" style="padding-top:5px; padding-bottom:5px;">
	 <li>
	   <div style="width:300px; float:left">第一名<span style="margin-left:15px;te">沃伦·巴菲特</span></div>
          <div style="float:left; width:300px;">美国<span style="margin-left:15px;">77岁</span><span style="margin-left:15px;">620亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第二名<span style="margin-left:15px;">卡洛斯-斯利姆·赫鲁家族</span></div><br>
          <div style="float:left; width:300px;">墨西哥<span style="margin-left:15px;">68岁</span><span style="margin-left:15px;">600亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第三名<span style="margin-left:15px;">比尔·盖茨</span></div>
          <div style="float:left; width:300px;">美国<span style="margin-left:15px;">58岁</span><span style="margin-left:15px;">580亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第四名<span style="margin-left:15px;">拉什米·米塔尔</span></div>
          <div style="float:left; width:300px;">印度<span style="margin-left:15px;">57岁</span><span style="margin-left:15px;">450亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第五名<span style="margin-left:15px;">穆凯什·阿姆巴尼</span></div>
          <div style="float:left; width:300px;">印度<span style="margin-left:15px;">50岁</span><span style="margin-left:15px;">430亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第六名<span style="margin-left:15px;">阿尼尔·阿姆巴尼</span></div>
          <div style="float:left; width:300px;">美国<span style="margin-left:15px;">48岁</span><span style="margin-left:15px;">420亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第七名<span style="margin-left:15px;">英瓦尔·坎普拉德家族</span></div>
          <div style="float:left; width:300px;">瑞典<span style="margin-left:15px;">81岁</span><span style="margin-left:15px;">310亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第八名<span style="margin-left:15px;">KP-辛格</span></div><br>
          <div style="float:left; width:300px;">印度<span style="margin-left:15px;">76岁</span><span style="margin-left:15px;">300亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第九名<span style="margin-left:15px;">奥莱格-德里帕斯卡</span></div>
          <div style="float:left; width:300px;">俄罗斯<span style="margin-left:15px;">40岁</span><span style="margin-left:15px;">280亿美元</span></div>
	   <div class="clr"></div>
	   <div style="width:300px; float:left">第十名<span style="margin-left:15px;">卡尔·阿尔布里特</span></div>
          <div style="float:left; width:300px;">德国<span style="margin-left:15px;">88岁</span><span style="margin-left:15px;">270亿美元</span></div>
	   <div class="clr"></div>
	 </li>
      </ul>
    </div>
    <script type="text/javascript">
	function next(elem){    
	   	 do{    
	               elem=elem.nextSibling;    
	        }while(elem&&elem.nodeType!=1);    
		 return elem;    
	}    
       function first(elem){    
	        elem=elem.firstChild;    
	        return elem && elem.nodeType!=1?next(elem):elem;    
	}
	var Marquee = {
		init : function(id,speed){
			this.speed = speed || 50;
			this.boxID = id;
			this.scrollBox = document.getElementById(id);
			this.appendBox=first(this.scrollBox).cloneNode(true);
			this.scrollBox.appendChild(this.appendBox);
			this.objs = {
				scrollBox : this.scrollBox,
				appendBox : this.appendBox,
				speed : this.speed,
				id : this.boxID
			};
			return this;
		},
		scrollUp : function(){
			var self = this.objs;
			self.begin = function(){
				self.doScr = setInterval(function(){
					if(self['appendBox'].offsetHeight<=self['scrollBox'].scrollTop){
						self['scrollBox'].scrollTop-=self['appendBox'].offsetHeight;
					}else{
						self['scrollBox'].scrollTop++;
					}
				},self.speed);
			}
			self.begin();
			self.scrollBox.onmouseover = function(){
				clearInterval(self.doScr);
			}
			self.scrollBox.onmouseout = function(){
				self.begin();
			}
		}
	}
	Marquee.init("demo",50).scrollUp();
    </script>
  </body>
</html>
 
分享到:
评论

相关推荐

    SmoothONePageScroll单页面滚动

    Smooth ONePage Scroll 是一种流行的JavaScript插件,用于创建单页面滚动效果,这种效果使得整个网站内容在单个页面上以平滑滚动的方式展现,而不是通过传统的多页面跳转。这种设计模式通常被称为"全屏滚动"或"一屏...

    jQuery的单页面滚动插件(垂直,水平,都可以)

    jQuery的单页面滚动插件是一种增强网页用户体验的工具,它使得网页内容可以在单个页面内进行垂直或水平的平滑滚动。这样的设计不仅简洁,而且能够提供流畅的导航体验,尤其适用于内容丰富的网站或者长篇文章的展示。...

    原生js和jquery滚动条滑动块

    原生JavaScript提供了`window.scrollTo()`方法来实现页面滚动。这个方法接受两个参数,分别是水平方向和垂直方向的滚动距离。例如,以下代码会将页面滚动到指定位置: ```javascript window.scrollTo({left: 0, top...

    页面向下滚动内容滑动展示出来效果

    当你的页面向下拖动的时候,底部的列表会向上滑动展示出来,有一个动画效果 使用方法: 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可 (js采用绝对路径...

    方块滚动404页面.zip

    简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一...

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

    这种功能常见于网页设计中,可以有效地组织和展示大量信息,提升用户体验。 首先,`index.html`是网页的主体文件,它包含了HTML结构,其中包括了Tab选项卡的HTML元素。这些元素通常包括一个父容器,以及多个表示...

    jquery块滚动条

    "jquery块滚动条"是指利用jQuery实现的一种滚动效果,通常用于增强网页用户体验,使得页面滚动更加平滑和流畅。这种效果通常被称为“块滚动”或“分页滚动”,在用户滚动页面时,内容会以块状形式逐个加载,而不是一...

    Div块上下左右循环滚动

    【Div块上下左右循环滚动】是一种常见的网页动态效果,它可以使网页中的某个Div元素实现持续不断的循环滚动,增强用户体验和视觉吸引力。这种效果通常通过JavaScript和CSS技术来实现,尤其在现代网页设计中,...

    6、jQ+CSS3页面滚动内容元素动画特效

    "6、jQ+CSS3页面滚动内容元素动画特效"是一个关于如何利用jQuery和CSS3技术在页面滚动时实现动态内容展示的主题。这个主题涉及到两个核心的技术:jQuery库和CSS3动画。 jQuery是一个强大的JavaScript库,它简化了...

    jQuery Scrollify 一款鼠标滚轮控制页面滚动效

    jQuery Scrollify是一款强大的JavaScript库,专门用于实现鼠标滚轮控制的页面滚动效果。这款插件使得网页的滚动体验更加平滑、优雅,特别是在创建单页应用(Single Page Applications)或者设计全屏滚动网站时非常...

    jQuery上下滑动页面滚动定位代码.zip

    至于"描点定位",这通常指的是在页面侧面显示一列锚点链接,用户点击后页面滚动到对应的标题或内容块。实现这个功能,我们需要先为页面上的各个目标元素添加ID,然后创建对应的链接。jQuery的`attr()`和`on()`方法...

    jQuery带tab切换的新闻信息滚动效果

    标题中的“jQuery带tab切换的新闻信息滚动效果”是指一种基于jQuery库实现的网页交互功能,它结合了选项卡切换和信息滚动两种效果。这种效果可以让网页内容更加动态且易于浏览,尤其适用于展示多条新闻资讯或者产品...

    随页面滚动定位的侧边栏悬浮框js插件

    随页面滚动定位的侧边栏悬浮框js插件,包括页面自适应、函数节流、悬浮区域高度自适应等。具体效果参考博客 https://blog.csdn.net/zh_rey/article/details/80136619

    简单鼠标手势控制页面滚动

    这个程序的设计目标:用Silverlight实现一个浮动在页面右下角的鼠标手势控制块,让用户用鼠标手势控制页面滚动,提供更好的用户浏览体验。 设计计划: 1.制作一个浮动DIV,承载Silverlight。 2.实现鼠标移动方向与...

    jQuery仿猎豹浏览器鼠标滚动单页面滑动播放效果

    通过对每个内容区块设置不同的top值,并在滚动事件中调整这些值,可以实现内容随着页面滚动而上下移动的视觉效果。 综上所述,"jQuery仿猎豹浏览器鼠标滚动单页面滑动播放效果"是一项结合了jQuery事件处理、动画...

    朋友网右侧块滚动条效果

    通常,滚动条的设计不仅涉及到基本的滚动功能,还包括定制样式、交互反馈以及与页面其他元素的协调性。 首先,我们来讨论滚动条的基本原理。在网页中,当内容超过容器的显示范围时,浏览器会自动显示滚动条,允许...

    带有箭头的jQuery滚动页面翻页代码.7z

    6. **代码实现**:在实际开发过程中,开发者可能需要编写HTML结构来定义页面布局,使用CSS来设置样式和动画效果,以及编写jQuery脚本来处理用户交互和页面滚动逻辑。代码可能包括绑定事件处理器、计算滚动距离和执行...

    jQuery类似微博信息更新鼠标滚动页面无限加载更多内容

    "jQuery类似微博信息更新鼠标滚动页面无限加载更多内容"这个主题,就是关于如何利用jQuery实现一个动态加载机制,即“滚动加载”或“懒加载”,让用户在浏览时无需翻页,只需滚动页面就能自动加载更多内容。...

    滚动鼠标到底部增加页面内容

    在无限滚动中,Ajax请求通常采用`GET`方法,向服务器请求新的数据块。 4. **CSS和DOM操作**: 新加载的内容需要被正确地插入到DOM(文档对象模型)中,以便用户可以看到它们。这通常涉及对CSS选择器的理解和使用,...

    jquery 滚动条整屏翻页

    整屏翻页的核心在于监听滚动条事件,并在用户滚动到特定位置时,触发页面的整屏滚动。这通常需要结合 jQuery 的 `$(window).scroll()` 事件监听函数,以及计算滚动距离和页面高度的方法。当滚动的距离等于一个屏幕的...

Global site tag (gtag.js) - Google Analytics