js实现多图展示鼠标移入图片放大

最新推荐文章于 2022-11-14 08:56:01 发布

转载最新推荐文章于 2022-11-14 08:56:01 发布 · 449 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/banzhiyan304053078/p/Amon.html

文章标签：

#javascript #json #ViewUI

本文介绍了一种使用HTML、CSS和JavaScript实现的图片展示效果，当鼠标悬停在图片上时，图片会放大并调整位置。通过设置不同的层级来避免重叠，并使用自定义的运动函数实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多图展示</title>
<style>
ul,li{list-style:none;}
img{border:none;}
#list{width:400px; margin:30px auto; position:relative;}
#list li{width:120px; height:100px; display:block; float:left; margin-left:10px; margin-bottom:10px;}
#list li img{width:100%; height:100%;}
</style>
<script src="js/movement.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
	var oList = document.getElementById("list");
	var aLi = oList.getElementsByTagName("li");
	var iMinZindex = 2;
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.left = aLi[i].offsetLeft+'px';
		aLi[i].style.top = aLi[i].offsetTop+'px';
	}	
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.position = 'absolute';	
		aLi[i].style.margin = '0';	
	}
	//缩放
	for(var i=0;i<aLi.length;i++){
		aLi[i].onmouseover = function(){
			this.style.zIndex = iMinZindex++;
			move(this,{width:200,height:160,marginLeft:-40,marginTop:-30});   //(200-120)/2=40
		}
		aLi[i].onmouseout = function(){
			move(this,{width:120,height:100,marginLeft:0,marginTop:0});
		}
	}
}
</script>
</head>
<body>
<ul id="list">
    <li><img src="images/1.jpg"></li>
    <li><img src="images/2.jpg"></li>
    <li><img src="images/3.jpg"></li>
    <li><img src="images/4.jpg"></li>
    <li><img src="images/5.jpg"></li>
    <li><img src="images/1.jpg"></li>
    <li><img src="images/4.jpg"></li>
    <li><img src="images/2.jpg"></li>
    <li><img src="images/5.jpg"></li>
</ul>
</body>
</html>

附件：

movement.js代码

function move(obj,json,fn){
　　clearInterval(obj.timer);
　　obj.timer=setInterval(function(){
　　　　var onoff=true;  
　　　　for(var attr in json){
　　　　　　var icur=0;
　　　　　　if(attr=='opacity'){
　　　　　　　　icur=Math.round(parseFloat(getStyle(obj,attr))*100);
　　　　　　}else{
　　　　　　　　icur=parseInt(getStyle(obj,attr));
	　}
　　　　　　var speed=(json[attr]-icur)/10;
　　　　　　speed=speed>0?Math.ceil(speed):Math.floor(speed);
　　　　　　//检测是否停止
　　　　　　if(icur !=json[attr]){              
　　　　　　　　onoff=false;                
　　　　　　}
　　　　　　if(attr=='opacity'){
　　　　　　　　//IE
　　　　　　　　obj.style.filter="alpha(opacity='+icur+speed+')";     
　　　　　　　　//firefox
　　　　　　　　obj.style.opacity=(icur+speed)/100;
　　　　　　}else{
　　　　　　　　obj.style[attr]= icur+speed+'px';	
　　　　　　}	
　　　　}
　　　　if(onoff){               
　　　　　　clearInterval(obj.timer);
　　　　　　if(fn){
　　　　　　　　fn();	
　　　　}
　　},30);	
}
function getStyle(obj,attr){
　　//currentStyle针对IE浏览器 getComputedStyle针对火狐浏览器
　　if(obj.currentStyle){
	return currentStyle[attr];
　　}else{
	return 	getComputedStyle(obj,false)[attr];
　　}
}

　效果展示：