jquery常见特效之推拉门、返回顶部

最新推荐文章于 2019-07-21 15:32:34 发布

十一号路口。

最新推荐文章于 2019-07-21 15:32:34 发布

阅读量585

点赞数

分类专栏： jquery 文章标签：推拉门返回顶部 jquery特效

本文链接：https://blog.csdn.net/lmhlmh_/article/details/80546631

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
	*{margin: 0; padding: 0;}
	#container ul li{
		width: 100%;
		height: 600px;
		text-align: center;
		border-top: 3px solid blue;
		font-size: 25px;
	}
	.float{
		list-style: none;
		width: 80px;
		height: 300px;
		position: fixed;
		right: 1%;
		top: 50%;		
	}	
	a{
		text-decoration: none;
		color: black;
	}
	.float li{
		width: 100%;
		height: 10%;
		background-color: orange;
		text-align: center;
		cursor: pointer;		
	}
</style>
<body>
	<div id="container">
		<ul>
			<li><a name="one"></a>服装</li>
			<li><a name="two"></a>饮食</li>
			<li><a name="three"></a>生活</li>
			<li><a name="four"></a>日常</li>
		</ul>		
	</div>
	<ul class="float">
			<li><a href="#one">服装</a></li>
			<li><a href="#two">饮食</a></li>
			<li><a href="#three">生活</a></li>
			<li><a href="#four">日常</a></li>
			<li>回到顶部</li>
	</ul>
	<script type="text/javascript">
		//点击回到顶部
		$(".float>li:last").click(function(){
			$("body").animate({
				"scrollTop":"0"
			},500)

		})
	</script>
</body>
</html>

演示效果：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
	*{margin: 0; padding: 0;}
	#box ul{
		margin: 50px auto;
		height: 405px;
		width: 800px;
		overflow: hidden;
		list-style: none;
	}
	#box ul li{
		float: left;
		height: 400px;
	}
	.inactive{
		width: 75px;
	}
</style>
<body>
	<div id="box">
		<ul>
			<li ><img src="images/1.jpg"></li>
			<li class="inactive"><img src="images/2.jpg"></li>
			<li class="inactive"><img src="images/3.jpg"></li>
			<li class="inactive"><img src="images/4.jpg"></li>
			<li class="inactive"><img src="images/5.jpg"></li>

		</ul>
	</div>
	<script type="text/javascript">
		$("#box ul li").mouseover(function(event) {
			/* Act on the event */
			$(this).stop(true).animate({width:500},200).siblings().stop(true).animate({width:75},200)			
		});		
	</script>
</body>
</html>

演示效果:

(这个在移动太快时最后一张有时会闪屏，暂时还不太清楚原因，有大佬知道的话麻烦讲下..）

十一号路口。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery常见特效之推拉门、返回顶部

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;test&lt;/title&gt;&lt;/head&gt;&lt;script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
复制链接

扫一扫

专栏目录