<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跟随广告实例</title>
<script src="/com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.fn.floatAd = function (options) {
var defaults = {
imgSrc: "http://www.xed2k.com/static/image/common/logo.png", //漂浮图片路径
url: "http://www.xed2k.com/", //图片点击跳转页
openStyle: 1, //跳转页打开方式 1为新页面打开 0为当前页打开
speed: 10 //漂浮速度 单位毫秒
};
var options = $.extend(defaults, options);
var _target = options.openStyle == 1 ? "target='_blank'" : '';
var html = "<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>";
html += " <a href='" + options.imgJumpToUrl + "' " + _target + "><img src='" + options.imgSrc + "' border='0' class='float_ad_img'/></a> <a href='javascript:;' id='close_float_ad' style=''>x</a>";
html += "</div>";
$('body').append(html);
function init() {
var x = 0, y = 0
var xin = true, yin = true
var step = 1
var delay = 10
var obj = $("#float_ad")
obj.find('img.float_ad_img').load(function () {
var float = function () {
var L = T = 0;
var OW = obj.width();//当前广告的宽
var OH = obj.height();//高
var DW = $(document).width(); //浏览器窗口的宽
var DH = $(document).height();
x = x + step * (xin ? 1 : -1);
if (x < L) {
xin = true; x = L
}
if (x > DW - OW - 1) {//-1为了ie
xin = false; x = DW - OW - 1
}
y = y + step * (yin ? 1 : -1);
if (y > DH - OH - 1) {
yin = false; y = DH - OH - 1;
}
if (y < T) {
yin = true; y = T
}
var left = x;
var top = y;
obj.css({ 'top': top, 'left': left });
}
var itl = setInterval(float, options.speed);
$('#float_ad').mouseover(function () { clearInterval(itl) });
$('#float_ad').mouseout(function () { itl = setInterval(float, options.speed) })
});
// 点击关闭
$('#close_float_ad').live('click', function () {
$('#float_ad').hide();
});
}
init();
}; //floatAd
})(jQuery);
</script>
<script type="text/javascript">
$(function () {
//调用漂浮插件
$("body").floatAd({
imgSrc: 'http://www.xed2k.com/static/image/common/logo.png',
url: 'http://www.xed2k.com/'
});
})
</script>
</head>
<body>
Demo
</body>
</html>
浮动广告基于jQuery
最新推荐文章于 2021-06-09 11:38:31 发布