คุณสมบัติของฟังก์ชันสำหรับการตั้งค่าความโปร่งใสของโหนด DOM ใน JS: filter = "alpha (opacity =" + value + ")" (เข้ากันได้กับ IE) และ opacity = value/100 (เข้ากันได้กับ FF และ GG)
ก่อนอื่นให้ดูที่รหัสความเข้ากันได้สำหรับการตั้งค่าความโปร่งใส:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น setOpacity (ele, opacity) {
if (ele.style.Opacity! = ไม่ได้กำหนด) {
/// เข้ากันได้กับ FF และ GG และ IE เวอร์ชันใหม่
Ele.style.Opacity = ความทึบ / 100;
} อื่น {
/// เข้ากันได้กับเวอร์ชันเก่าเช่น
Ele.style.filter = "Alpha (Opacity =" + Opacity + ")";
-
-
เกี่ยวกับเพื่อนบางคนฉันเขียนสิ่งนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น setOpacity (ele, opacity) {
if (document.all) {
/// เข้ากันได้เช่น
Ele.style.filter = "Alpha (Opacity =" + Opacity + ")";
-
Ele {
/// เข้ากันได้กับ FF และ GG
Ele.style.Opacity = ความทึบ / 100;
-
-
ฉันอยากจะบอกว่ามีปัญหาเกี่ยวกับการทำงานภายใต้ IE10 แต่มันไม่ตอบสนองหลังจากคลิก เนื่องจาก IE10 รองรับแอตทริบิวต์ความทึบ แต่ไม่ได้กรองวิธีนี้จึงไม่แนะนำให้ใช้
รหัสฟังก์ชั่น fadein:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น fadein (ele, opacity, ความเร็ว) {
ถ้า (ele) {
var v = ele.style.filter.replace ("alpha (opacity =", ""). retplace (")", "") || Ele.style.Opacity;
v <1 && (v = v * 100);
จำนวน var = ความเร็ว / 1000;
var avg = นับ <2? (ความทึบ / นับ): (ความทึบ / นับ - 1);
ตัวจับเวลา var = null;
timer = setInterval (ฟังก์ชัน () {
if (v <opacity) {
v += avg;
SetOpacity (ele, v);
} อื่น {
ClearInterval (ตัวจับเวลา);
-
}, 500);
-
-
รหัสฟังก์ชั่น fadeout:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น fadeout (ele, opacity, ความเร็ว) {
ถ้า (ele) {
var v = ele.style.filter.replace ("alpha (opacity =", ""). retplace (")", "") || Ele.style.Opacity || 100;
v <1 && (v = v * 100);
จำนวน var = ความเร็ว / 1000;
var avg = (100 - ความทึบ) / นับ;
ตัวจับเวลา var = null;
timer = setInterval (ฟังก์ชัน () {
if (v - avg> opacity) {
v -= avg;
SetOpacity (ele, v);
} อื่น {
ClearInterval (ตัวจับเวลา);
-
}, 500);
-
-
นี่คือตัวอย่างตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<script type = "text/javascript" src = "fade.js"> </script>
<script type = "text/javascript">
window.onload = function () {
document.getElementById ('button1'). onclick = function () {
fadeout (document.getElementById ('dv'), 0, 6000);
-
document.getElementById ('button2'). onclick = function () {
fadein (document.getElementById ('dv'), 80, 6000);
-
-
</script>
</head>
<body>
<div id = "dv" style = "พื้นหลังสี: สีเขียว; ความกว้าง: 400px; ความสูง: 400px;"> </div>
<อินพุต id = "button1" type = "button" value = "ปุ่ม" />
<อินพุต id = "button2" type = "button" value = "ปุ่ม" />
</body>
</html>
มีวิธีที่ดีกว่าในการใช้งานหรือไม่? - -