jquery实现对联广告的方法


Posted in Javascript onFebruary 05, 2015

本文实例讲述了jquery实现对联广告的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
Prototype String对象 学习
Jul 19 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 #Javascript
Jquery中offset()和position()的区别分析
Feb 05 #Javascript
JS实现一个按钮的方法
Feb 05 #Javascript
JS继承用法实例分析
Feb 05 #Javascript
Javascript实现Web颜色值转换
Feb 05 #Javascript
JS表的模拟方法
Feb 05 #Javascript
JS的数组迭代方法
Feb 05 #Javascript
You might like
php构造函数实例讲解
2013/11/13 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
js验证上传图片的方法
2015/05/12 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python ldap实现登录实例代码
2016/09/30 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python 安装impala包步骤
2020/03/28 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
超市营业员岗位职责
2013/12/20 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL