<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery下滑效果</title>
<style type="text/css">
/*css也是重要的*/
#container {
height: 540px;
width: 358px;
overflow: hidden;
}
/*外面容器高度为400px，超过时不显示*/
#container p {
border: 1px dotted #333366;
padding: 10px;
margin-bottom: 10px;
width: 335px;
height: 70px;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
/*-需要：引入一个jquery的包-原理：隐藏第一组<p></p>标签（包含里面的内容），然后用slideDown效果渐渐下滑显示出来再把最后一组<p></p>标签插入到最前面并隐藏，形成循环*/
$(function(){
var interval = 3000;
var slide = setInterval(slideIt,interval);
$("#container").mouseover(function(){
clearInterval(slide);//当鼠标移上去的时候停止下滑
}).mouseout(function(){
slide = setInterval(slideIt,interval);//当鼠标移开的时候继续下滑
});
//slideIt();
});
function slideIt(){
var obj = $("#container p");//定义一个变量obj，把id为container里的所有<p></p>标签赋给它
/*版本1
obj.first().slideDown(5000);//让id为container里的第一个div以5000毫秒(5秒)的速度下滑（这个p默认是隐藏的
obj.last().insertBefore(obj.first()).hide();//把id为container里的最后一组<p></p>标签插到最前面（这样容器里的<p></p>标签就可以循环起来）并隐藏
*/
/*版本2*/
obj.last().hide().prev().hide();//倒数2个隐藏
obj.last().insertBefore(obj.first()).fadeIn(1000);//把id为container里的最后一组<p></p>标签插到最前面（这样容器里的<p></p>标签就可以循环起来）并以1秒速度淡出
obj.eq(0).hide().slideDown(300);//第1个p淡出
obj.eq(4).fadeOut(500);//第5个p淡出
};
</script>
</head>
<body>
<div id="container">
<p>some msg here 1...</p>
<p>some msg here 2...</p>
<p>some msg here 3...</p>
<p>some msg here 4 ...</p>
<p>some msg here 5 ...</p>
<p>some msg here 6 ...</p>
<p>some msg here 7 ...</p>
</div>
<!--结束-->
</body>
</html>
分享到：
相关推荐
【jQuery高仿新浪微博图片显示插件】是一种基于JavaScript库jQuery实现的、旨在模仿新浪微博图片展示效果的组件。这款插件的开发灵感来源于新浪微博的图片浏览功能，它旨在为用户提供一个高度自定义且易于集成的解决...
本教程将探讨如何利用jQuery来实现新浪微博的回复字数限制功能，这在许多社交媒体和论坛应用中都非常常见。 首先，我们需要理解目标是限制用户在输入框中输入的字符数不超过微博平台规定的最大值，例如，新浪微博...
【jQuery仿新浪微博大厅滚动效果v2.0】是一款基于JavaScript库jQuery实现的动态滚动效果，旨在模拟新浪微博大厅的信息流更新模式。这个效果的核心在于利用jQuery的动画功能和特定的插件来实现信息的平滑滚动，使用户...
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...
"jQuery仿新浪微博高度自适应滚动代码"便是实现这一效果的一种解决方案。它以其简洁的调用方式和良好的适应性，受到了众多开发者们的喜爱。本文将详细解析这一代码的工作原理和使用方法。 首先，让我们理解jQuery的...
以下我们将深入探讨如何使用jQuery来实现类似新浪微博的动态加载功能。 一、jQuery基础知识 1. jQuery选择器：jQuery提供了丰富的选择器，如ID选择器（#id）、类选择器（.class）和元素选择器（tag），使得我们...
js特效脚本含源码和说明jQuery仿新浪微博大厅滚动效果v2.0本资源系百度网盘分享地址
【jQuery实现微博分享评论表情】是一种常见的Web交互功能，它为用户提供了一种丰富评论内容的方式，使得用户在发表观点时可以插入各种表情图标，增强表达力。这一功能常见于社交媒体、论坛以及博客等互动性强的网站...
本教程将详细讲解如何利用jQuery实现微博分享评论功能，并集成表情系统，为用户提供丰富的表达方式。 一、jQuery基础 在开始实现微博分享评论表情之前，我们需要了解jQuery的基本用法。jQuery通过$符号作为全局函数...
综上所述，使用jQuery实现仿新浪微博的评论回复交互表单涉及DOM操作、事件监听、数据处理、动画效果以及良好的用户界面设计。通过熟练掌握这些技巧，你可以创建出一个功能完备且用户体验优秀的评论系统。
《jQuery实现微博评论回复交互设计详解》 在Web开发中，提供用户友好的交互体验是提升网站质量的关键因素之一。特别是在社交媒体平台，评论和回复功能是用户参与度的重要驱动力。今天我们将深入探讨如何利用jQuery...
《使用jQuery实现仿新浪微博发布页面的功能详解》 在Web开发中，模拟知名社交网络的界面和功能是一项常见的挑战。本文将深入探讨如何使用jQuery库来创建一个类似新浪微博的发布新鲜事页面，涵盖字数统计、表情支持...
在实际应用中，`jquery仿新浪微博鼠标滚动到底部加载内容.rar`可能包含了一个简单的示例项目，包括HTML、CSS和JavaScript文件，以及可能的服务器端脚本（如PHP）。通过解压并运行这个项目，开发者可以学习如何将这种...
通过以上步骤，我们已经成功地使用jQuery实现了仿微博名片的hoverCard效果。这个功能不仅可以用于显示用户基本信息，还可以扩展到其他场景，如产品介绍、文章预览等。在实际项目中，我们可以根据具体需求进行定制，...
总之，通过结合jQuery的事件处理、DOM操作和AJAX请求，我们可以轻松实现微博样式下的无限滚动效果。这不仅可以提升用户体验，也可以减少服务器的负担，因为只在用户需要时才加载新的内容。在实际项目中，根据具体...