jquery 下滚效果

原创 2012年03月21日 20:04:48
<!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 src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
/*
-需要:引入一个jquery的包
-原理:
 隐藏第一组<p></p>标签(包含里面的内容),然后用slideDown效果渐渐下滑显示出来
 再把最后一组<p></p>标签插入到最前面并隐藏,形成循环
-by锋迷全球
-时间:2011/06/04
*/
$(function()
{
	var interval = 5000;
	var slide    =  setInterval(slideIt,interval);

	function slideIt()
	{
		var obj = $('p','#container');//定义一个变量obj,把id为container里的所有<p></p>标签赋给它
		/*版本1
		obj.first().slideDown('3000');//让id为container里的第一个div以3000毫秒(3秒)的速度下滑(这个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淡出	
	};
	
	$('#container').mouseover(function()
	{
		clearInterval(slide);//当鼠标移上去的时候停止下滑
	}).mouseout(function()
	{
		slide = setInterval(slideIt,interval);//当鼠标移开的时候继续下滑
	});
	
	slideIt();
});
</script>
</head>
<body>
<div id="container">
<p style="display:none">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的     jQuery插件版文...
  • xihuansuannai
  • xihuansuannai
  • 2017年01月05日 14:58
  • 478

jq判断页面滚动条上滚还是下滚

参考地址: http://www.haorooms.com/post/jquery_scroll_upanddown 实际参考地址:https://segmentfault.com/q/1...
  • u010289111
  • u010289111
  • 2017年06月13日 14:57
  • 293

jquery实现整屏翻屏效果

实现整屏上下翻效果: 静态html代码: 注意头部加载的js,jquery库,mousewheel.js已经实现的index.js body{...
  • a0100034930
  • a0100034930
  • 2015年01月05日 14:22
  • 2905

Jquery实现滚轮滚到底事件

scroll var pageSize = 60; var studentIndex = 0; $(function () { ...
  • czh4869623
  • czh4869623
  • 2016年08月01日 16:12
  • 1506

jquery 滚动到指定ID位置

$('#top').click(function(){ $body.animate({scrollTop: $('#header').offset().top}, 1000); return fa...
  • u011598153
  • u011598153
  • 2014年05月13日 15:58
  • 2282

使用jquery实现页面滚动到底部自动加载新的信息

//定义加载一次的信息对象数量 public class Constant { public final static int DEFAULT_FIRST_COUNT = 8;//第一次列...
  • u010485134
  • u010485134
  • 2016年07月10日 16:19
  • 1134

jquery中点击某元素后滚动条滚动到某元素位置或底部

//首先获取文档对象 var target; if(document.documentElement.scrollTop){ target=$("html"); }else{ targ...
  • euxil97
  • euxil97
  • 2017年08月14日 20:16
  • 748

JQuery 页面如何快速滚动到顶部?

JQuery 网页如何快速的滚动到顶部?现如今,页面元素不断丰富,就导致页面的纵深比较广,那么用户一旦阅读网页到了底部,就会产生一个快速滚动到顶部的需求,当然了,很多网页都这样实现了。...
  • qing_gee
  • qing_gee
  • 2015年09月17日 10:06
  • 2178

前端开发——滚滚屏(没有纵向滚动条)

1.前端流程: 1)需求分析 2)原型图(低保真)——产品经理/设计师/策划绘制       3)做效果图 4)代码实现 2.优秀网站欣赏: 1)百度钱包  一分钱专享 :  https://1.ba...
  • luohuaxinyue
  • luohuaxinyue
  • 2016年04月05日 22:55
  • 4207

jquery 让div滚动条自动滚动到最下面

function changeHight(){ var beforeHeight = $(".interaction").scrollTop(); //console.info(beforeHei...
  • xinmashang
  • xinmashang
  • 2014年04月09日 14:30
  • 14412
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 下滚效果
举报原因:
原因补充:

(最多只允许输入30个字)