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 相关文章推荐
Cookie 小记
Apr 01 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
js中的this的指向问题详解
Aug 29 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 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新手NOTICE错误常见解决方法
2011/12/07 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
js中this的用法实例分析
2015/01/10 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
某公司C#程序员面试题笔试题
2014/05/26 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
师德师风个人反思
2014/04/28 职场文书
节能标语大全
2014/06/21 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
农村党员对照检查材料
2014/09/24 职场文书
导游词范文
2015/02/13 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书