您的位置：首页 > Web前端 > JQuery

jquery 漂浮广告

2013-10-23 14:46 204 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>漂浮广告</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/ad.css"></link >
<link rel="stylesheet" href="css/controls-apple.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/floatingAd.js"></script>
<script type="text/javascript">
$(function(){
$.floatingAd({
//频率
delay: 30,
//超链接后是否关闭漂浮
isLinkClosed: true,
//漂浮内容
ad:	[{
//关闭区域背景透明度(0.1-1)
headFilter: 0.3,
//图片
'img': 'http://c.hiphotos.baidu.com/baike/s%3D200/sign=3309f9afd143ad4ba22e41c0b2025a89/a8014c086e061d95e04133327bf40ad163d9f2d3572cd289.jpg',
//图片高度
'imgHeight': 220,
//图片宽度
'imgWidth': 176,
//图片链接
'linkUrl': 'http://www.baidu.com/',
//浮动层级别
'z-index': 100,
//标题
'title': '度娘'
}
//		,
//		{
//		'img': 'http://www.97pa.cn/attachments/2010/10/30/119_201010300847251g8jt.gif',
//			'imgHeight': 220,
//			'imgWidth': 176,
//			'linkUrl': 'http://www.163.com/',
//			'z-index': 101,
//			'title': '丁三石',
//关闭按键图片
//			'closed-icon': 'http://cdn1.iconfinder.com/data/icons/oxygen/16x16/actions/list-remove.png'
//		}
],
//关闭事件
onClose: function(elem){
alert('关闭');
}
});

});
</script>
</head>
<body style="height: 1000px;width: 2000px;">
</body>
</html>

floatingAd.js

/*
*  Description: 漂浮广告
*  Author: jjc
*  Date: 2012.07.04
*/
;(function ( $, window, document, undefined ) {
var pluginName = 'floatingAd';
var defaults = {
step: 1,
delay: 50,
isLinkClosed: false,
onClose: function(elem){}
};
var ads = {
linkUrl: '#',
'z-index': '100',
'closed-icon': '',
imgHeight: '',
imgWidth: '',
title: '',
img: '#',
linkWindow: '_blank',
headFilter: 0.2
};

function Plugin(element, options) {
this.element = element;
this.options = $.extend(
{},
defaults,
options,
{
width: $(window).width(),
height: $(window).height(),
xPos: this.getRandomNum(0, $(window).width() - $(element).innerWidth()),
yPos: this.getRandomNum(0, 300),
yOn: this.getRandomNum(0, 1),
xOn: this.getRandomNum(0, 1),
yPath: this.getRandomNum(0, 1),
xPath: this.getRandomNum(0, 1),
hOffset: $(element).innerHeight(),
wOffset: $(element).innerWidth(),
fn: function(){},
interval: 0
}
);
this._defaults = defaults;
this._name = pluginName;

this.init();
}

Plugin.prototype = {
init: function () {
var elem = $(this.element);
var defaults = this.options;
var p = this;
var xFlag = 0;
var yFlag = 0;

elem.css({"left": defaults.xPos + p.scrollX(), "top": defaults.yPos + p.scrollY()});
defaults.fn = function(){
defaults.width = $(window).width();
defaults.height = $(window).height();

if(xFlag == p.scrollX() && yFlag == p.scrollY()){
elem.css({"left": defaults.xPos + p.scrollX(), "top": defaults.yPos + p.scrollY()});
if (defaults.yOn)
defaults.yPos = defaults.yPos + defaults.step;
else
defaults.yPos = defaults.yPos - defaults.step;

if (defaults.yPos <= 0) {
defaults.yOn = 1;
defaults.yPos = 0;
}
if (defaults.yPos >= (defaults.height - defaults.hOffset)) {
defaults.yOn = 0;
defaults.yPos = (defaults.height - defaults.hOffset);
}

if (defaults.xOn)
defaults.xPos = defaults.xPos + defaults.step;
else
defaults.xPos = defaults.xPos - defaults.step;

if (defaults.xPos <= 0) {
defaults.xOn = 1;
defaults.xPos = 0;
}
if (defaults.xPos >= (defaults.width - defaults.wOffset)) {
defaults.xOn = 0;
defaults.xPos = (defaults.width - defaults.wOffset);
}
}
yFlag = $(window).scrollTop();
xFlag = $(window).scrollLeft();
};
this.run(elem, defaults);
},
run: function(elem, defaults){
this.start(elem, defaults);
this.adEvent(elem,defaults);
},
start: function(elem, defaults){
elem.find('div.close').hide();
defaults.interval = window.setInterval(defaults.fn,  defaults.delay);
window.setTimeout(function(){elem.show();}, defaults.delay);
},
getRandomNum: function (Min, Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
},
getPath: function(on){
return on ? 0 : 1;
},
clear: function(elem, defaults){
elem.find('div.close').show();
window.clearInterval(defaults.interval);
},
close: function(elem, defaults, isClose){
elem.unbind('hover');
elem.hide();
if(isClose)
defaults.onClose.call(elem);
},
adEvent: function(elem, defaults){
var obj = {
elem: this,
fn_close: function() {
this.elem.close(elem, defaults, true);
},
fn_clear: function() {
if(this.elem.options.isLinkClosed)
this.elem.close(elem, defaults, false);
}
};

elem.find('div.button').bind('click', jQuery.proxy(obj, "fn_close"));

elem.find('a').bind('click', jQuery.proxy(obj, "fn_clear"));

var stop = {
elem: this,
over: function(){
this.elem.clear(elem, defaults);
},
out: function(){
this.elem.start(elem, defaults);
}
};

elem.hover(
jQuery.proxy(stop, "over"),
jQuery.proxy(stop, "out")
);
},
scrollX: function(){
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
},
scrollY: function(){
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
};
$.fn.floatingAd = function(options) {
return this.children("div").each(function (i, elem) {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
};
$.floatingAd = function(options){

if(options){
if(options.ad){
var adDiv = $('#' + pluginName);

if(adDiv.length <= 0)
adDiv = $('<div>', {
'id': pluginName,
'class': pluginName
}).appendTo('body');

for(var i in options.ad){

var ad = options.ad[i];
ad = $.extend({}, ads, ad);
//漂浮层
var div = $('<div>', {
'class': 'ad'
});

div.css("z-index", ad['z-index']);

//关闭层
var closeDiv = $('<div>', {
'class': 'close'
});
$('<div>', {
'class': 'opacity',
'style': 'opacity: ' + ad.headFilter + ';filter: alpha(opacity = ' + ad.headFilter*100 + ');'
}).appendTo(closeDiv);

$('<div>', {
'class': 'text'
}).append(
$('<div>', {
'class': 'title',
'text': ad.title
})
).append(
$('<div>', {
'class': 'button',
'style': ad['closed-icon'] ? 'background:url("' + ad['closed-icon'] + '") no-repeat;' : ''
})
).appendTo(closeDiv);

closeDiv.appendTo(div);

//内容层
var content = $('<div>');

$('<a>', {
href: ad.linkUrl,
target: ad.linkWindow,
title: ad.title
}).append(
$('<img>', {
'src': ad.img,
'style': (ad.imgHeight ? 'height:' + ad.imgHeight + 'px;' : '') +
(ad.imgWidth ? 'width:' + ad.imgWidth + 'px;' : '')
})
).appendTo(content);

content.appendTo(div);

div.appendTo(adDiv);
}
delete options.ad;
$('#' + pluginName).floatingAd(options);
}
}
else
$.error('漂浮广告错误!');
};
})(jQuery, window, document);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航