在学习一些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>
时间： 2024-09-29 17:30:56