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判断iframe中元素是否存在的方法
May 11 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
JS轮播图的实现方法2
Aug 25 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根据两点间的经纬度计算距离
2014/10/31 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
php实现小程序支付完整版
2018/10/09 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
详解Python中的正则表达式
2018/07/08 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
应届生会计电算化求职信
2013/10/03 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
创新比赛获奖感言
2014/02/13 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
导游词之西安骊山
2019/12/03 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js