JS implémente le code publicitaire qui affiche d'abord la grande image, puis réduit automatiquement les petites compétences image

Maison

interface Web

js tutoriel

JS implémente le code publicitaire qui affiche d'abord la grande image, puis réduit automatiquement les petites compétences image_javascript

May 16, 2016 pm 03:40 PM

js 广告

L'exemple de cet article décrit l'implémentation JS d'un code publicitaire qui affiche d'abord la grande image, puis se réduit et affiche automatiquement la petite image. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un très bon effet d'image JavaScript. Lorsque la page Web est ouverte pour la première fois, une grande image s'affiche, tout comme une publicité bloquant l'écran. Après un certain temps, elle se ferme automatiquement et lentement. la fois, la publicité est contrôlée par JS. Les images sont toujours affichées en haut de la page web. On voit souvent cet effet sur certains grands portails. Personnellement, je trouve ça plutôt cool !

Jetons un coup d'œil aux captures d'écran de l'effet de course :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;先显示大图随后自动收起显示小图的JS广告&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html;charset=gb2312"&gt;
&lt;style type="text/css"&gt;
html,body{margin:0;text-align:center;font-size:12px;}
img{border:none}
p{margin:0px}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
var showAD = {
curve: function(t, b, c, d, s) {
if ((t /= d / 2) &lt; 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++&lt;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) &lt; (1 / 2.75)) {
return c * (7.5625 * t * t) + b
} else if (t &lt; (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
} else if (t &lt; (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'
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="ad_box_2009_06"&gt;&lt;img src="images/ab.jpg" id="adImg"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn