jquery实现侧边栏

最新推荐文章于 2024-05-11 18:01:32 发布

龙之竹

最新推荐文章于 2024-05-11 18:01:32 发布

阅读量857

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_37372007/article/details/79313999

版权

javascript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

效果图如下：

主要用了jquery的mouseenter和mouseleave属性和animate动画属性。代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>侧边栏</title>
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
		<style type="text/css">
			.nav{position: absolute;top:100px;background: #eee;width: 100px;height: 300px;border-radius: 15px;left:-100px;}
			.nav span{width: 30px;height: 80px;display:block;position: relative;left: 100px;top: 100px;background: orange;text-align: center;border-radius: 5px;}
		</style>
	</head>
	<body>
		<div class="nav">
			<span>分享到</span>
			<ul>
				<li>QQ</li>
				<li>微信</li>
				<li>微博</li>
				<li>朋友圈</li>
			</ul>
		</div>
		<script>
			$('.nav').mouseenter(function(){
				$('.nav').animate({left:"0px"});
			})
			$('.nav').mouseleave(function(){
                $('.nav').animate({left:"-100px"});
			})
		</script>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

龙之竹

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现侧边栏

效果图如下：主要用了jquery的mouseenter和mouseleave属性和animate动画属性。代码为：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;侧边栏&lt;/title&gt; &lt;script type="
复制链接

扫一扫