jquery实现滑屏大图定时收缩为小banner图片的广告代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了jquery实现滑屏大图定时收缩为小banner图片的广告代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery实现的JS广告特效,滑屏大图广告定时收缩为小banner图片广告代码,这种广告在各大门户网站现在还能看得到,刚打开网页的时候可以看到滑下来的大图片广告,过一会,广告自动缩小变成了一个banner横幅广告,并带有关闭按钮,可以关闭广告,对于广告来说,这个代码挺实用。

运行效果截图如下:

jquery实现滑屏大图定时收缩为小banner图片的广告代码

在线演示地址如下:

具体代码如下:

<!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>jQuery顶部大图定时缩为小广告可关闭代码</title>
<style>
body{ margin:0; padding:0;}
img{ border:0}
.root1200{ width:1200px; height:100px; margin:0 auto; overflow:visible}
.wrapper em{ width:40px; height:15px; float:left; color:#FFF; font-size:12px; font-family:Verdana, Geneva, sans-serif;background:#333; margin:0 0 -20px 10px; padding:2px 5px 2px 10px; z-index:999; position:absolute; top:10px;}
</style>
<script language="javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
/*
* 宽窄屏切换
* */
var bigscreen = false;
if ( screen.width>=1200 ) {
bigscreen = true;
var bodyTag = document.getElementsByTagName("body")[0],
bodyClassName = bodyTag.getAttribute("className") || bodyTag.getAttribute("class");
bodyClassName = bodyClassName ? bodyClassName+" " : "";
bodyTag.className = bodyClassName+"root1200";
}
</script>
<div class="wrapper" id="snActive-wrap"> 
<em title="关闭广告">Close</em>
<a target="_blank" name="redbaby_none_ggw_dt01" title="小图" href="/"></a>
<a target="_blank" name="redbaby_none_ggw_dt01" title="大图"  href="/"></a>
</div>
<script type="text/javascript">
~function (){
var snActive = window.snActive = document.getElementById("snActive-wrap"),
a = snActive.getElementsByTagName("a"),
h = 0, w, imgSrc = [];
if (bigscreen){
w = 1190;
imgSrc[0] = "images/1390124030537_1200.jpg";// 40
imgSrc[1] = "images/1390124049068_1200.jpg";// 500
} else {
w = 990;
imgSrc[0] = "images/1390124028186.jpg";// 40
imgSrc[1] = "images/1390124043025.jpg";// 500
}
snActive.style.overflow = 'hidden';
a[0].style.display = "none";
a[0].innerHTML += '<img width="' + w + '" height="40" src="' + imgSrc[0] + '" style="display:block" />';
if(a[1]){
a[1].innerHTML += '<img width="' + w + '" height="500" src="' + imgSrc[1] + '" style="display:block" />';
}
}();
//关闭通栏广告
var snActive = $(snActive),
hideImg = snActive.find('a:hidden'),
em = snActive.find("em");
timeout = !1;
if(hideImg[0]) {
timeout = setTimeout(function(){
snActive.animate({height:40},600,function(){
hideImg.siblings('a:visible').hide();
hideImg.show();
em.show().live("click",function(){
snActive.slideUp(300);
});
});
}, 3000)
}
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
详解JavaScript常量定义
Jan 03 Javascript
javaScript封装的各种写法
Aug 14 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
详解Vue This$Store总结
Dec 17 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
JavaScript实现打字游戏
Feb 19 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 #Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 #Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 #Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 #Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 #Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 #Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
php实现encode64编码类实例
2015/03/24 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
10个顶级Python实用库推荐
2021/03/04 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
电台广播稿范文
2015/08/19 职场文书