บทความนี้อธิบายวิธีการของ JS เพื่อให้ได้เอฟเฟกต์ภาพลอยตัว แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
คำอธิบาย: เมื่อคุณเปิดหน้าเว็บคุณจะเห็นรูปภาพที่ลอยอยู่ตลอดเวลาคลิกเพื่อเชื่อมต่อกับหน้าอื่น ๆ มันจะมีผลสำคัญ!
คัดลอกรหัสดังนี้: <html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> ทดสอบ </title>
<style type = "text/css">
#all {width: 100%; ความสูง: 3000px;}
</style>
</head>
<body>
<div id = "ทั้งหมด">
<div id = "img" style = "ตำแหน่ง: สัมบูรณ์; z-index: 99;">
<a href = "#" target = "_ blank"> <img src = "images/opvti.jpg" style = "เคอร์เซอร์: ตัวชี้;" style = "เคอร์เซอร์: ตัวชี้;" /> </a>
<ภาษาสคริปต์ = "JavaScript">
<!-เริ่มต้น
var xpos = document.body.clientwidth - 20;
var ypos = document.body.clientheight / 2;
var step = 1;
var delay = 10;
ความสูง var = 0;
var hoffset = 0;
var woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
ช่วงเวลา var;
img.style.top = ypos;
ฟังก์ชั่น ChangePos () {
width = document.body.clientwidth;
ความสูง = document.body.clientheight;
hoffset = img.offSetheight;
woffset = img.offsetWidth;
img.style.left = xpos + document.body.scrollleft;
img.style.top = ypos + document.body.scrolltop;
ถ้า (yon) {
ypos = ypos + step;
} อื่น {
ypos = ypos - ขั้นตอน;
-
ถ้า (ypos <0) {
YON = 1;
ypos = 0;
-
if (ypos> = (ความสูง - hoffset)) {
yon = 0;
ypos = (ความสูง - hoffset);
-
ถ้า (xon) {
XPOS = XPOS + ขั้นตอน;
} อื่น {
XPOS = XPOS - ขั้นตอน;
-
ถ้า (xpos <0) {
Xon = 1;
xpos = 0;
-
if (xpos> = (ความกว้าง - woffset)) {
Xon = 0;
xpos = (ความกว้าง - woffset);
-
-
ฟังก์ชั่นเริ่มต้น () {
img.visibility = "มองเห็นได้";
Interval = setInterval ('changepos ()', ล่าช้า);
-
ฟังก์ชั่น pause_resume () {
ถ้า (หยุดชั่วคราว) {
ClearInterval (ช่วงเวลา);
หยุดชั่วคราว = เท็จ;
} อื่น {
Interval = setInterval ('changepos ()', ล่าช้า);
หยุดชั่วคราว = จริง;
-
-
เริ่ม();
// end ->
</script>
</div>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน