页面信息滚动块

最新推荐文章于 2022-11-10 20:16:59 发布

DaveeChen

最新推荐文章于 2022-11-10 20:16:59 发布

阅读量100

点赞数

分类专栏： Web 文章标签： IE JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/chenfeng0104/article/details/83535374

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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>

DaveeChen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面信息滚动块

&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;滚动页面&lt;/title&gt; &lt;!-- author:chendonghua --&gt;
复制链接

扫一扫