JS实现先显示大图后自动收起显示小图的广告代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了JS实现先显示大图后自动收起显示小图的广告代码。分享给大家供大家参考。具体如下:

这是一个非常不错的JavaScript图片特效,当最初打开网页的时候,显示的是大图片,就像遮屏广告一样,停留一会后,自动缓慢收起,这时由JS控制更换广告图片,始终显示在网页顶部,在一些大门户网站我们经常见到这种效果,个人感觉挺酷哦!

先来看看运行效果截图:

JS实现先显示大图后自动收起显示小图的广告代码

在线演示地址如下:

具体代码如下:

<!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>先显示大图随后自动收起显示小图的JS广告</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
html,body{margin:0;text-align:center;font-size:12px;}
img{border:none}
p{margin:0px}
</style>
<script type="text/javascript">
var showAD = {
curve: function(t, b, c, d, s) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b
},
fx: function(from, to, playTime, onEnd) {
var Me = this,
who = this.adWrap,
position = 0,
changeVal = to - from,
curve = this.curve;
playTime = playTime / 10;
who.style.overflow = 'hidden';
function _run() {
if (position++<playTime) {
who.style.height = Math.max(1, Math.abs(Math.ceil(curve(position, from, changeVal, playTime)))) + "px";
setTimeout(_run, 10)
} else {
onEnd && onEnd.call(Me, to)
}
};
_run()
},
init: function(info) {
var Me = this,
loadImg = new Image;
loadImg.src = info.endImgURL;
window.onload=function() {
Me.endImgURL = info.endImgURL;
Me.img = document.getElementById(info.imgID);
Me.adWrap = document.getElementById(info.adWrapID);
var max = Me.img.height;
setTimeout(function() {
Me.fx(max, 0, 500,
function(x) {
this.img.src = this.endImgURL;
this.curve = function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
}
};
this.fx(0, this.img.height,600)
})
},
info.timeout || 1000)
};
}
};
showAD.init({
adWrapID: 'ad_box_2009_06',
imgID: 'adImg',
endImgURL: 'images/as.jpg'
});
</script>
</head>
<body>
<div id="ad_box_2009_06"><img src="images/ab.jpg" id="adImg"></div>
</body>
</html>

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

Javascript 相关文章推荐
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
React中的Context应用场景分析
Jun 11 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 #Javascript
基于JS实现简单的样式切换效果代码
Sep 04 #Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 #Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 #Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 #Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 #Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 #Javascript
You might like
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python单链表简单实现代码
2016/04/27 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
Python中的函数作用域
2018/05/07 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Django 开发环境配置过程详解
2019/07/18 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Django url 路由匹配过程详解
2021/01/22 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
生物化工专业个人自荐信
2013/09/26 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
服装发布会策划方案
2014/05/22 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
总经理年会致辞
2015/07/29 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android