jquery实现两边飘浮可关闭的对联广告


Posted in Javascript onNovember 27, 2015

效果展示:

jquery实现两边飘浮可关闭的对联广告

代码说明:

可关闭的左右两边飘浮的对联广告代码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代码如下:

<!--下面是对联广告的html代码结构-->
<div class="duilian duilian_left">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<div class="duilian duilian_right">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>

部分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;}

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

<script type="text/javascript">
$(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;
 });
});
</script>

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

本节内容:

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

例子:

jquery实现的对联广告代码

示例代码如下所示:

<!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" />
<script src="/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* 对联广告,可以两边飘浮
* by 3water.com
*/
$(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;
 });
});
</script>
<style>
/*对联广告的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;}
</style>
</head>
<body>
<!--对联广告的html代码结构-->
<div class="duilian duilian_left">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<div class="duilian duilian_right">
 <div class="duilian_con">对联的内容</div>
 <a href="#" class="duilian_close">X关闭</a>
</div>
<p style="height:1000px;"></p>
</body>
</html>
Javascript 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
封装属于自己的JS组件
Jan 27 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 #Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 #Javascript
基于jquery animate操作css样式属性小结
Nov 27 #Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 #Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 #Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 #Javascript
谈谈jQuery Ajax用法详解
Nov 27 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
mysql5写入和读出乱码解决
2006/11/25 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
浅谈json_encode用法
2015/03/05 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python中自定义函数的教程
2015/04/27 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python文件操作基础流程解析
2020/03/19 Python
Python中and和or如何使用
2020/05/28 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python中实现栈的三种方法
2020/12/19 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
初中生期末考试的自我评价
2013/12/17 职场文书
单位消防安全制度
2014/01/12 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
python - timeit 时间模块
2021/04/06 Python
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Python的三个重要函数详解
2022/01/18 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers