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 相关文章推荐
popdiv
Jul 14 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
浅析node.js中close事件
Nov 26 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
java模拟PHP的pack和unpack类
2016/04/13 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Scrapy框架使用的基本知识
2018/10/21 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
《云房子》教学反思
2014/04/20 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
司法所长先进事迹
2014/06/02 职场文书
打架检讨书范文
2015/01/27 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
植树节新闻稿
2015/07/17 职场文书
银行培训心得体会范文
2016/01/09 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python