js、css、html实现淘宝的放大镜效果

周末忙活了两天,啥也没写。今天先来一篇吧,这是在前端中几乎很常见的一个效果,今天就写写吧。

在实现一个需求或者效果之前,我们需要明确的就是自己的思路是怎么样的,有了思路其他的也就好办多了,磨刀不误砍柴工。

要实现放大镜效果,我们首先要有一个大体的效果图,如上图所示,下面是思路分析:

1.页面加载完后就获取所要操作的节点对象(smallBox、tool、bigBox、bigImg等)

2.当鼠标浮动到小盒子上时,显示输出放大镜(tool),显示出右边的大盒子。

3.在鼠标在小盒子上移动时,放大镜(tool)跟着鼠标移动(范围就是小盒子内)。右边的大盒子中的大图片也随之移动。

那么我们需要怎样做才能实现这样的效果呢,再来一张效果分析图也许就很明了了,如下:

右部显示出来是放大的效果,那么右部的容器和小工具的大小比求出图片需要放大多少倍。其实这个原理就是小工具在左侧的小盒子上移动,然后图片按比例放大后显示在右侧的盒子上,(图片大盒子小,显示不完全)然后移动小工具,让右侧大图片在右侧盒子内移动,所以小工具的宽高比如为100*100,那么右侧大盒子的宽高需按照比例来,可以设置为400*400,那么左侧的原始图片假如宽度为300,高度可以不用考虑,在右侧需要把这个张图片宽度设置为300*4=1200的宽度。这些在css中设置好,接下来要求的就是图片怎么移动,上图左侧有一个div,div里面有一个小工具(黄色背景,移动用的),右侧有一个div(黄色背景),绿色背景为放大后的图片。a代表小工具的宽度(offsetWidth),a1代表右侧div的宽度,c代表小工具在左侧div移动的距离,那么c1就是我们要求的值,记住,是让右侧的大图片在盒子内移动,而不是移动盒子。分析好上面的,我们接下来要坐的就是下代码了。

我们前端里面,怎么样布局是很重要的一步,逻辑再好,不如布局犀利。

html:

<!–小盒子–>
<div id="smallBox" class="smallBox">
<div id="tool" class="tool"></div>
<img src="awe.jpg" />
</div>
<!–大盒子–>
<div id="bigBox" class="bigBox">
<img id="bigImg" src="awe.jpg" />
</div>

css:

.smallBox{
border:1px solid #ccc;
width:300px;
position:absolute;
top:100px;
left:100px;
cursor:move;
overflow:hidden;

}
.tool{
display:none;
width:100px;
height:100px;
background-color:gold;
filter:alpha(opacity=50);
opacity:0.5;
position:absolute;
}
.smallBox img{
width:300px;
}
.bigBox{
display:none;
width:400px;
height:400px;
overflow:hidden;
position:absolute;
left:500px;
top:100px;
border:1px solid #ccc;
}
.bigBox img{
position:absolute;
width:1200px;
}

js:

window.onload = function(){
var smallBox = document.getElementById("smallBox");  //小盒子
var tool = document.getElementById("tool");  //放大镜
var bigBox = document.getElementById("bigBox");  //大盒子
var bigImg = document.getElementById("bigImg");  //大图片

//第二步:当鼠标浮动到小盒子上时,显示出放大镜(tool),显示出右边的大盒子。
smallBox.onmouseover = function(){
tool.style.display = "block";  //显示出放大镜(tool)
bigBox.style.display = "block"; //显示出右边的大盒子。
}
smallBox.onmouseout = function(){
tool.style.display = "none";  //隐藏出放大镜(tool)
bigBox.style.display = "none"; //隐藏出右边的大盒子。
}
//第三步:在小盒子上移动鼠标时,放大镜(tool)跟着鼠标移动(范围就是小盒子内)。右边的大盒子中的大图片也随之移动
//offsetWidth  offsetHeight   获取一个节点对象的宽度和高度(不包括滚动条)
smallBox.onmousemove = function(e){
var _event = window.event||e; //事件对象
//计算放大镜(tool)的x坐标
var left = _event.clientX-smallBox.offsetLeft-tool.offsetWidth/2;
//计算放大镜(tool)的y坐标
var top = _event.clientY-smallBox.offsetTop-tool.offsetHeight/2;
//处理left和top值(限制范围)
if(left<0){
left = 0;
}
if(top<0){
top = 0;
}
if(left>smallBox.offsetWidth-tool.offsetWidth){
left = smallBox.offsetWidth-tool.offsetWidth;
}
if(top>smallBox.offsetHeight-tool.offsetHeight){
top = smallBox.offsetHeight-tool.offsetHeight;
}
//改变放大镜的一个坐标
tool.style.left = left + "px";
tool.style.top = top + "px";
//求图片应当移动的距离
var x = tool.offsetLeft*bigBox.offsetWidth/tool.offsetWidth;
var y = tool.offsetTop*bigBox.offsetHeight/tool.offsetHeight;
//改变图片移动的距离
bigImg.style.left = -x + "px";
bigImg.style.top = -y + "px";
}
}

这个逻辑部分使用的完全是纯js,下面给出使用jquery的代码,更简洁:

jQuery:

$(function(){
$("#smallBox").on({
mouseenter:function(){
$("#tool").css({display:"block"});
$("#bigBox").css({display:"block"});
},
mouseleave:function(){
$("#tool").css({display:"none"});
$("#bigBox").css({display:"none"})
},
mousemove:function(e){
var cX = e.clientX-$("#smallBox").offset().left-$("#tool").width()/2;
var cY = e.clientY-$("#smallBox").offset().top-$("#tool").height()/2;
if(cX<0){
cX = 0;
}
if(cX>$("#smallBox").width()-$("#tool").width()){
cX = $("#smallBox").width()-$("#tool").width();
}
if(cY<0){
cY = 0;
}
if(cY>$("#smallBox").height()-$("#tool").height()){
cY = $("#smallBox").height()-$("#tool").height();
}

$("#tool").css({
left:cX,
top:cY
});
var x = $("#tool").position().left*$("#bigBox").width()/$("#tool").width();
var y =$("#tool").position().top*$("#bigBox").height()/$("#tool").height();
$("#bigImg").css({
left:-x,
top:-y
})

}
})
})

好了,大功告成。

但是在实际情况下还会有一个屏幕滚动的高度,我们需要改装这一句,加上$(window).scrollTop()屏幕滚动的高度(jq的写法)。

var cY = e.clientY-$(".bigxiao").offset().top-$("#tools").height()/2 +$(window).scrollTop();

IT文库 » js、css、html实现淘宝的放大镜效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址