html右下角固定广告,jQuery右下角悬浮广告

HTML

首先准备广告素材，并在body中建立一个用户悬浮的广告主体DIV#pop，设置为不显示，在广告的上部标题栏有关闭按钮，点击关闭时，则关闭隐藏悬浮广告。

关闭

赞助广告

CSS

使用CSS稍微美化#pop。注意其实我们使用position:fixed;right:0;bottom:0;其实就已经将广告位置固定在右下角了，但是要兼顾那些IE6的用户，ie6不支持fixed，这个问题我们可以通过jquery的插件来解决ie6的兼容行问题。

#pop{background:#fff;width:300px; height:282px;font-size:12px;position:fixed;right:0;bottom:0;}

#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:12px;

padding-left:10px;}

#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}

#popHead #popClose{position:absolute;right:10px;top:1px;}

#popHead a#popClose:hover{color:#f00;cursor:pointer;}

jQuery

该悬浮广告效果依赖于jQuery，所以在页面载入时别忘了先载入jQuery库文件。

function Pop(){

this.apearTime=1000;

this.hideTime=500;

this.delay=10000;

//显示

this.showDiv();

//关闭

this.closeDiv();

}

Pop.prototype={

showDiv:function(time){

if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {

$('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;

} else{//调用jquery.fixed.js,解决ie6不能用fixed

$('#pop').show();

jQuery(function($j){

$j('#pop').positionFixed()

})

}

closeDiv:function(){

$("#popClose").click(function(){

$('#pop').hide();

}

);

}

在ie6的情况下，我们调用了jquery.fixed这个插件，当然我们已经把该插件放在了下载包里的ads.js中，请下载压缩包。调用这段代码效果只需要这样写：

var popad=new Pop();

这样，我们就可以展示一个右下角悬浮广告效果，我们也可以继续扩展，向Pop()传入一些参数，可以扩展为网站消息提示框等效果，这个留给感兴趣的同学

html右下角固定广告,jQuery右下角悬浮广告相关推荐

jQuery右下角悬浮广告
查看演示右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的.今天我给大家分享一个使用jQuery来实现网页右下角广告的实例.它的优点是可以从右下角 ...
php底部悬浮广告,底部悬浮通栏可以关闭广告位详解（一）
效果一: 1.首先,整个底部悬浮通栏广告是固定在浏览器的底部,随着浏览器的滚动,底部悬浮广告始终在浏览器窗口中.这里有几个关键点:通栏,固定,黑色. 所以:首先我们必须给悬浮通栏广告整体一个100%的 ...
展开关闭页面html,JQUERY实现网页右下角固定位置展开关闭特效的方法
本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: 热门标签... js展开收起 js幻灯片 js特效广告代码对联广告 js弹出层 ...
去除迅雷右下角自动弹出的Flash广告
我们在使用迅雷的时候桌面右下角老是跳出烦人的广告于是我就在网上找到了去除广告的方法你一定会说下一个无广告版的不就行了我建议你不要这样做,因为那是黑客修改过的,万一里面放了木马啥的你就惨了还是不 ...
手机（wap）网页底部固定悬浮广告带轮播特效代码
// 作者:xycms // 网址:http://wwww.jsxyidc.com // 日期:2019-03-3 // QQ:364500483 // code:网页底部悬浮广告代码,带单独关闭va ...
js 让鼠标右下角有一排小字_JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码...
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮 ...
wap手机网页悬浮广告代码遮盖原有网页内容怎么办？
wap手机网页广告代码遮盖原有网页内容怎么办? 这个也许是很多weber在做网页页面会遇到的问题,假如是在中间悬浮,最好的办法就是不要用了,这个没有好的解决办法,只要是广告肯定是要给客户看的,不 ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
jquery右下角自动弹出关闭层
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/36.htm 右下角弹出层后,会在一定时间后自动隐藏.第一版本:http://www.cnblogs.com/ ...
css广告跟随,jQuery网页右侧广告跟随滚动代码分享
jQuery广告跟随滚动的两种方法都分享给大家,希望对大家的学习有所启发. 方法一: 方法二: /*页面智能层浮动*/ jQuery(document).ready(function($){ var ...

html右下角固定广告,jQuery右下角悬浮广告

赞助广告

html右下角固定广告,jQuery右下角悬浮广告相关推荐

最新文章

热门文章