JavaScript小效果的实现（笔记）-CSDN博客

在学习一些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)" 
	οnclick="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)" 
	οnclick="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.οnmοusemοve=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.οnmοuseοut=function(){
				ei.innerHTML="";
				ei.style.display="none";
			}
			ts.οnclick=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 οnlοad="setInterval(change,2000);">
<img src="images/01.jpg" width="200" id="s1" />
<div>
	<a href="#" οnclick="changePic(1)">第一幅图</a>
	<a href="#" οnclick="changePic(2)">第二幅图</a>
	<a href="#" οnclick="changePic(3)">第三幅图</a>
	<a href="#" οnclick="changePic(4)">第四幅图</a>
	<a href="#" οnclick="changePic(5)">第五幅图</a>
</div>
</body>
</html>