2019獨角獸企業重金招聘Python工程師标準>>>
放大鏡效果
所謂的放大鏡效果其實是由兩張圖檔來完成的,一張小圖檔一張大圖檔,
滑鼠放在小圖檔上移動,進而控制大圖檔來移動,給人一張圖檔被放大的錯覺.上面是效果圖:
一、原生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".
注意大圖檔移動方向是和放大鏡移動方向相反的,注意負号.
二、jQuery寫法
(1)html和css部分的寫法和原生js是一樣的
(2)jQuery
<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> 轉載于:https://my.oschina.net/parchments/blog/3011548