/**
* JQuery广告代码
*/
ad ={
basePath: '',
content: [],
floatDivs: [],
closeHtml : '<img class="close" width="66px" height="22px" src="'+this.basePath+'/html/images/close.gif">',
showAD: function(){
for(var i =0; i<this.content.length; i++){
var adConfig = this.content[i];
if(adConfig && adConfig.isOpen){
this.generateHtml(adConfig);
}
}
this.maxTop = jQuery("body").attr("clientHeight") + jQuery(window).scrollTop() - 1; //设置浮动时的最大高度
this.maxLeft = jQuery("body").attr("clientWidth") + jQuery(window).scrollLeft() - 1; //设置浮动时的最大宽度
this.floatStrat();
},
generateHtml: function(o){ /*生成包含关闭的Html代码*/
var adHtml = this.generateADHtml(o);
var adDiv = jQuery("<div class='ad'/>");
var divHeight = o.height + (o.allowClose? 22 : 0);
adDiv.css({height: divHeight +"px", width: o.width+"px"});
adDiv.top = o.top || (jQuery(window).height() - divHeight);
var tableHtml = "";
switch(o.position){
case "left":
adDiv.css({left:'0px', top:o.top+'px'});
tableHtml = this.generateTableHtml(adHtml,o.allowClose? this.closeHtml:null);
break;
case "right":
adDiv.css({right:'0px', top:o.top+'px'});
tableHtml = this.generateTableHtml(adHtml,o.allowClose? this.closeHtml:null);
break;
case "bottom":
adDiv.css({right:'0px',bottom:'0px'});
tableHtml = this.generateTableHtml(o.allowClose? this.closeHtml:null, adHtml);
break;
case "float":
adDiv.css({left:o.left + 'px', top: o.top + 'px',position:'absolute'});
tableHtml = this.generateTableHtml(adHtml,o.allowClose? this.closeHtml:null);
this.addFloatDiv(adDiv);
break;
};
adDiv.append(jQuery(tableHtml));
adDiv.appendTo("body");
adDiv.find(".close").bind("click",function(){adDiv.css("display","none")});
if(jQuery.browser.msie && jQuery.browser.version <= 6 && o.position != 'float'){/*如果是IE6及以下版本*/
jQuery(window).scroll(function(){
if(adDiv.css("display") != "none"){
var windowTop=jQuery(window).scrollTop();
adDiv.animate({top:adDiv.top +windowTop+"px"},{duration:800,queue:false});
}
});
}
},
generateADHtml: function(o){ /*生成广告的内容*/
var str = '<a target="_blank" href="' + o.href +'">'
if(o.type=="img"){
str += '<img src="' + o.src + '" width="'+o.width+'px" height="'+ o.height+'px"/>'
}else if(o.type=="flash"){
str += "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='"+o.width+"' height='"+o.height+"' >";
str += "<param name='movie' value='"+this.basePath + o.src +"' />";
str += "<param name='quality' value='high' />";
str += "<param name='wmode' value='transparent'/>";
str += "<param name='swfversion' value='8.0.35.0' />";
str += "<embed wmode='transparent' src='"+this.basePath + o.src+"' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='"+o.width+"' height='"+o.height+"'></embed>";
str += "</object>";
}
return str + "</a>";
},
generateTableHtml: function(s1, s2){
var tableBegin = "<table>";
if(s1){
tableBegin = tableBegin + "<tr><td>" +
s1 + "</td></tr>";
}
if(s2){
tableBegin = tableBegin + "<tr><td>" +
s2 + "</td></tr>";
}
tableBegin = tableBegin + "</table>";
return tableBegin;
},
floatStrat: function(){
var hasFloatDiv = false;
for(var i = 0 ; i<this.floatDivs.length; i++){
var ad = this.floatDivs[i];
hasFloatDiv = hasFloatDiv || ad.css("display") != "none";
if(ad.css("display") != "none" && ad.autoMove == true){
var curTop = parseInt(ad.css("top"));
var curLeft = parseInt(ad.css("left"));
// alert(jQuery("body").attr("clientWidth") + "--"+jQuery(window).scrollLeft()+"--"+parseInt(ad.css("width")) +"--" +ad.attr("offsetWidth"));
// alert(jQuery("body").attr("clientHeight") +"--"+ jQuery(window).scrollTop()+"--"+parseInt(ad.css("height")));
if(jQuery("body").attr("clientHeight") + jQuery(window).scrollTop() - 1 < this.maxTop){
this.maxTop = jQuery("body").attr("clientHeight") + jQuery(window).scrollTop() - 1;
}
// if(jQuery("body").attr("clientWidth") + jQuery(window).scrollLeft() - 1 < this.maxLeft){
this.maxLeft = jQuery("body").attr("clientWidth") + jQuery(window).scrollLeft() - 1;
// }
var t = jQuery("body").attr("clientHeight") + jQuery(window).scrollTop() - 1;
var r = ad.attr("offsetHeight") + curTop;
var s = ad.attr("offsetHeight") + curTop > jQuery("body").attr("clientHeight") + jQuery(window).scrollTop() - 1;
if(ad.attr("offsetWidth") + curLeft > this.maxLeft)
{
curLeft = jQuery(window).scrollLeft() + jQuery("body").attr("clientWidth") - ad.attr("offsetWidth");
ad.dirW = false;
}
if(ad.attr("offsetHeight") + curTop > this.maxTop)
{
curTop = jQuery(window).scrollTop() + jQuery("body").attr("clientHeight") - ad.attr("offsetHeight");
ad.dirH = false;
}
if(curLeft <= jQuery(window).scrollLeft())
{
curLeft = jQuery(window).scrollLeft();
ad.dirW = true;
}
if(curTop <= jQuery(window).scrollTop())
{
curTop = jQuery(window).scrollTop();
ad.dirH = true;
}
curLeft = curLeft + (ad.dirW ? 5 : -5) + "px";
curTop = curTop + (ad.dirH ? 5 : -5) + "px"
ad.css({left:curLeft, top:curTop});
}
}
if(hasFloatDiv){
setTimeout("NCPortal.ad.floatStrat()", 200);
}
},
addFloatDiv: function(o){
o.autoMove = true;
o.dirH = true; /*纵向移动,true:向下;false:向上,默认向下*/
o.dirW = true; /*横向移动,true:向右;false:向左,默认向右*/
o.bind("mouseover",function(){o.autoMove = false});
o.bind("mouseout",function(){o.autoMove = true});
this.floatDivs.push(o);
}
}
ad.content = [
/*position:left/right/bottom/float*/
{top:50,height:170,width:70,isOpen:true,position:'left',allowClose:true,src:'http://img1.126.net/channel5/008981/mbb110300l_110509.swf',type:"flash",href:"http://www.163.com"},
{top:50,height:170,width:70,isOpen:true,position:'right',allowClose:true,src:'http://img1.126.net/channel5/008981/mbb110300l_110509.swf',type:"flash",href:"http://www.163.com"},
{top:50,left:50,height:170,width:70,isOpen:true,position:'float',allowClose:true,src:'http://img1.126.net/channel5/008981/mbb110300l_110509.swf',type:"flash",href:"http://www.163.com"},
{height:80,width:100,isOpen:true,position:'bottom',allowClose:true,src:'http://www.91jquery.com/tm/j-1.jpg',type:'img',href:"http://www.jquery.com"}
];
jQuery(function() {
NCPortal.ad.showAD();
});
/*广告CSS*/
.ad{display: block; overflow: hidden; z-index: 10000; position: fixed;_position:absolute;-moz-user-select:none;}
分享到:
相关推荐
【标题】:“基于jQuery的广告轮播” 在网页设计中,广告轮播是一种常见的元素,用于展示多张图片或信息,以吸引用户的注意力并提供动态的用户体验。"基于jQuery的广告轮播"是指利用JavaScript库jQuery实现的这种...
总结来说,创建基于jQuery的右侧浮动广告代码主要包括以下几个步骤: 1. 引入jQuery库文件。 2. 在HTML中设置广告容器的样式。 3. 使用`scrollFollow`插件使广告随页面滚动。 4. 将广告内容(如图片)添加到容器中。...
【标题】"基于JQuery的右下角广告代码"指的是使用JavaScript库JQuery实现的一种广告展示方式,这种广告通常会出现在网页的右下角,旨在吸引用户的注意力,提高广告的可见性和点击率。JQuery是一个高效、简洁且功能...
这个“基于jquery的全屏弹性伸缩广告代码”是一个示例项目,它利用jQuery的强大功能来创建吸引用户的广告展示效果。这种广告通常用于网站上,以增强用户体验并提高品牌曝光度。 首先,让我们深入了解jQuery库的核心...
【标题】"基于jQuery的可拉下的幕布广告代码"是指一种常见的网页动态效果,用于实现广告或通知的展示方式。这种广告通常在页面加载后从顶部或底部以动画形式滑出,用户可以手动拉下或者点击关闭。这种方式既能吸引...
本文将深入探讨一个基于jQuery的实用下拉菜单代码,结合了div+css技术,实现了美观且功能强大的效果,适用于网页设计和广告设计场景。 首先,jQuery是一个流行的JavaScript库,它的出现大大简化了JavaScript的使用...
本教程将深入探讨如何利用jQuery实现广告动画效果,基于提供的"jquery实现广告动画源代码"主题,我们将重点关注jQuery的`animate()`方法,以及如何在实际的广告设计中运用这一功能。 首先,`animate()`是jQuery的...
"jquery通栏全屏广告代码下载.zip" 提供的是一套利用jQuery实现的全屏横幅广告解决方案。这个压缩包可能包含了HTML、CSS、JavaScript文件以及其他必要的资源,用于创建一个吸引用户注意力的视觉效果强烈的广告展示。...
在本案例中,我们看到的源代码是基于HTML和jQuery实现的,这两种技术是现代网页开发的常用工具。 HTML(HyperText Markup Language)是网页内容的基础结构语言,用于定义网页的各个元素和结构。在全屏广告的场景中...
3. 自定义开发:对于有特殊需求的开发者,可以基于 jQuery 编写自定义代码实现滚动广告效果,更具灵活性。 五、使用步骤 1. 引入 jQuery 和插件库:在HTML文件中通过 `<script>` 标签引入 jQuery 和相应的滚动广告...
5. 可定制性:由于是基于jQuery的,这段代码可以根据网站的设计和需求进行高度定制。开发者可以调整广告的尺寸、颜色、速度,甚至添加自定义的交互效果。 在实际应用中,将“jQuery网站通栏广告代码”解压后,你...
在网页设计和开发中,全屏广告...以上就是这个基于jQuery实现的全屏广告代码项目的主要技术要点和实现细节。通过这个项目,开发者可以学习到如何利用jQuery创建动态、交互式的网页元素,以及如何处理浏览器兼容性问题。
标题 "简洁易用的jQuery左右对称浮动广告代码.zip" 提供了我们即将探讨的核心内容:这是一款基于jQuery的广告代码,设计目的是实现页面上的左右对称浮动效果,旨在为网站增加互动性和视觉吸引力。这样的广告代码对于...
ADSlide是一款基于jQuery的广告轮播插件,以其简洁的代码结构和丰富的功能特性,深受开发者喜爱。在本文中,我们将深入探讨ADSlide的工作原理、主要功能以及如何在实际项目中应用。 首先,ADSlide的核心是jQuery库...
《基于jQuery的广告图片切换特效插件:Animation Banner深度解析》 在当今互联网网页设计中,动态效果的运用已经成为提升用户体验的重要手段。其中,广告图片的切换特效是网站吸引用户注意力、展示产品特色的关键...
本篇文章将深入探讨基于jQuery的广告轮显插件,以及如何利用它来创建动态、引人入胜的图像展示。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。它的API简洁易用,...
基于jQuery的Banner广告图片动画切换插件是实现这一功能的高效工具。本示例提供的"基于jquery的banner广告图片动画切换插件示例.zip"文件包含了一个使用jQuery库实现的动态Banner切换效果的实例,旨在帮助开发者理解...
综上所述,创建一个jQuery基于面向对象的无缝滚动广告,需要对jQuery的DOM操作、动画功能以及面向对象编程有深入理解。通过合理设计对象结构和精心编写滚动逻辑,我们可以打造出一个既美观又高效的滚动广告组件。...
【基于jQuery的相册】是一种常见的网页动态效果,它利用JavaScript库jQuery的高效特性来实现图片展示的交互式体验,可以被用作幻灯片展示,适用于广告图片、产品展示等多种场景。在这个项目中,我们可以看到以下几个...