接下来我将详细讲解“jquery实现对联广告的方法”的完整攻略。
标题
攻略一：利用jQuery插件实现对联广告
jQuery拥有丰富的插件库，利用插件实现对联广告是一种较为简单和可靠的方案。以下是实现对联广告的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 对联广告</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style>
.ad-wrap {
position: fixed;
top: 50%;
}
.ad-left {
left: 0;
transform: translateY(-50%);
}
.ad-right {
right: 0;
transform: translateY(-50%);
}
.ad-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ad-wrap ad-left">
<a href="#"><img src="left-ad.jpg"></a>
<span class="ad-close">×</span>
</div>
<div class="ad-wrap ad-right">
<a href="#"><img src="right-ad.jpg"></a>
<span class="ad-close">×</span>
</div>
<script>
$(document).ready(function() {
var delayTime = parseInt($.cookie('delay-time')) || 0;
var adWidth = $('.ad-wrap').width();
var windowWidth = $(window).width();
var leftPos = 0 - adWidth;
var rightPos = windowWidth;
$('.ad-left').animate({
left: leftPos
}, delayTime);
$('.ad-right').animate({
right: rightPos
}, delayTime);
$('.ad-close').click(function() {
$(this).parent().remove();
});
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var leftNewPos = scrollTop + ((windowHeight - $('.ad-wrap').height()) / 2);
var rightNewPos = windowWidth - adWidth;
$('.ad-left').stop().animate({
top: leftNewPos
}, 1000);
$('.ad-right').stop().animate({
top: rightNewPos
}, 1000);
});
});
$(window).on('beforeunload', function() {
$.cookie('delay-time', 5000);
});
</script>
</body>
</html>
实现过程：
- 先导入jQuery库和jquery-cookie插件库；
- 设置对联广告元素的样式，包括位置和关闭按钮等；
- 在$(document).ready()函数中实现对联广告的出现和消失，通过$.cookie实现页面离开后再次进入时对联广告的延迟出现；
- 在$(window).scroll()函数中实现对联广告的滚动效果。
攻略二：利用jQuery自定义动画实现对联广告
jQuery提供了自定义动画的方法，可以更加灵活地实现对联广告。以下是实现对联广告的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 对联广告</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.ad-wrap {
position: fixed;
top: 50%;
}
.ad-left {
left: 0;
transform: translateY(-50%);
}
.ad-right {
right: 0;
transform: translateY(-50%);
}
.ad-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ad-wrap ad-left">
<a href="#"><img src="left-ad.jpg"></a>
<span class="ad-close">×</span>
</div>
<div class="ad-wrap ad-right">
<a href="#"><img src="right-ad.jpg"></a>
<span class="ad-close">×</span>
</div>
<script>
$(document).ready(function() {
var windowHeight = $(window).height();
var delayTime = 5000;
var adWidth = $('.ad-wrap').width();
var windowWidth = $(window).width();
var leftNewPos = 0 - adWidth;
var rightNewPos = windowWidth;
$('.ad-left').css('top', windowHeight / 2);
$('.ad-right').css('top', windowHeight / 2);
$('.ad-left').animate({
left: leftNewPos
}, delayTime, function() {
$(this).animate({
top: windowHeight / 2
}, 1000);
});
$('.ad-right').animate({
right: rightNewPos
}, delayTime, function() {
$(this).animate({
top: windowHeight / 2
}, 1000);
});
$('.ad-close').click(function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
实现过程：
- 设置对联广告元素的样式，包括位置和关闭按钮等；
- 在$(document).ready()函数中实现对联广告的出现和消失，通过自定义动画实现对联广告的滚动效果，设置停顿时间，添加回调函数实现完成滚动后对联广告停留的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现对联广告的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 