jquery实现的Banner广告收缩效果代码
本文实例讲述了jquery实现的Banner广告收缩效果代码。分享给大家供大家参考。具体如下：
这里演示一个Banner广告收缩效果，点开后，网页显示大广告，用鼠标点击“关闭”后，广告会收缩上去，此效果已在各大网站见到过，欢迎借鉴使用。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-banner-show-close-style-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>一个Banner广告收缩效果</title> <style type="text/css"> *{margin:0; padding:0;}/*为了方便 直接这样重置了*/ #main{margin:0 auto; width:960px;} #banner{display:none; margin:0 auto; width:960px; height:160px; background:url(images/banner.png) no-repeat; position:relative;} #close{display:block; width:50px; height:22px; text-align:center; line-height:22px; border:1px #ddd solid; background:#000; color:#fff; font-size:12px; float:right; cursor:pointer;} </style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $ ( function() { $("#banner").slideDown(); var Up=function(){$("#banner").slideUp(1500)} setTimeout(Up,3000); $("#close").click ( function() { $("#banner").slideToggle ( 600,function() { if($("#banner").css("display") == "none") { $("#close").text("打开"); } else { $("#close").text("关闭"); } } ); } ); } ); </script> </head> <body> <div id="main"> <div id="banner"></div> <span id="close">关闭</span> </div> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
-
本文向大家介绍jQuery实现广告条滚动效果，包括了jQuery实现广告条滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现广告条滚动效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
调用说明show只是会触发广告展示，但是不一定会展示（受限于广告系统的策略等） 支持版本: viewId 1001（静态广告）、1002（动态） 手机qq 7.6.5 支持原生游戏（cocos/laya/ergret），不支持H5游戏（使用DOM的游戏） viewId 1003（原生和H5游戏均支持） 仅在手机qq 7.8.5支持。 支持原生游戏（cocos/laya/ergret），支持H5游戏
-
本文向大家介绍Android 知乎广告效果实现代码，包括了Android 知乎广告效果实现代码的使用技巧和注意事项，需要的朋友参考一下 知乎的广告效果一直想写，无奈最近才有时间。 先看效果： 肯定要自定义view了，一个类似imageView的控件，还要给它一个值用来指定广告图片的显示位置。 问题： 1.图片如何在范围内（单个item范围）上下移动,如窗户一般,后面的图是可以动的，但是窗户是固定的
-
本文向大家介绍jquery实现的下拉和收缩效果示例，包括了jquery实现的下拉和收缩效果示例的使用技巧和注意事项，需要的朋友参考一下 下拉和收缩类似的效果应用非常的频繁，本章节简单介绍一下如何实现此效果。 代码实例如下: 以上代码实现了下拉和收缩效果，代码比较简单，这里就不多介绍了。
-
本文向大家介绍基于jQuery代码实现圆形菜单展开收缩效果，包括了基于jQuery代码实现圆形菜单展开收缩效果的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴代码了，具体代码如下所示： 以上所述是小编给大家介绍的基于jQuery代码实现圆形菜单展开收缩效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍原生js实现网页顶部自动下拉/收缩广告效果，包括了原生js实现网页顶部自动下拉/收缩广告效果的使用技巧和注意事项，需要的朋友参考一下 知识要点 1.实现原理： 通过递归改变div的高度值达到缓慢下拉的效果。 2.一共分为3个步骤我写了三个函数 第一个show()函数（下拉）：初始值高度h<300的话 h+5 反之return退出停止，调用setTimeout方法30毫秒执行一次+5