圖片漂浮與點選放大
阿新 • • 發佈：2019-01-09
今天在繼續完善老師佈置的班級網站作業，由於之前正好趕上萬聖節，就準備做一個萬聖節主題的，雖然現在萬聖節已經過了幾天了，不過還是把它完善一下吧。大概的效果圖如下，鬼當然應該是可以飄來飄去的...
首先歸納一下圖片漂浮的實現，其實很簡單，就是重新定位它的位置，然後讓它稍微緩慢一點移動過去而已，注意要設定絕對定位才能生效
這裡用了隨機數來確定它將前往的下個位置。
程式碼實現：
<html> <head> <meta charset="UTF-8" /> <title>圖片隨機浮動</title> <style type="text/css"> img{ top:20px; left: 20px; position:absolute; transition: left 3s, top 3s; } </style> <script language="javascript" type="text/javascript"> function imgfloat(){ var w=document.body.clientWidth-100;//限制區域 var h=document.body.clientHeight-100; var floatimg=document.getElementById("floatimg"); // var x=200,y=200; //alert("恭喜IG！！！恭喜LPL！！！"); var x=Math.floor(Math.random()*h); var y=Math.floor(Math.random()*w); //document.write(x); floatimg.style.top=x+"px"; floatimg.style.left=y+"px";; //setTimeout("imgfloat()",3); 設定迴圈執行 } </script> </head> <body> <img id="floatimg" onclick="imgfloat()" src="http://www.jingyile.cn/wp-content/uploads/2018/10/10240.png" height="150" width="100"> </body> </html>
這裡我設定了滑鼠點選去觸發該事件的發生，也可以通過設定時間讓它自己迴圈執行。
由於有班級相簿這一欄目，預覽圖在點選時應該被放大，同樣很簡單，直接把圖片長和寬乘以一個常數n放大n倍。
當第二次點選時恢復原來大小，用一個flag來標記當前狀態即可。
<html> <head> <meta charset="UTF-8" /> <title>圖片點選放大</title> <style type="text/css"> </style> <script language="javascript" type="text/javascript"> var flag=true;//一開始標記為正常狀態 function bigimg(){ var img = document.getElementById('imgb');//圖片元素 var imgH = img.height; var imgW = img.width; if(flag){ img.height = imgH*2; img.width = imgW*2; flag = false;//把狀態設為放大狀態 } else{ img.height = imgH/2; img.width = imgW/2; flag = true;//把狀態設為正常狀態 } } </script> </head> <body> <img id="imgb" onclick="bigimg()" src="http://www.jingyile.cn/wp-content/uploads/2018/10/10240.png" height="150" width="100"> </body> </html>
那麼如果有多張照片的話就需要修改程式碼，有很多種方法，我這裡把當前觸發事件的元素作為引數傳遞給了bigimg（id）函式，
這樣就可以判斷當前點選的是哪張照片了。
但是這樣的話放大一張圖片勢必會影響其他圖片的佈局，就會很不美觀
可以通過絕對定位來設定一個用於展覽圖片的區域，每個圖片均在此處放大，結束之後還原其之前的位置。
<html> <head> <meta charset="UTF-8" /> <title>多張圖片點選放大</title> <style type="text/css"> </style> <script language="javascript" type="text/javascript"> var flag=true;//一開始標記為正常狀態 function bigimg(id){ var imgH = id.height; var imgW = id.width; if(flag){ // id.style.left="20px"; // id.style.top="20px"; // id.style.position="absolute"; id.height = imgH*2; id.width = imgW*2; flag = false;//把狀態設為放大狀態 } else{ // id.style.position="static"; id.height = imgH/2; id.width = imgW/2; flag = true;//把狀態設為正常狀態 } } </script> </head> <body> <img onclick="bigimg(this)" src="http://www.jingyile.cn/wp-content/uploads/2018/10/10240.png" height="150" width="100"> <img onclick="bigimg(this)" src="http://www.jingyile.cn/wp-content/uploads/2018/05/5200.png" height="200" width="150"> <img onclick="bigimg(this)" src="http://www.jingyile.cn/wp-content/uploads/2018/09/9.172.png" height="200" width="200"> </body> </html>