预览效果(这里截取静态,有兴趣的可以运行下面的代码):
实现方式1.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>电子商务网站放大镜效果1</title><style type="text/css">html, body, div { margin: 0; padding: 0; }#tab { position: relative; width: 300px; height: 300px;margin: 50px ; background: #CDE074; }#mark { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #B00000; opacity: 0.5; filter: alpha(opacity=50); cursor: move; }#container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 3