JavaScript小效果的實現（筆記）

2024-04-27 15:08:48

字體：大中小

來源：轉載

供稿：網友

在學習一些javaScript效果，做一些實現效果筆記，順便整理一下思路。

LightBox效果實現：

<!DOCTYPE html><meta charset="utf-8"><html><head>	<title>Lightbox效果</title>	<style type="text/CSS">	.black_overlay{		display: none;		position: absolute;		top: 0%;left: 0%;		width: 100%;		height: 100%;		background-color: black;		z-index: 1001;		opacity: .70;	}	.white_content{		display: none;		position: absolute;		top: 30%;		left: 30%;		width: 40%;		height: 40%;		padding: 16px;		border: 16px solid orange;		background-color: white;		z-index: 1002;		overflow: auto;	}</style></head><body><a href="Javascript:void(0)" 	onclick="document.getElementById('light').style.display='block';	document.getElementById('fade').style.display='block'">請單擊這里</a><div id="light" class="white_content">	這里是lightbox的彈出框的內容<a href="javascript:void(0)" 	onclick="document.getElementById('light').style.display='none';	document.getElementById('fade').style.display='none'">關閉</a></div><div id="fade" class="black_overlay"></div></body></html>這個效果我用在了登錄注冊時，點擊按鈕跳出登錄注冊框，把登錄注冊代碼剔除body標簽放到顯示彈出框內容的地方就可以了。當然，lightbox效果還有很多用途，這個就看需要了。
圖片隨鼠標移動放大效果
<!DOCTYPE html><meta charset="utf-8"><html><head>	<title>圖片隨鼠標移動放大效果</title>	<style type="text/css">		#demo img{		width: 90px;		height: 90px;		border: 5px solid #f4f4f4;	}	#enlarge_img{		position: absolute;		display: none;		z-index: 999;		border: 5px solid #f4f4f4;	}	</style></head><body>	<div id="demo">		<img src="images/01.jpg" />		<img src="images/02.jpg" />		<img src="images/03.jpg" />	</div>	<div id="enlarge_img"></div></body>	<script type="text/javascript">		var demo=document.getElementById("demo");		var gg=demo.getElementsByTagName("img");		var ei=document.getElementById("enlarge_img");		for(i=0;i<gg.length;i++){			var ts=gg[i];			ts.onmousemove=function(event){				event=event||window.event;				ei.style.display="block";				ei.innerHTML='<img src="'+this.src+'" />';				ei.style.top=document.body.scrollTop+event.clientY+10+"px";				ei.style.left=document.body.scrollLeft+event.clientX+10+"px";			}			ts.onmouSEOut=function(){				ei.innerHTML="";				ei.style.display="none";			}			ts.onclick=function(){				window.open(this.src);			}		}	</script></html>
這個一般用于網頁上的圖片查看圖片細節
圖片輪顯效果
<!DOCTYPE html><meta charset="utf-8"><html><head>	<title>制作簡單的圖片輪顯效果</title>	<script>		var n=1;		function changePic(m){			return n=m;		}		function change(){			var myImg=document.getElementById("s1")			myImg.src="images/0"+n+".jpg";			if(n<5)n++;			else n=1;		}	</script></head><body onload="setInterval(change,2000);"><img src="images/01.jpg" width="200" id="s1" /><div>	<a href="#" onclick="changePic(1)">第一幅圖</a>	<a href="#" onclick="changePic(2)">第二幅圖</a>	<a href="#" onclick="changePic(3)">第三幅圖</a>	<a href="#" onclick="changePic(4)">第四幅圖</a>	<a href="#" onclick="changePic(5)">第五幅圖</a></div></body></html>