实现效果演示:
鼠标移入左侧缩略图时,小盒子和右边大图显示,并且小盒子跟随鼠标移动,右侧大图出现放大效果。
实现步骤:
HTML部分:
要实现放大镜效果,只需要一个简单的布局,左右各一个盒子,左侧放缩略图,里面包着小盒子(放大镜),右侧放大图,用于制造放大效果。
<body>
<div id="box">
<div id="lbox">
<img src="images/1.jpg" alt="" id="tp1">
<div id="xbox"></div>
</div>
<div id="rbox">
<img src="images/2.jpg" alt="" id="tp2">
</div>
</div>
</body>
CSS部分:
放大镜效果样式重点:左侧小盒子和右侧大盒子要默认隐藏,并且都要加上position属性,方便之后做移动效果。
*{
margin:0;
padding: 0;
}
#lbox{
float: left;
width:400px;
height:400px;
border:1px solid;
}
#tp1{
position:absolute;
top:20;