<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery漂浮广告代码-jq22.com</title>
<script src="https://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>
<!-- <img src="01.jpg" border="0" /> -->
<div style="width:180px;height:180px;background:red;"></div>
</div>
<script>
var xin = true,
yin = true;
var step = 1;
var delay = 10;//这是漂浮速度数字越大越慢，越小越快
var $obj;
$(function() {
$obj = $("#imgDiv");
var time = window.setInterval("move()", delay);
$obj.mouseover(function() {
clearInterval(time)
});
$obj.mouseout(function() {
time = window.setInterval("move()", delay)
});
});
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(); //下边界
if (left < L) {
xin = true; // 水平向右移动
}
if (left > R) {
xin = false;
}
if (top < T) {
yin = true;
}
if (top > B) {
yin = false;
}
left = left + step * (xin == true ? 1 : -1);
top = top + step * (yin == true ? 1 : -1);
// 给div 元素重新定位
$obj.offset({
top: top,
left: left
})
}
$(function() {
$("#a").click(function() {
var b = $("#a").parent();
$(b).remove();
})
})
$("#imgDiv").draggable();
</script>
</body>
</html>
1861资源网
http://www.zywlyy.cn/
|
1861资源网 软件下载
使用手机软件扫描微信二维码
关注我们可获取更多热点资讯
感谢网络科技公司技术支持
