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 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
js正则相关知识点专题
May 10 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
ES6 Object属性新的写法实例小结
Jun 25 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 地址栏信息的获取代码
2009/01/07 PHP
php与paypal整合方法
2010/11/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
PyTorch中的Variable变量详解
2020/01/07 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
如何进行Linux分区优化
2016/09/13 面试题
六十岁生日答谢词
2014/01/10 职场文书
校园安全广播稿
2014/02/08 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
小学新学期寄语
2014/04/02 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
退休教师追悼词
2015/06/23 职场文书
名人传读书笔记
2015/06/26 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python