本来想模仿新浪微薄那种实时更新效果那，但没有滑动的效果，看着有些生硬。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>信息滚动显示 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery.js"></script>
<style tyle="text/css">
#content {margin:0 auto;width:400px;height:600px;}
ul{list-style:none;height:300px;width:110px;overflow:hidden;border:2px solid #858585;position:relative;}
ul li{width:100px;height:40px;line-height:40px;border-bottom:1px dashed #858585;margin:5px 0px;text-align:center;position:absolute;border:1px solid red;}
</style>
<script type="text/javascript">
//自动调用
$(document).ready
(
function(){//设置定时器
var blb_bgtime = setInterval("blb_automove()",3000);
//鼠标移入移除事件
$("ul").hover(
function () {
//清除定时器
clearInterval(blb_bgtime);
},
function () {
blb_bgtime = setInterval("blb_automove()",3000);
}
);
}
);
//逐步移动
function blb_automove()
{
$("ul>li").each(
function()
{
//alert ($(this).css('top'));
var oldtop = $(this).css('top');
var pp = /px/g;
var newtop =Number(oldtop.replace(pp,""))+40;
if ( newtop > 560 )
{
$(this).css("top","0px");
}
else
{
$(this).css("top",newtop+"px");
}
// $(this).css({top:""});
}
);
}
</script>
</HEAD>
<BODY>
<input type="button" value="click" />
<div id='content'>
<ul>
<li class="item" style="top:0px;">1aaaaa</li>
<li class="item" style="top:40px;">2bbbbbbbbb</li>
<li class="item" style="top:80px;">3ccccccccc</li>
<li class="item" style="top:120px;">4dddddddd</li>
<li class="item" style="top:160px;">5eeeeeeee</li>
<li class="item" style="top:200px;">6ffffffff</li>
<li class="item" style="top:240px;">7ggggggggg</li>
<li class="item" style="top:280px;">8hhhhhhhhhh</li>
<li class="item" style="top:320px;">9jjjjjjjjjjj</li>
<li class="item" style="top:360px;">10kkkkkkkkkkk</li>
<li class="item" style="top:400px;">11oooooooooo</li>
<li class="item" style="top:440px;">12pppppppppp</li>
<li class="item" style="top:480px;">13kkkkkkkkk</li>
<li class="item" style="top:520px;">14mmmmmmmmmm</li>
<li class="item" style="top:560px;">15nnnnnnnnnn</li>
</ul>
</div>
</BODY>
</HTML>
分享到：
相关推荐
### 使用jQuery实现自动滚动效果 在现代Web开发中，动态元素和交互式用户界面变得越来越重要。其中之一就是自动滚动效果，这种效果常用于新闻站点、博客或者电子商务网站中展示最新的文章或产品信息。本文将详细...
在网页设计中，当表格数据过多...总之，通过`jQuery`实现表头固定表格内容滚动效果，可以提升用户在浏览大量数据时的体验。在实际应用中，可以根据项目需求对上述代码进行调整和优化，以达到最佳的视觉效果和性能表现。
本篇文章将深入探讨如何利用jQuery实现列表项滚动。 首先，我们需要理解基本的HTML结构，通常列表项滚动会应用在`<ul>`或`<ol>`这样的列表元素中，每个列表项是`<li>`元素。例如： ```html 项目1 项目2 ... ...
以上代码是一个简单的图片左右连续滚动的实现，你可以根据实际需求进行调整和优化。例如，添加过渡效果、动态加载图片、响应式布局等。 五、拓展应用 在实际项目中，可以进一步扩展这个功能，比如添加分页指示器、...
《jQuery实现新闻公告文字自动滚动的代码解析》 在网页设计中，为了吸引用户的注意力并高效展示信息，新闻公告文字的自动滚动效果被广泛应用。jQuery作为一款轻量级的JavaScript库，提供了丰富的功能和易用的API，...
6. **计时器和循环**：为了自动滚动图片，我们可以使用JavaScript的`setInterval()`函数设置定时器。这将在指定间隔后执行一个函数，从而实现无缝滚动效果。同时，我们需要考虑循环逻辑，确保图片滚动到最后一张后能...
【标题】：使用jQuery实现简单的无缝滚动（可动态） 在Web开发中，为了提升用户体验，无缝滚动已经成为一种常见的页面元素滚动效果。它使得用户在浏览长列表或内容时，能够平滑、连续地查看信息，而无需等待内容...
总的来说，使用jQuery实现滚动图片效果是网页开发中的常见实践，它能为用户提供更丰富的视觉体验。通过学习和理解这段代码，你可以更好地掌握jQuery的用法，并将其应用到自己的项目中，创造出更多富有吸引力的交互...
1. **自动滚动**：设置定时器，让列表按照预设的时间间隔自动向上或向下滚动。 2. **手动触发**：允许用户通过点击按钮或使用鼠标滚轮来启动或停止滚动。 3. **平滑过渡**：通过CSS3的transition属性或JavaScript的...
总结，利用jQuery实现图片左右滚动主要涉及以下几个步骤： 1. 创建HTML结构，包括图片容器和控制按钮。 2. 编写CSS样式，设置图片和按钮的样式。 3. 引入jQuery库，使用JavaScript处理滚动逻辑，包括图片的切换和...
"jQuery实现带控制按钮的图片滚动特效（可多个）"是一个常见的交互设计实践，它利用jQuery库的强大功能，为用户提供了一种流畅且可控制的图片展示方式。jQuery是一个轻量级、高性能的JavaScript库，简化了DOM操作、...
而使用Jquery实现的水平滚动条可以提供更加灵活、美观且用户体验良好的解决方案。本篇将深入探讨如何利用Jquery插件来创建这样的功能。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、...
本教程主要探讨的是如何利用JavaScript库jQuery实现左右滚动以及自动滚动效果。jQuery以其简洁的API和强大的功能，使得处理DOM操作变得相对简单，尤其适合实现此类交互效果。 首先，要实现左右滚动，我们需要创建一...
下面是一个简单的示例代码，展示了如何用jQuery实现垂直方向的无缝滚动： ```javascript $(document).ready(function(){ var $container = $("#scroll-container"); var index = 0; var items = $container....
### 使用jQuery实现图片滚动 #### 一、项目背景与需求分析 在网页设计与开发过程中，为了提升用户体验和页面美观度，常常会用到图片滚动功能。本案例中，一个初学者希望使用jQuery来实现一个简单的图片滚动效果，...
jQuery 是一个轻量级的 JavaScript 库，它提供了丰富的功能和简便的 API，使得实现图片轮番滚动变得更加简单。本文将详细介绍如何使用 jQuery 实现两种图片轮番滚动方式：自动轮播和手动切换。\n\n**一、自动轮播**\...
标题中的“jquery单行文字循环滚动”指的是使用jQuery库实现的一种常见的前端文本动画效果，它能使一行文字在页面上连续不断地循环滚动，常用于显示新闻标题、滚动公告等。jQuery是一个广泛使用的JavaScript库，它...
- 可以使用jQuery插件，如DataTables，它提供了更丰富的表格功能，包括自动分页、排序、过滤等，同时也支持自定义滚动条样式。 - 对于大数据量的表格，可以考虑使用虚拟滚动，只渲染视口内的行，提高性能。 - 考虑到...
**标题解析：** "jquery实现图片左右滚动类似京东" 指的是使用jQuery库来创建一个功能，模拟京东网站上常见的商品图片轮播效果。这种效果通常包括左右按钮控制图片切换，自动播放，以及可能的图片指示器等功能。 **...
本篇文章将详细讲解如何利用jQuery实现一个div元素的滚动条效果，以及涉及到的相关知识点。 首先，我们需要理解滚动条的基本概念。滚动条是当内容超出容器显示范围时出现的一种用户界面元素，允许用户查看或浏览不...