JQuery漂浮廣告代碼

時間 2019-12-04

原文原文鏈接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery漂浮廣告代碼</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="imgDiv" style="position:absolute;left:50px;top:60px;">
<div id="a" style="width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div>

<div style="width:180px;height:180px;background:red;"></div>
</div>html

function move() {
var left = $obj.offset().left;
var top = $obj.offset().top;
var L = T = 0; //左邊界和頂部邊界
var R = $(window).width() - $obj.width(); // 右邊界
var B = $(window).height() - $obj.height(); //下邊界htm

//難點:怎樣判斷廣告的4個邊框有沒有超出可視化範圍!
if (left < L) {
xin = true; // 水平向右移動
}
if (left > R) {
xin = false;
}
if (top < T) {
yin = true;
}
if (top > B) {
yin = false;
}
//根據有沒有超出範圍來肯定廣告的移動方向
left += step * (xin == true ? 1 : -1);
top += step * (yin == true ? 1 : -1);
// 給div 元素從新定位
$obj.offset({
top: top,
left: left
})
}
//關閉
$(function() {
$("#a").click(function() {
var b = $("#a").parent();
$(b).remove();
})
})
</script>seo

</body>
</html>ip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。