编程 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 相关文章推荐

javascript编程起步（第六课）

Feb 27 Javascript

jquery复选框CHECKBOX全选、反选

Aug 30 Javascript

High Performance JavaScript(高性能JavaScript)读书笔记分析

May 05 Javascript

顶部缓冲下拉菜单导航特效的JS代码

Aug 27 Javascript

浅谈JavaScript function函数种类

Dec 29 Javascript

关于JavaScript限制字数的输入框的那些事

Aug 14 Javascript

使用Bootstrap美化按钮实例代码(demo)

Feb 03 Javascript

JS实现PC手机端和嵌入式滑动拼图验证码三种效果

Feb 15 Javascript

VueRouter导航守卫用法详解

Dec 25 Javascript

JS实现的合并多个数组去重算法示例

Apr 11 Javascript

详解Vue webapp项目通过HBulider打包原生APP

Jun 29 Javascript

微信小程序实现底部弹出模态框

Nov 18 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操作mysqli(示例代码)

2013/10/28 PHP

php出现内存位置访问无效错误问题解决方法

2014/08/16 PHP

PHP获取指定月份第一天和最后一天的方法

2015/07/18 PHP

JS焦点图切换，上下翻转

2011/05/12 Javascript

利用Jquery实现可多选的下拉框

2014/02/21 Javascript

JS实现的用来对比两个用指定分隔符分割的字符串是否相同

2014/09/19 Javascript

《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

2015/01/09 Javascript

jQuery满屏焦点图左右滚动特效代码分享

2015/09/07 Javascript

JS实现不使用图片仿Windows右键菜单效果代码

2015/10/22 Javascript

javascript如何实现暂停功能

2015/11/06 Javascript

利用JS生成博文目录及CSS定制博客

2016/02/10 Javascript

vue2中使用less简易教程

2018/03/27 Javascript

webpack4 处理SCSS的方法示例

2018/09/03 Javascript

解决layui 表单元素radio不显示渲染的问题

2019/09/04 Javascript

vue使用svg文件补充-svg放大缩小操作(使用d3.js)

2020/09/22 Javascript

Python中使用pprint函数进行格式化输出的教程

2015/04/07 Python

Python通过调用mysql存储过程实现更新数据功能示例

2018/04/03 Python

Anaconda入门使用总结

2018/04/05 Python

python使用tcp实现局域网内文件传输

2020/03/20 Python

Python使用装饰器模拟用户登陆验证功能示例

2018/08/24 Python

浅谈Python脚本开头及导包注释自动添加方法

2018/10/27 Python

Python 利用scrapy爬虫通过短短50行代码下载整站短视频

2018/10/29 Python

Python简易版图书管理系统

2019/08/12 Python

Pytorch反向求导更新网络参数的方法

2019/08/17 Python

Python手动或自动协程操作方法解析

2020/06/22 Python

python脚本定时发送邮件

2020/12/22 Python

艺术学院毕业生自荐信

2014/07/05 职场文书

代领报检证委托书范本

2014/10/11 职场文书

六年级语文下册教学计划

2015/01/22 职场文书

介绍信怎么写

2015/05/05 职场文书

人代会简报

2015/07/21 职场文书

健康教育主题班会

2015/08/14 职场文书

导游词之安徽九华山

2019/09/18 职场文书

Python中的套接字编程是什么?

2021/06/21 Python

Prometheus 监控MySQL使用grafana展示

2021/08/30 MySQL

深入理解go缓存库freecache的使用

2022/02/15 Golang