jQuery手风琴特效

最新推荐文章于 2022-05-26 20:14:40 发布

小歘欻

最新推荐文章于 2022-05-26 20:14:40 发布

阅读量182

点赞数

分类专栏： HTML 文章标签： css html5 jquery javascript

本文链接：https://blog.csdn.net/qq_33840688/article/details/118971830

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			$(function(){
				var list1 = $('.list1 li')
				list1.click(function(){
					$(this).animate({'left':$(this).index()*26})
					// 选择上面所有的同辈元素
					$(this).prevAll().each(function(){
						// 此处的this是上一个this的同辈元素循环中的li
						$(this).animate({'left':$(this).index()*26})
					})
					
					$(this).nextAll().each(function(){
						// 用整体的宽度减去(span的宽度*5-li的下标) 是第几个就往
						$(this).animate({'left':630-26*(5-$(this).index())})
					})
				})
				
			})
			
		</script>
		<style>
			*{
				padding: 0px;
			}
			.list1 ul{
				margin-left: 0px;
				margin-top: 0px;
			}
			.list1{
				position: relative;
				text-align: center;
				margin: 0 auto;
				width: 630px;
				hei

最低0.47元/天解锁文章

小歘欻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery手风琴特效

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(){ var list1 = $('.list1 li').
复制链接

扫一扫

专栏目录