效果展示:

代码说明:

可关闭的左右两边飘浮的对联广告代码jquery特效,宽屏分辨率大于1024px才显示。因为考虑到窄屏下显示对联广告那真是用户体验超差。

点击关闭按钮可以单独关闭自己一边的飘浮的对联广告代码。

js代码中的var screen_w = screen.width; if(screen_w>1024){duilian.show();} 是jquery判断浏览器分辨率的,你可以修改这个可关闭的左右两边飘浮的对联广告代码所需要的浏览器分辨率值,如果不想做判断可以删除这两句,让后把css代码 .duilian{top:260px;position:absolute; width:102px; overflow:hidden; display:none;}中的display:none;删除就不判断浏览器分辨率了。

点击两边飘浮的对联广告代码的下方关闭可以关闭各自的半边对联广告。

部分html代码如下:

对联的内容

X关闭

对联的内容

X关闭

部分css代码如下:

/*下面是对联广告的css代码*/

.duilian{top:260px;position:absolute; width:102px; overflow:hidden; display:none;}

.duilian_left{ left:6px;}

.duilian_right{right:6px;}

.duilian_con{border:#CCC solid 1px; width:100px; height:300px; overflow:hidden;}

.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}

部分左右两边飘浮的对联广告代码如下:

$(document).ready(function(){

var duilian = $("div.duilian");

var duilian_close = $("a.duilian_close");

var screen_w = screen.width;

if(screen_w>1024){duilian.show();}

$(window).scroll(function(){

var scrollTop = $(window).scrollTop();

duilian.stop().animate({top:scrollTop+260});

});

duilian_close.click(function(){

$(this).parent().hide();

return false;

});

});

下面一段代码很简单是实现jquery两边飘浮的对联广告代码

本节内容:

两边飘浮的对联广告代码。

例子:

jquery实现的对联广告代码

示例代码如下所示:

/**

* 对联广告,可以两边飘浮

* by www.jb51.net

*/

$(document).ready(function(){

var duilian = $("div.duilian");

var duilian_close = $("a.duilian_close");

var window_w = $(window).width();

if(window_w>1000){duilian.show();}

$(window).scroll(function(){

var scrollTop = $(window).scrollTop();

duilian.stop().animate({top:scrollTop+100});

});

duilian_close.click(function(){

$(this).parent().hide();

return false;

});

});

/*对联广告的css代码*/

.duilian{top:100px;position:absolute; width:102px; overflow:hidden; display:none;}

.duilian_left{ left:6px;}

.duilian_right{right:6px;}

.duilian_con{border:red solid 1px; width:100px; height:300px; overflow:hidden;}

.duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}

对联的内容

X关闭

对联的内容

X关闭

两侧广告HTML,jquery实现两边飘浮可关闭的对联广告相关推荐

  1. php对联广告,html左右对联代码 cms网站对联广告html代码

    实现网页左右两侧居中的对联广告代码你只记得自己有好多朋友却从没想过小编只有你一人. 无标题文档 #left{ width:200px;height:450px; position:absolute; ...

  2. html中怎么实现广告自动出来又自动隐藏?,基于jquery实现的定时显示与隐藏div广告的实现代码...

    基于jquery实现的定时显示与隐藏div广告的实现代码 下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTime ...

  3. 对联广告(jQuery)

    对联广告(jQuery) 上代码!!! <!DOCTYPE html> <html lang="en"><head><meta chars ...

  4. jquery实现滑动滚动条出现对联广告

    jquery实现滑动滚动条出现对联广告 在很多网站都又滑动滚动条到一定位置,然后就出现对联广告的应用.今天我也学习了一个对联广告分享给大家效果图入下: 主要实现是用Jquery里面的scroll()去 ...

  5. [jQuery基础] jQuery动效案例(一) -- 弹窗广告、对联广告

    弹窗广告 实现效果展示 实现步骤 第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } .ad{position: fixed;right: 0;bottom: 0; ...

  6. html网页布局对联,html javascript 网站两侧对联广告

    标准对联广告Js代码 lastScrollY=0; function heartBeat(){ var diffY; if (document.documentElement && d ...

  7. 标准对联广告Js代码

    [size=medium]标准对联广告Js代码 用于门户网站两侧的"对联广告" [/size] <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. 网页JS弹出广告代码,头部,右下角,网页中漂浮,对联广告代码等大全

    01.借鉴:网页JS弹出广告代码,头部,右下角,网页中漂浮,对联广告代码等大全02.网页头部弹出广告:03.<!--首页头部广告--> 04.<script src="ht ...

  9. 网页广告代码php,【网页广告特效代码】精选5种常用的网页广告特效代码

    网站少不了发布一些活动广告,网页中的广告显示效果有很多种,一般是采用JS或者JQ实现多种网页广告显示效果,以下是php中文网精选5种常用的网页广告特效代码推荐给大家下载使用! 效果预览和下载地址:ht ...

  10. 对联广告关闭挖扭的制作

    去过新浪或者搜狐吗?虽然我们都不愿意看广告,但是它们做广告的技术我们却应该学到手,这不,又一种很流行的做法儿,做成那种两边对称的对联式的广告,而最醒目的地方还有一个关闭的小按扭,如图: 这是不是比弹出 ...

最新文章

  1. background-clip与background-origin
  2. caged系统pdf_建筑行业单词中英文对照教材.pdf
  3. linux awk菜鸟教程,Linux awk 命令
  4. 制作MACOSX10.10.3/10.9安装启动盘U盘的教程
  5. 字符菱形(信息学奥赛一本通-T1028)
  6. C#字符串来袭——因为爱,所以爱
  7. java登陆拦截器_SpringBoot拦截器实现登录拦截
  8. 标签用什么数据结构存比较好_结婚喝什么白酒比较好,婚宴白酒用什么价位的比较好...
  9. spring+hibernate 下载
  10. 射频电路习题解答(一)——利用电子smith图解题
  11. linux下hg无法运行_Linux 无法启动常见的几种原因及解决办法
  12. 密歇根大学张阳团队开发全球首个蛋白质和RNA分子通用结构比对算法
  13. haas506 2.0开发教程-hota(仅支持2.2以上版本)
  14. python3携程_python携程
  15. c语言iota怎么用,IOTA(埃欧塔)钱包使用教程
  16. Word里面文字怎么修改字体
  17. [P3371 ]【模板】单源最短路径
  18. 转黄老师的“告别信狮”书
  19. 【源码】二分法的matlab实现
  20. android六轴传感器,6轴传感器、IP67防水:AMAZFIT米动智芯2 上架有品

热门文章

  1. VS2010 学习版序列号(转)
  2. RequestBody Ajax写法
  3. vs2015 2017 2019社区版免登录延长许可证
  4. (九)练习:美萍酒店管理系统-系统设置-删除类型、删除房间
  5. 线性代数 --- 什么是矩阵的逆?(个人笔记扫描版)
  6. 图像处理之边缘检测[微分算子、Canny算子和LOG算子]
  7. 基于贝叶斯决策理论的分类方法
  8. 用musescore做吉他弹唱谱
  9. linux下r语言画图,linux命令行下使用R语言绘图实例讲解
  10. 用BoundsChecker检测内存泄漏