jquery弹出层特效代码 46-jQuery弹窗广告的制作

人气：153 ℃/2023-12-13 15:00:04

广告弹窗效果展示

<!DOCTYPE html>

<html>

<head>

<title>46-jQuery弹窗广告的制作</title>

*{ /*通配选择器*/

margin: 0; /*外边距：0*/

padding: 0; /* 内边距：0*/

}

.ad{ /* 广告盒子样式*/

position: fixed; /*定位：屏幕视口（viewport）的位置来指定其位置*/

right: 0; /*右边距：0*/

bottom: 0; /* 下边距：0*/

display: none; /* 显示：隐藏*/

}

span{ /*广告上的×关闭按钮*/

width: 30px; /*宽：30像素*/

height: 30px; /* 高：30像素*/

position: absolute; /* 定位：绝对定位*/

right: 0; /* 右边距：0*/

top: 0; /*上边距：0*/

text-indent: 1em; /*文字缩进：1*/

}

</style>

$(function(){ // 入口函数

$('.ad').stop() // 广告的动画停止

$('div').slideDown(1000, function(){ // 广告用1秒钟展开然后调用：

$('.ad').fadeOut(3000, function(){ // 广告用三秒钟淡出完成后调用：

$('.ad').fadeIn(1000, function(){}) // 广告用1秒钟淡入

})

});

$('span').click(function(){ // 监听span标签的点击事件（也就是广告右上角的x）

$(".ad").remove() // 广告删除

})

</script>

</head>

<body>

</div>

</body>

</html>