JavaScript运动框架——【案例】图片放大缩小切换效果

最新推荐文章于 2022-04-13 12:10:30 发布

喋喋小菜鸡

最新推荐文章于 2022-04-13 12:10:30 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/DebbyOctober/article/details/108851748

本文通过JavaScript详细讲解如何创建一个动态的图片放大缩小及切换效果，利用DOM操作和事件监听，实现用户交互的图片展示功能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
   
   margin: 0;padding: 0;}
		ul{
   
   
			list-style: none;
			width: 970px;
			height: 270px;
			position: relative;
		}
		#main{
   
   
			width: 970px;
			height: 270px;
			margin: 150px auto;
			position: relative;
		}
		ul li{
   
   
			width: 0px;
			height: 0px;
			position: absolute;
			left: 485px;
			top: 135px;
			background: #000;
		}
		ul li img{
   
   
			width: 100%;
			height: 100%;
			opacity: 0.5;
		}
		ul li li1{
   
   
			width: 640px;
			height: 270px;
			left: 165px;
			top: 0px;
			z-index: 10;
		}
		ul li li1 img{
   
   
			opacity: 1;
		}
		ul li li2{
   
   
			width: 530px;
			height: 224px;
			top: 23px;
			z-index: 9;
			left: 440px;
		}
		ul li li10{
   
   
			width: 530px;
			height: 224px;
			top: