<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>
分享到：
相关推荐
Smooth ONePage Scroll 是一种流行的JavaScript插件，用于创建单页面滚动效果，这种效果使得整个网站内容在单个页面上以平滑滚动的方式展现，而不是通过传统的多页面跳转。这种设计模式通常被称为"全屏滚动"或"一屏...
jQuery的单页面滚动插件是一种增强网页用户体验的工具，它使得网页内容可以在单个页面内进行垂直或水平的平滑滚动。这样的设计不仅简洁，而且能够提供流畅的导航体验，尤其适用于内容丰富的网站或者长篇文章的展示。...
原生JavaScript提供了`window.scrollTo()`方法来实现页面滚动。这个方法接受两个参数，分别是水平方向和垂直方向的滚动距离。例如，以下代码会将页面滚动到指定位置： ```javascript window.scrollTo({left: 0, top...
当你的页面向下拖动的时候，底部的列表会向上滑动展示出来，有一个动画效果 使用方法： 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可 (js采用绝对路径...
简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一个404简介美丽的一...
这种功能常见于网页设计中，可以有效地组织和展示大量信息，提升用户体验。 首先，`index.html`是网页的主体文件，它包含了HTML结构，其中包括了Tab选项卡的HTML元素。这些元素通常包括一个父容器，以及多个表示...
"jquery块滚动条"是指利用jQuery实现的一种滚动效果，通常用于增强网页用户体验，使得页面滚动更加平滑和流畅。这种效果通常被称为“块滚动”或“分页滚动”，在用户滚动页面时，内容会以块状形式逐个加载，而不是一...
【Div块上下左右循环滚动】是一种常见的网页动态效果，它可以使网页中的某个Div元素实现持续不断的循环滚动，增强用户体验和视觉吸引力。这种效果通常通过JavaScript和CSS技术来实现，尤其在现代网页设计中，...
"6、jQ+CSS3页面滚动内容元素动画特效"是一个关于如何利用jQuery和CSS3技术在页面滚动时实现动态内容展示的主题。这个主题涉及到两个核心的技术：jQuery库和CSS3动画。 jQuery是一个强大的JavaScript库，它简化了...
jQuery Scrollify是一款强大的JavaScript库，专门用于实现鼠标滚轮控制的页面滚动效果。这款插件使得网页的滚动体验更加平滑、优雅，特别是在创建单页应用（Single Page Applications）或者设计全屏滚动网站时非常...
至于"描点定位"，这通常指的是在页面侧面显示一列锚点链接，用户点击后页面滚动到对应的标题或内容块。实现这个功能，我们需要先为页面上的各个目标元素添加ID，然后创建对应的链接。jQuery的`attr()`和`on()`方法...
标题中的“jQuery带tab切换的新闻信息滚动效果”是指一种基于jQuery库实现的网页交互功能，它结合了选项卡切换和信息滚动两种效果。这种效果可以让网页内容更加动态且易于浏览，尤其适用于展示多条新闻资讯或者产品...
随页面滚动定位的侧边栏悬浮框js插件，包括页面自适应、函数节流、悬浮区域高度自适应等。具体效果参考博客 https://blog.csdn.net/zh_rey/article/details/80136619
这个程序的设计目标：用Silverlight实现一个浮动在页面右下角的鼠标手势控制块，让用户用鼠标手势控制页面滚动，提供更好的用户浏览体验。 设计计划： 1.制作一个浮动DIV，承载Silverlight。 2.实现鼠标移动方向与...
通过对每个内容区块设置不同的top值，并在滚动事件中调整这些值，可以实现内容随着页面滚动而上下移动的视觉效果。 综上所述，"jQuery仿猎豹浏览器鼠标滚动单页面滑动播放效果"是一项结合了jQuery事件处理、动画...
通常，滚动条的设计不仅涉及到基本的滚动功能，还包括定制样式、交互反馈以及与页面其他元素的协调性。 首先，我们来讨论滚动条的基本原理。在网页中，当内容超过容器的显示范围时，浏览器会自动显示滚动条，允许...
6. **代码实现**：在实际开发过程中，开发者可能需要编写HTML结构来定义页面布局，使用CSS来设置样式和动画效果，以及编写jQuery脚本来处理用户交互和页面滚动逻辑。代码可能包括绑定事件处理器、计算滚动距离和执行...
"jQuery类似微博信息更新鼠标滚动页面无限加载更多内容"这个主题，就是关于如何利用jQuery实现一个动态加载机制，即“滚动加载”或“懒加载”，让用户在浏览时无需翻页，只需滚动页面就能自动加载更多内容。...
在无限滚动中，Ajax请求通常采用`GET`方法，向服务器请求新的数据块。 4. **CSS和DOM操作**： 新加载的内容需要被正确地插入到DOM（文档对象模型）中，以便用户可以看到它们。这通常涉及对CSS选择器的理解和使用，...
它的主要功能是让内容（通常是文本或图像）在页面上水平或垂直滚动。 #### 2. Marquee标签基本用法 - **基本语法**： ```html 滚动的内容 ``` - **常用属性**： - **`direction`**: 指定内容滚动的方向，可...