编程 Javascript

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程序设计有所帮助。

jquery实现对联广告的方法

- Author -

whazhl

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

FireFox与IE 下js兼容触发click事件的代码

Nov 20 Javascript

javascript中动态加载js文件多种解决办法总结

Nov 15 Javascript

js 上下左右键控制焦点(示例代码)

Dec 14 Javascript

取得元素的左和上偏移量的方法

Sep 17 Javascript

15个jquery常用方法、小技巧分享

Jan 13 Javascript

Vue过滤器的用法和自定义过滤器使用

Feb 08 Javascript

原生js轮播（仿慕课网）

Feb 15 Javascript

老生常谈JS中的继承及实现代码

Jul 06 Javascript

Vue Promise的axios请求封装详解

Aug 13 Javascript

vue移动端写的拖拽功能示例代码

Sep 09 Javascript

element-ui点击查看大图的方法示例

Dec 14 Javascript

详解如何解决使用JSON.stringify时遇到的循环引用问题

Mar 23 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

第十节--抽象方法和抽象类

2006/11/16 PHP

PHP判断文件是否存在、是否可读、目录是否存在的代码

2012/10/03 PHP

php生成excel列序号代码实例

2013/12/24 PHP

Zend Framework教程之Loader以及PluginLoader用法详解

2016/03/09 PHP

PHP数据对象PDO操作技巧小结

2016/09/27 PHP

Laravel中的Auth模块详解

2017/08/17 PHP

jQuery实现带滚动线条导航效果的方法

2015/01/30 Javascript

jQuery向后台传入json格式数据的方法

2015/02/13 Javascript

轻松掌握JavaScript中的Math object数学对象

2016/05/26 Javascript

js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

2016/12/12 Javascript

vue实现前进刷新后退不刷新效果

2018/01/26 Javascript

NestJs 静态目录配置详解

2019/03/12 Javascript

《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析

2020/04/08 Javascript

javascript 模块依赖管理的本质深入详解

2020/04/30 Javascript

uni-app从安装到卸载的入门教程

2020/05/15 Javascript

JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

2020/11/10 Javascript

Python实现list反转实例汇总

2014/11/11 Python

Python压缩解压缩zip文件及破解zip文件密码的方法

2015/11/04 Python

Python实现求解括号匹配问题的方法

2018/04/17 Python

python学习基础之循环import及import过程

2018/04/22 Python

Python实现获取邮箱内容并解析的方法示例

2018/06/16 Python

Python实现将数据写入netCDF4中的方法示例

2018/08/30 Python

python之线程通过信号pyqtSignal刷新ui的方法

2019/01/11 Python

用pyqt5 给按钮设置图标和css样式的方法

2019/06/24 Python

pandas分区间,算频率的实例

2019/07/04 Python

Python pandas实现excel工作表合并功能详解

2019/08/29 Python

python retrying模块的使用方法详解

2019/09/25 Python

python是否适合网页编程详解

2019/10/04 Python

python selenium实现发送带附件的邮件代码实例

2019/12/10 Python

thinkphp5 路由分发原理

2021/03/18 PHP

三星英国官网：Samsung英国

2018/09/25 全球购物

skyn ICELAND官网：冰岛成分天然护肤品

2020/08/24 全球购物

生态养殖创业计划书

2014/05/06 职场文书

铣床操作工岗位职责

2014/06/13 职场文书

道路交通事故赔偿协议书

2014/10/24 职场文书

浅谈Golang 切片（slice）扩容机制的原理

2021/06/09 Golang