JS实现先显示大图后自动收起显示小图的广告代码_javascript技巧
本文实例讲述了JS实现先显示大图后自动收起显示小图的广告代码。分享给大家供大家参考。具体如下：
这是一个非常不错的JavaScript图片特效，当最初打开网页的时候，显示的是大图片，就像遮屏广告一样，停留一会后，自动缓慢收起，这时由JS控制更换广告图片，始终显示在网页顶部，在一些大门户网站我们经常见到这种效果，个人感觉挺酷哦！
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-big-to-small-pic-adv-codes/
具体代码如下：
<!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="/static/imghw/default1.png" data-src="images/ab.jpg" class="lazy" id="adImg" alt="JS实现先显示大图后自动收起显示小图的广告代码_javascript技巧" ></div>
</body>
</html>希望本文所述对大家的javascript程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
360浏览器推荐的广告如何关闭？如何关闭电脑360浏览器推荐的广告？
Mar 14, 2024 am 09:16 AM
360浏览器推荐的广告如何关闭？相信很多的用户们都在使用360浏览器，不过这款浏览器有时候会弹出广告，这就使得很多的用户们都十分的苦恼，下面就让本站来为用户们来仔细的介绍一下如何关闭电脑360浏览器推荐的广告吧。 如何关闭电脑360浏览器推荐的广告？ 方法一： 1、打开360安全浏览器。 2、找到右上角“三横杠”标志，点击【设置】。 3、在弹出的界面左侧任务栏中找到【实验室】，勾选【启用“360热点资讯”功能】即可。 方法二： 1、首先双击
新版Edge如何关闭广告？屏蔽Edge个性化广告的方法
Mar 14, 2024 am 11:37 AM
很多用户更新Edge浏览器之后，发现界面上多了很多的广告，比如新标签页的底部有多个网站的链接还标注广告字样，看起来非常烦人。那有什么办法可以关闭Edge浏览器个性化广告吗？小编在网上查找了很多办法，下面就分享给大家一个关闭广告的小技巧。 新版Edge如何关闭广告？ 1、打开Edge浏览器。 2、点击右上角的【•••】。 3、点击【设置】。 4、点击【隐私、搜索和服务】。 5、关闭”个性化你的web体验“右侧的开关，即可关闭微软推送的个性
朋友圈广告怎么彻底关掉
Mar 03, 2024 pm 12:31 PM
用户在刷朋友圈的时候会遇到很多的广告，那么广告怎么彻底关掉呢？用户们需要在我的里点击设置，然后找到个人信息与权限，然后点击个性化广告管理，将广告个性化关闭就行。这篇朋友圈广告彻底关掉方法介绍就能告诉大家具体的操作方法，赶紧看看吧！微信使用教程朋友圈广告怎么彻底关掉答：无法彻底关掉，只能关掉个性化推荐具体方法：1、首先点击我，然后找到里面的设置。2、找到个人信息与权限选项。3、点击里面的个性化广告管理功能。4、点击广告个性化右侧的开关，关闭就可以了。怎么关闭广告：1、找到朋友圈里的广告。2、点击右
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
js和vue的关系
Mar 11, 2024 pm 05:21 PM
js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。
