[jQuery基础] jQuery动效案例(二) -- 图标特效、无限循环滚动(简易轮播图)

图标特效

实现效果展示

实现步骤

第一步(实现静态效果)

• CSS部分

*{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
	width: 400px;
	height: 250px;
	border: 1px solid #000;
	margin: 100px auto;
}
ul>li{
	width: 100px;
	height: 50px;
	margin-top: 50px;
	text-align: center;
	float: left;
	overflow: hidden;
}
ul>li>span{
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url("https://s1.ax1x.com/2020/06/17/NV7PpV.png") no-repeat 0 0;
	position: relative;
}

• html部分

<ul>
	<li><span></span><p>百度</p></li>
	<li><span></span><p>百度</p></li>
	<li><span></span><p>百度</p></li>
	<li><span></span><p>百度</p></li>
	<li><span></span><p>百度</p></li>
	<li><span></span><p>百度</p></li>
	<li><span></span><p>百度</p></li>
	<li><span></span><p>百度</p></li>
</ul>

第二步(动态实现)

• 遍历所有的li
  • 生成新的图片位置
  • 设置新的图片位置

$("li").each(function (index, ele) {
	// 1.1生成新的图片位置
	var $url = "url(\"https://s1.ax1x.com/2020/06/17/NV7PpV.png\") no-repeat 0 "+(index * -24)+"px"
	// 1.2设置新的图片位置
	$(this).children("span").css("background", $url)
})

• 监听li移入事件
  • 将图标往上移动
  • 将图片往下移动
  • 将图片复位

$("li").mouseenter(function () {
	// 2.1将图标往上移动
	$(this).children("span").animate({
		top: -50
	}, 1000, function () {
	// 2.2将图片往下移动
		$(this).css("top", "50px")
		// 2.3将图片复位
		$(this).animate({
			top: 0
		}, 1000)
	})
})

 
 
 
 
 

无限循环滚动

实现效果展示

实现步骤

第一步(实现静态效果)

• CSS部分

*{
	margin: 0;
	padding: 0;
}
div{
	width: 600px;
	height: 161px;
	border: 1px solid #000;
	margin: 100px auto;
	overflow: hidden;
}
ul{
	list-style: none;
	width: 1800px;
	height: 161px;
	background: #000;
}
ul>li{
	float: left;
}

• html部分

<div>
	<ul>
		<li><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2943045759,2537005516&fm=26&gp=0.jpg" width="300px" height="161px"></li>
		<li><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2062307482,1942308797&fm=26&gp=0.jpg" width="300px" height="161px"></li>
		<li><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3622830924,2930042384&fm=26&gp=0.jpg" width="300px" height="161px"></li>
		<li><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=273226999,50340438&fm=26&gp=0.jpg" width="300px" height="161px"></li>
		<li><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2943045759,2537005516&fm=26&gp=0.jpg" width="300px" height="161px"></li>
		<li><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2062307482,1942308797&fm=26&gp=0.jpg" width="300px" height="161px"></li>
	</ul>
</div>

第二步(动态实现)

• 定义变量保存偏移位

var offset = 0

• 让图片滚动起来

var timer
function autoPlay(){
	timer = setInterval(function () {
		offset += -10
		if(offset <= -1200){
			offset = 0
		}
		$("ul").css("marginLeft", offset)
	}, 50)
}
autoPlay()

• 监听li的移入和移出事件
  • 停止滚动
  • 给非当前选中添加蒙版
  • 去除当前选中的蒙版
  • 继续滚动
  • 去除所有的蒙版

$("li").hover(function () {
	// 停止滚动
	clearInterval(timer)
	// 给非当前选中添加蒙版
	$(this).siblings().fadeTo(100, 0.5)
	// 去除当前选中的蒙版
	$(this).fadeTo(100, 1)
}, function () {
	// 继续滚动
	autoPlay()
	// 去除所有的蒙版
	$("li").fadeTo(100, 1)
})