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 相关文章推荐
javascript学习(一)构建自己的JS库
Jan 02 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 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
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
JS backgroundImage控制
2009/05/19 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
详解python:time模块用法
2019/03/25 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
基于python 凸包问题的解决
2020/04/16 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
知识竞赛活动方案
2014/02/18 职场文书
学习之星事迹材料
2014/05/17 职场文书
董事长岗位职责
2015/02/13 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS