<!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实现新浪微博回复字数限制,供大家一起共同分享学习。
jQuery仿新浪微博大厅滚动效果v2.0 jQuery仿新浪微博大厅滚动效果v2.0,分别调用了jQuery动画暂停插件和滚动效果js,具体见代码,源码库推荐下载。
jquery仿新浪微博评论回复交互表单代码,jquery仿新浪微博评论回复交互表单代码
jquery仿新浪微博动态显示
js特效脚本含源码和说明jQuery仿新浪微博大厅滚动效果v2.0本资源系百度网盘分享地址
jquery实现微博分享评论表情,有三个系列的表情
完全仿照 新浪微博图片 显示 制作 公司要制作这样一个东东 花了一个礼拜写的 稍微改改完全满足你的需求的
jQuery仿新浪微博高度自适应滚动代码是一款调用方式很简单的自适应无缓动滚动代码。
jQuery仿新浪微博评论回复交互表单代码是一款实用的用户评论回复交互式留言表单网页特效,还有点赞功能。
jquery实现微博分享评论表情是一款很多网站评论模块都会用到一些表情的功能,默认提供了拜年,浪小花,暴走漫画等4组表情。
PHP+Mysql+jQuery实现发布微博程序
jQuery仿新浪微博发布新鲜事页面代码,可统计字数,发送表情,放大图片,添加编辑微博内容。
NULL 博文链接:https://xjwolaile.iteye.com/blog/1892557
Jquery仿微博名片hoverCard
jQuery仿新浪微博图片顺时针(逆时针)旋转效果,供大家一起共同分享学习。
jquery新浪微博图文混排切换效果
JQuery实现仿sina新浪微博新鲜事滚动