Html
    Css
    Js

    
                        
 * {
	margin:0;
	padding:0;
}
#box,#bigBox {
	width:350px;
	height:350px;
	border:1px solid black;
	float:left;
	margin:15px;
}
#bigBox {
	display:none;
	overflow:hidden;
	position:relative;
}
#box img {
	width:350px;
	height:350px;
}
#bigBox img {
	position:absolute;
	width:700px;
	height:700px;
}
#box {
	position:relative;
}
#mark {
	width:175px;
	height:175px;
	position:absolute;
	cursor:move;
	background:rgba(0,0,0,0.3);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

电商网站常用商品放大镜效果(原创)

更新时间:2019-09-03 09:32:12

1. 图片路径自行更改
2. 原生js实现效果
3. 可封装

0