超简单漂浮⼴告代码、⽹页漂浮⼴告代码、jQuery漂浮⼴告、
div漂浮层
简单的漂浮⼴告，在⽹页可视区域飘动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
body{height: 10000px;width: 5000px;}
#floatdivids{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #ff8015;
z-index: 1000;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
var isinter;
var millisec = 25;//定时器间隔执⾏时间/毫秒
var xflo = 0; //漂浮层x坐标
var yflo = 0; //漂浮层y坐标
var yistop = false;
网页float是什么意思var xisleft = true;
function floatadfun(){
kwidth = $(window).width();//可视区域宽度
kheight = $(window).height();//可视区域⾼度
divwidth = $('#floatdivids').width();//div漂浮层宽度
divheight = $('#floatdivids').height();//div漂浮层⾼度
hstop = jQuery(window).scrollTop();//滚动条距离顶部的⾼度
wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离
offwidth = (kwidth-divwidth);//div偏移的宽度
offheight = (kheight-divheight);//div偏移的⾼度
if (!yistop) {
yflo++;
if (yflo >= offheight) {
yistop = true;
}
} else {
yflo--;
if (yflo <= 0) {
yistop = false;
}
}
if (xisleft) {
xflo++;
if (xflo >= offwidth) {
xisleft = false;
}
}
} else {
xflo--;
if (xflo <= 0) {
xisleft = true;
}
}
$('#floatdivids').css({'top':yflo+hstop,'left':xflo+wsleft}); /* 如果使⽤固定定位，请把加上滚动条的距离去掉即可 */
}
$(function () {
isinter = setInterval("floatadfun()",millisec);
$('#floatdivids').mouseover(function () {
clearInterval(isinter);
}).mouseout(function () {
isinter = setInterval("floatadfun()",millisec);
});
$('#ClickRemoveFlo').click(function () {
$(this).parents("#floatdivids").slideUp(500,function(){
clearInterval(isinter);
$(this).remove();
});
});
});
</script>
</head>
<body>
<div id="floatdivids">
<span id="ClickRemoveFlo" >X</span>⼩⿅乱撞！！<br>弹弹弹！
</div>
</body>
</html>
欢迎⼤家⼀起来学习！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。