[jQuery基础] jQuery动效案例(一) -- 弹窗广告、对联广告

弹窗广告

实现效果展示

实现步骤

第一步(实现静态效果)

• CSS部分

*{
	margin: 0;
	padding: 0;
}
.ad{
	position: fixed;
	right: 0;
	bottom: 0;
	display: none;
}
.ad>span{
	display: inline-block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	right: 0;
}

• html部分

<div class="ad">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592401859835&di=c404cebb6b227f4026273d9f16dc092e&imgtype=0&src=http%3A%2F%2Fp4.ssl.cdn.btime.com%2Ft01b990271dba87215e.jpg%3Fsize%3D640x396" width="600px" height="388px">
	<span></span>
</div>

第二步(动态实现)

• 监听span的点击事件

$("span").click(function () {
	$(".ad").remove()
})

• 执行广告动画
  • 第一种方法(普通)

  $(".ad").slideDown(1000, function () {
  	$(".ad").fadeOut(1000, function () {
  		$(".ad").fadeIn(1000)
  	})
  })
  

  • 第二种方法(动画队列)

  $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000)
  

 
 
 
 
 

对联广告

实现效果展示

实现步骤

第一步(实现静态效果)

• CSS部分

*{
	margin: 0;
	padding: 0;
}
.left{
	float: left;
	position: fixed;
	left: 0;
	top: 200px;
	width: 100px;
	height: 280px;
}
.right{
	float: right;
	position: fixed;
	right: 0;
	top: 200px;
	width: 100px;
	height: 280px;
}
img{
	display: none;
}

• html部分

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592394089988&di=9033c731fbad8263c5c3450298971747&imgtype=0&src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fnote%2Fl%2Fpublic%2Fp57373190.jpg" class="left">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592394089988&di=9033c731fbad8263c5c3450298971747&imgtype=0&src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fnote%2Fl%2Fpublic%2Fp57373190.jpg" class="right">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

第二步(动态实现)

主要监听网页的滚动

• 获取网页滚动的偏移位
• 判断网页是否滚动到了指定的位置
• 显示广告
• 隐藏广告

$(function () {
	// 1.监听网页的滚动
	$(window).scroll(function () {
	// 1.1获取网页滚动的偏移位
		var offset = $("html,body").scrollTop()
		// 1.2判断网页是否滚动到了指定的位置
		if(offset >= 200){
			// 1.3显示广告
			$("img").show(1000)
		}else{
			// 1.4隐藏广告
			$("img").hide(1000)
		}
	})
})