放大镜.gif
所谓的放大镜效果其实是由两张图片来完成的,一张小图片一张大图片,鼠标放在小图片上移动,从而控制大图片来移动,给人一张图片被放大的错觉.上面是效果图:
1.原生js
(1)首先写html部分
<body>
<div class="min">
<img src="img/max2.jpg" alt="" />
<div class="fd"></div>
</div>
<div class="max">
<img src="img/mmax2.jpg"/>
</div>
</body>
min放小图片,max放大图片,enlarge是浅蓝色的放大镜;
图片就自己找吧...(上京东淘宝拽出来就行)
(2)css样式
<style type="text/css">
.min{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
position: relative;
}
.max{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
display: none;
overflow: hidden;
position: relative;
}
.max img{
position: absolute;
top: 0;
left: 0;
}
.enlarge{
width: 150px;
height: 150px;
box-shadow: 0px 0px 10px black;
background-color: skyblue;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
max的"overflow: hidden;"是把大图片超出的部分隐藏
一开始放大镜enlarge和max都是隐藏的且不占文本流,所以都是"display: none;"
放大镜enlarge最后要随鼠标移动而移动,是通过改变其距左边的距离而实现的,所以要设置定位"position: absolute;",且"left: 0;".
(2)原生js
<script type="text/javascript">
var min = document.querySelector(".min"),
max = document.querySelector(".max"),
fd = document.querySelector(".enlarge"),
img = document.querySelector(".max img");
min.onmouseover = function () {
// 1.鼠标覆盖显示max和enlarge
max.style.display = "block";
enlarge.style.display = "block";
// 离开时隐藏
min.onmouseout = function () {
max.style.display = "none";
enlarge.style.display = "none";
}
// 2.enlarge的移动范围
min.onmousemove = function () {
// 鼠标触摸的点
var x = event.clientX - min.offsetLeft - enlarge.offsetWidth / 2;
var y = event.clientY - min.offsetTop - enlarge.offsetHeight / 2;
// 最大移动距离
var maxX = min.clientWidth - enlarge.offsetWidth;
var maxY = min.clientHeight - enlarge.offsetHeight;
// 边界判断
if (x <= 0) {
x = 0;
} else if (x >= maxX) {
x = maxX;
}
if (y <= 0) {
y = 0;
} else if (y >= maxY) {
y = maxY;
}
// enlarge的位置
enlarge.style.left = x + "px";
enlarge.style.top = y + "px";
// 移动比例 (enlarge/min = max/img)
var yidongX = x / maxX;
var yidongY = y / maxY;
// 3.max的对应显示
img.style.left = yidongX * (max.clientWidth - img.offsetWidth) + "px";
img.style.top = yidongY * (max.clientHeight - img.offsetHeight) + "px";
}
}
</script>
注释都写在代码里了,其中鼠标进入小图片时的放大镜和大图片的出现比较简单,就是"display =none或block".
放大镜中心随鼠标移动而移动,需要用的两个属性clientX与clientY,鼠标距浏览器左边和上边的距离,它俩是实时获取的,只要鼠标动其值就跟着变化.设置放大镜移动的位置即距离左边的距离 ,设为x ,x = event.clientX - min.offsetLeft - enlarge.offsetWidth / 2,即鼠标的横向距离减去小图片距左边的距离再减去放大镜本身宽度的一般,这样就是放大镜中心随鼠标移动而移动(这里的min.offsetLeft值为8,是系统自带的外边距).垂直方向和水平方向一个原理,不再赘述了.
大图片的移动.鼠标移动多少,大图片移动相应的比例就OK了,这就是简单的数学问题了,"enlarge/min = max/img".注意大图片移动方向是和放大镜移动方向相反的,注意负号.
2.jQuery框架
jQuery框架就是js写的封装起来的库,对于不太会原生js的人后者不会前段的人来说是非常好用的.框架有很多,jQ只是一种,比较常用的一种.
(1)html和css部分的写法和原生js是一样的,这里就不再写了.
(2)jQuery部分
别忘了先导入jQ文件,我这里是 jquery-1.12.3.js
<script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 1.鼠标覆盖min 显示放大镜
$('.min').mousemove(function(e) {
$('.max').show()
$('.enlarge').show()
// 放大镜移动
// pageX/Y 相对于body内容的x/y(滚动条变化时跟随变化)
// offset().left 相当于 offsetLeft
var x = e.pageX - $('.min').offset().left - $('enlarge').width() / 2
var y = e.pageY - $('.min').offset().top - $('.enlarge').height() / 2
// 最大移动范围
var maxX = $('.min').width() - $('.enlarge').width()
var maxY = $('.min').height() - $('.enlarge').height()
// 范围约束
if (x <= 0) {
x = 0;
} else if (x >= maxX) {
x = maxX;
}
if (y <= 0) {
y = 0;
} else if (y >= maxY) {
y = maxY;
}
// 设置位置
$('.enlarge').css({
left: x,
top: y
})
// 2.放大镜移动 max上的图片等比例移动
var yidongX = x / maxX
var yidongY = y / maxY
$('.max>img').css({
left: -yidongX * ($('.max>img').width() - $('.max').width()),
top: -yidongY * ($('.max>img').height() - $('.max').height())
})
}).mouseout(function() {
$('.max').hide()
$('.fd').hide()
})
})
</script>
注释都写代码里了,思想是和原生js一样的.其实jQ要学的东西并不少,建议去W3C查询学习,像show(),hide(),offset()等都是封装好的函数.
由于jQ比较大,加载的时候会慢,很多大公司已经不再用jQ了,尽量用原生去写,建议要学前端的人一定要学好原生js
网友评论