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 相关文章推荐
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
JavaScript自定义事件介绍
2013/08/29 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python使用递归解决全排列数字示例
2014/02/11 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
自我推荐书
2013/12/04 职场文书
关于毕业的广播稿
2014/01/10 职场文书
经典广告词大全
2014/03/14 职场文书
心理健康活动总结
2014/04/30 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
房产电话营销开场白
2015/05/29 职场文书
主持稿开场白
2015/06/01 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python