Home > Article > Web Front-end > JS implements the advertising code that displays the large image first and then automatically collapses the small image_javascript skills

JS implements the advertising code that displays the large image first and then automatically collapses the small image_javascript skills

WBOYOriginal: 2016-05-16 15:40:481098browse

The example in this article describes the JS implementation of advertising code that first displays the large image and then automatically collapses and displays the small image. Share it with everyone for your reference. The details are as follows:

This is a very good JavaScript image effect. When the web page is initially opened, a large image is displayed, just like a screen-blocking advertisement. After staying for a while, it will automatically and slowly close up. At this time, the advertisement is controlled by JS Pictures are always displayed at the top of the web page. We often see this effect on some large portals. I personally think it is quite cool!

Let’s take a look at the screenshots of the running effect:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-big-to-small-pic-adv-codes/

The specific code is as follows:

<!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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Accordion folding panel effect code implemented by jquery_jqueryNext article：Accordion folding panel effect code implemented by jquery_jquery

See more

JS implements the advertising code that displays the large image first and then automatically collapses the small image_javascript skills

Related articles