jQuery返回顶部和在线客服网站侧边栏

Posted 2022-12-09 ganjiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery返回顶部和在线客服网站侧边栏相关的知识，希望对你有一定的参考价值。

效果图：

全部代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*margin:0;padding:0;
	ullist-style: none;
	.slide
		position: fixed;
		right:0;
		top:200px;
		z-index: 100;
		width:54px;
		height: 275px;
	
	.slide ul li
		width:54px;
		height: 54px;
		float: left;
		position: relative;
		border-bottom:1px solid #444;
	

	.slide ul li .slide-box
		position: absolute;
		top:0;
		right:0;
		width:54px;
		height: 54px;
		color:#fff;
		background: #000;
		opacity: 0.8;
		filter:Alpha(opacity=80);
		font-size:14px;
		overflow: hidden;
		line-height: 54px;
	
	.slide ul li .slide-top
		width: 54px;
		height: 54px;
		line-height: 54px;
		display: inline-block;
		background: #000;
		opacity: 0.8;
		filter:Alpha(opacity=80);
		transition: all 0.3s;
	
	.slide ul li .slide-top:hover
		opacity: 1;
		filter:Alpha(opacity=100);
		background: #ae1c1c;
	
	.slide ul li img
		float:left;
	
	</style>
	<script type="text/javascript" src=‘js/jquery-2.0.3.min.js‘></script>
	<script type="text/javascript">
	$(function()
		$(".slide ul li").hover(function()
				
			$(this).find(".slide-box").stop().animate(
				"width":"124px"
			,200).css(
				"opacity":"1",
				"filter":"Alpha(opacity=100)",
				"background":"#ae1c1c"
			)

		,function()
			$(this).find(".slide-box").stop().animate(
				"width":"54px"
			,200).css(
				"opacity":"0.8",
				"filter":"Alpha(opacity=80)",
				"background":"#000"
			)
		)
		$(".slide-top").click(function()
			$("html,body").animate(‘scrollTop‘:0,500);
		)
	)
	</script>
</head>
<body style="height: 2000px;">


<div class=‘slide‘>

	<ul>
		<li>
			<a href="javascript:;">
				<div class=‘slide-box‘>
					<img src="img/side_icon01.png">客服中心
				</div>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class=‘slide-box‘>
					<img src="img/side_icon02.png">客户案例
				</div>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class=‘slide-box‘>
					<img src="img/side_icon03.png">新浪微博
				</div>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class=‘slide-box‘>
					<img src="img/side_icon04.png">QQ客服
				</div>
			</a>
		</li>

		<li>
			<a href="javascript:;" class=‘slide-top‘>
				<img src="img/side_icon05.png">
			</a>
		</li>

	</ul>
	
</div>

</body>
</html>

每日分享效果附带视频：https://www.3mooc.com/front/couinfo/999

以上是关于jQuery返回顶部和在线客服网站侧边栏的主要内容，如果未能解决你的问题，请参考以下文章

贡献一下多年珍藏的特效例子

jQuery实际案例⑤——仿京东侧边栏（楼层）

仿淘宝固定侧边栏

深入浅出Flask(34)： H-ui前端框架的QQ客服和返回顶部

jQuery：在页面滚动时更改固定顶部导航栏的文本颜色