تصف هذه المقالة طريقة JS لتحقيق تأثير موجه منبثق بعد تقليد درجة منتدى Zhongguancun. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> JS Imitation Zhongguancun Effect Forum موجه المنبثقة بعد التصنيف </title>
</head>
<body>
<script language = "javaScript">
var x = window.x || {} ؛
x.creat = function (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 = "absolute" ؛
this.div.style.left = "50 ٪" ؛
this.div.style.marginleft = "-50px"
this.div.style.margintop = "-20px"
this.div.innertext = "شكرًا لك على المشاركة! Experience +5"
this.div.style.fontsize = "12"
this.div.style.lineheight = this.div.style.height
this.div.style.textalign = "center" ؛
this.div.style.fontweight = "Bold" ؛
//this.div.style.border="solid red 1px "؛
this.div.style.color = "#fff"
this.div.style.top = (this.b+"٪") ؛
document.body.appendChild (this.div) ؛
this.run () ؛
}
x.creat.prototype = {
تشغيل: function () {
var me = هذا ؛
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) ؛
}
} ،
ألفا: وظيفة () {
var me = هذا ؛
if ("/v" == "V") {
this.div.style.filter = "progID: dximageTransform.microsoft.alpha (opacity ="+this.op*100+")" ؛
this.div.style.filter = "alpha (opacity ="+this.op*100+")" ؛
؛}
آخر {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) ؛
}
}
}
New X.Creat (1،50،25،30) ؛
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.