仿淘宝实现鼠标移入图片，图片放大功能

最新推荐文章于 2021-06-03 04:09:47 发布

置顶

changeie

最新推荐文章于 2021-06-03 04:09:47 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/changeie/article/details/79660845

版权

这篇博客通过初级JavaScript技术演示了如何实现鼠标移入图片时，图片放大的功能。适合初级学者学习和交流，未来计划使用更高级的框架进行优化。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin: 0;padding: 0;}
li{list-style-type: none;}
.carousel-wrap{
position: relative;overflow: hidden;height: 454px;
width: 1200px;
margin: 100px auto;
}
.carousel{width: 8400px;z-index: 9;position: absolute;left: -1200px;top: 0;}
.carousel li {float: left;width: 1200px;}
.carousel img{width: 100%;}
.arrow{z-index: 10;position: absolute;width: 30px;height: 50px;text-align: center;line-height: 50px;
top: 50%;margin-top: -25px;text-decoration: none;color: #333;
font-family: '宋体';font-size: 30px;background: rgba(0,0,0,.2);font-weight: 600;
}
.arrow-left{left: 0;}
.arrow-right{right: 0}
.indicators{z-index: 10;position: absolute;right: 10px;bottom: 10p