用js实现简单放大镜效果
此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大,而是等比例移动。下面是实现的代码:
css样式代码如下:
<style>
.s_box{
width:400px;height: 300px;position: absolute;left: 50px;top:100px;}
.s_box img{
width: 400px;height: 300px;}
.s_box span{
width: 130px;height: 100px;background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;cursor:move;}
.b_box{
width: 400px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}
.b_box img{
width: 1200px;height: 900px;position: absolute;left:0;top:0;}
.list{
margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:430px;}
.list li{
float: left;margin: 0 10px;}
.list li img{
width: 100px