放大鏡.gif
所謂的放大鏡效果其實(shí)是由兩張圖片來(lái)完成的,一張小圖片一張大圖片,鼠標(biāo)放在小圖片上移動(dòng),從而控制大圖片來(lái)移動(dòng),給人一張圖片被放大的錯(cuò)覺(jué).上面是效果圖:
1.原生js
(1)首先寫(xiě)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是淺藍(lán)色的放大鏡;
圖片就自己找吧...(上京東淘寶拽出來(lái)就行)
(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;"是把大圖片超出的部分隱藏
一開(kāi)始放大鏡enlarge和max都是隱藏的且不占文本流,所以都是"display: none;"
放大鏡enlarge最后要隨鼠標(biāo)移動(dòng)而移動(dòng),是通過(guò)改變其距左邊的距離而實(shí)現(xiàn)的,所以要設(shè)置定位"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.鼠標(biāo)覆蓋顯示max和enlarge
max.style.display = "block";
enlarge.style.display = "block";
// 離開(kāi)時(shí)隱藏
min.onmouseout = function () {
max.style.display = "none";
enlarge.style.display = "none";
}
// 2.enlarge的移動(dòng)范圍
min.onmousemove = function () {
// 鼠標(biāo)觸摸的點(diǎn)
var x = event.clientX - min.offsetLeft - enlarge.offsetWidth / 2;
var y = event.clientY - min.offsetTop - enlarge.offsetHeight / 2;
// 最大移動(dòng)距離
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";
// 移動(dòng)比例 (enlarge/min = max/img)
var yidongX = x / maxX;
var yidongY = y / maxY;
// 3.max的對(duì)應(yīng)顯示
img.style.left = yidongX * (max.clientWidth - img.offsetWidth) + "px";
img.style.top = yidongY * (max.clientHeight - img.offsetHeight) + "px";
}
}
</script>
注釋都寫(xiě)在代碼里了,其中鼠標(biāo)進(jìn)入小圖片時(shí)的放大鏡和大圖片的出現(xiàn)比較簡(jiǎn)單,就是"display =none或block".
放大鏡中心隨鼠標(biāo)移動(dòng)而移動(dòng),需要用的兩個(gè)屬性clientX與clientY,鼠標(biāo)距瀏覽器左邊和上邊的距離,它倆是實(shí)時(shí)獲取的,只要鼠標(biāo)動(dòng)其值就跟著變化.設(shè)置放大鏡移動(dòng)的位置即距離左邊的距離 ,設(shè)為x ,x = event.clientX - min.offsetLeft - enlarge.offsetWidth / 2,即鼠標(biāo)的橫向距離減去小圖片距左邊的距離再減去放大鏡本身寬度的一般,這樣就是放大鏡中心隨鼠標(biāo)移動(dòng)而移動(dòng)(這里的min.offsetLeft值為8,是系統(tǒng)自帶的外邊距).垂直方向和水平方向一個(gè)原理,不再贅述了.
大圖片的移動(dòng).鼠標(biāo)移動(dòng)多少,大圖片移動(dòng)相應(yīng)的比例就OK了,這就是簡(jiǎn)單的數(shù)學(xué)問(wèn)題了,"enlarge/min = max/img".注意大圖片移動(dòng)方向是和放大鏡移動(dòng)方向相反的,注意負(fù)號(hào).
2.jQuery框架
jQuery框架就是js寫(xiě)的封裝起來(lái)的庫(kù),對(duì)于不太會(huì)原生js的人后者不會(huì)前段的人來(lái)說(shuō)是非常好用的.框架有很多,jQ只是一種,比較常用的一種.
(1)html和css部分的寫(xiě)法和原生js是一樣的,這里就不再寫(xiě)了.
(2)jQuery部分
別忘了先導(dǎo)入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.鼠標(biāo)覆蓋min 顯示放大鏡
$('.min').mousemove(function(e) {
$('.max').show()
$('.enlarge').show()
// 放大鏡移動(dòng)
// pageX/Y 相對(duì)于body內(nèi)容的x/y(滾動(dòng)條變化時(shí)跟隨變化)
// offset().left 相當(dāng)于 offsetLeft
var x = e.pageX - $('.min').offset().left - $('enlarge').width() / 2
var y = e.pageY - $('.min').offset().top - $('.enlarge').height() / 2
// 最大移動(dòng)范圍
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;
}
// 設(shè)置位置
$('.enlarge').css({
left: x,
top: y
})
// 2.放大鏡移動(dòng) max上的圖片等比例移動(dòng)
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>
