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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
用js重建星际争霸
2006/12/22 Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python中logging包的使用总结
2018/02/28 Python
python 将md5转为16字节的方法
2018/05/29 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
keras.layer.input()用法说明
2020/06/16 Python
python实现感知机模型的示例
2020/09/30 Python
医院护士专业个人的求职信
2013/12/09 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2015员工年度考核评语
2015/03/25 职场文书