Cet article décrit la méthode de JS pour atteindre un effet rapide pop-up après avoir imité le score du forum Zhongguancun. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<Title> JS Imitation de Zhongguancun Forum Invite de l'effet après la notation </TITAL>
</ head>
<body>
<script linguisse = "javascript">
var x = window.x || {};
x.creat = fonction (t, b, c, d) {
this.t = t;
this.b = b;
this.c = c;
this.d = d;
this.op = 1;
this.div = document.CreateElement ("div");
this.div.style.height = "40px";
this.div.style.width = "100px";
this.div.style.background = "red";
this.div.style.position = "absolu";
this.div.style.left = "50%";
this.div.style.marginleft = "- 50px"
this.div.style.margintop = "- 20px"
this.div.innertext = "Merci d'avoir participé! Expérience +5"
this.div.style.fontsize = "12"
this.div.style.lineheight = this.div.style.height
this.div.style.textalign = "Centre";
this.div.style.fontweight = "bold";
//this.div.style.border="solid rouge 1px ";
this.div.style.color = "# fff"
this.div.style.top = (this.b + "%");
document.body.appendChild (this.div);
this.run ();
}
x.creat.prototype = {
run: function () {
var me = ceci;
this.div.style.top = -this.c * (this.t / this.d) * (this.t / this.d) + this.b + "%";
this.t ++;
this.q = setTimeout (function () {me.run ()}, 25)
if (this.t == this.d) {
ClearTimeout (ME.Q);
setTimeout (function () {me.alpha ();}, 1000);
}
},
alpha: fonction () {
var me = ceci;
if ("/ v" == "v") {
this.div.style.filter = "PROGID: dximageTransform.microsoft.alpha (opacity =" + this.op * 100 + ")";
this.div.style.filter = "alpha (opacity =" + this.op * 100 + ")";
;}
else {this.div.style.opacity = this.op}
this.op- = 0,02;
this.w = setTimeout (function () {me.alpha ()}, 25)
if (this.op <= 0) {
ClearTimeout (this.w);
document.body.removechild (me.div);
}
}
}
Nouveau X.Creat (1,50,25,30);
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.