jQuery放大镜 实现图片的放大
@TOC使用jQuery实现简单的图片放大操作
一张图片的放大
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜title>
head>
<style>
*{margin:0px;padding:0;}
.small{
position: relative;
height: 400px;
margin-left: 5px;
}
.small img{
height: 400px;
}
.box{
position: absolute;
background: rgba(254, 238, 167, .4);
left:0;
top: 0;
display: none;
cursor: crosshair;
}
.big{
position:absolute;
top: 0px;
left:410px;
width: 400px;
height: 400px;
overflow: hidden;
display: none;
}
.big img{
position: relative;
}
style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">script>
<body>
<div class="wrap">
<div class="small">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
<div class="box">div>
div>
<div class="big">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
div>
div>
<script>
// 当鼠标移入到小图的盒子时，放大镜盒子和大图盒子显示出来
$('.small').mouseover(function(){
//放大镜盒子和大图盒子显示
$('.box').show();
$('.big').show();
//获取小图的图片的宽度，高度为400px
var width = $('.small img').width();
//获取大图的大小
var Bwidth = $('.big img').width();
var Bheight = $('.big img').height();
//设置放置小图盒子的宽度
$('.small').css('width',width+'px');
//设置放大镜滑块的大小
var Hwidth = ($('.big').width())/Bwidth*($('.small').width());
var Hheight = ($('.big').height())/Bheight*($('.small').height());
//设置放大镜盒子的大小
$('.box').css({'width':Hwidth + 'px','height':Hheight + 'px'});
//
//设置放大镜盒子移动事件
$('.small').mousemove(function(e){
//获取鼠标的位置
var x = e.clientX;
var y = e.clientY;
// console.log(x,y)
//设置鼠标在放大镜盒子的中心上
var xx = x - $('.box').width()/2;
var yy = y -$('.box').height()/2;
//设置使放大镜盒子不可以出边框
//最大边界
var maxX = $('.small').width()-$('.box').width();
var maxY = $('.small').height()-$('.box').height();
// console.log(maxX)
if (xx<0) {
xx = 0;
}
if (xx>maxX) {
xx = maxX;
}
if (yy<0){
yy = 0;
}
if (yy>maxY){
yy = maxY;
}
$('.box').css({'left':xx + 'px','top':yy + 'px'});
//
//设置大图跟着放大镜盒子移动
//查看放大的倍数，及大图的移动距离
//放大的图片的移动距离为放大镜盒子移动的距离*放大的倍数
var img_x = xx * ($('.big img').width()/$('.small img').width());
var img_y = yy * ($('.big img').height()/$('.small img').height());
//放大的图片的移动
$('.big img').css({'left':-img_x + 'px','top':-img_y + 'px'});
})
})
//鼠标离开放大镜盒子于大图盒子进行隐藏
$('.small').mouseout(function(){
$('.box').hide();
$('.big').hide();
})
script>
body>
html>
实现多张图片的放大镜效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜title>
head>
<style>
*{margin:0px;padding:0;}
.small{
position: relative;
height: 400px;
margin-left: 5px;
}
.small img{
height: 400px;
}
.box{
position: absolute;
background: rgba(254, 238, 167, .4);
left:0;
top: 0;
display: none;
cursor: crosshair;
}
.big{
position:absolute;
top: 0px;
left:410px;
width: 400px;
height: 400px;
overflow: hidden;
display: none;
}
.big img{
position: relative;
}
ul{
width: 570px;
border:1px dashed #ffdf;
}
ul li{
display: inline-block;
}
ul li img{
height: 156px;
}
style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">script>
<body>
<div class="wrap">
<div class="small">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
<div class="box">div>
div>
<div class="big">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">
div>
div>
<ul class="nav">
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561221109738&di=1c26477168b0ccfcce36da9cbd5c6829&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78c92e0e0ad029e5dc3e4f027beacc383eb31e902de17-e0ZWwL_fw658" alt="">li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561230022906&di=8808155e0d8e5d5fe083596b4cce9700&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fbed197486e6f662dbd5bf6c927611c460ad7a2674a5f0-KcQhBq_fw658" alt="">li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561230022906&di=c4412bc2c6c74b4fb8caeb0891a7367f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F34b5d2ff24b87494470669b0a1b7f541d9e785a428cc9-6UnUhC_fw658" alt="">li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561230022907&di=291e490c3643c4264eeb3c415eb0ebe2&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffc7b7a6caa33bc11eff990b8157dcd88eea8b0c124745-bLXnyq_fw658" alt="">li>
ul>
<script>
// 当鼠标移入到小图的盒子时，放大镜盒子和大图盒子显示出来
$('.small').mouseover(function(){
//放大镜盒子和大图盒子显示
$('.box').show();
$('.big').show();
//获取小图的图片的宽度，高度为400px
var width = $('.small img').width();
//获取大图的大小
var Bwidth = $('.big img').width();
var Bheight = $('.big img').height();
//设置放置小图盒子的宽度
$('.small').css('width',width+'px');
//设置放大镜滑块的大小
var Hwidth = ($('.big').width())/Bwidth*($('.small').width());
var Hheight = ($('.big').height())/Bheight*($('.small').height());
//设置放大镜盒子的大小
$('.box').css({'width':Hwidth + 'px','height':Hheight + 'px'});
//
//设置放大镜盒子移动事件
$('.small').mousemove(function(e){
//获取鼠标的位置
var x = e.clientX;
var y = e.clientY;
// console.log(x,y)
//设置鼠标在放大镜盒子的中心上
var xx = x - $('.box').width()/2;
var yy = y -$('.box').height()/2;
//设置使放大镜盒子不可以出边框
//最大边界
var maxX = $('.small').width()-$('.box').width();
var maxY = $('.small').height()-$('.box').height();
// console.log(maxX)
if (xx<0) {
xx = 0;
}
if (xx>maxX) {
xx = maxX;
}
if (yy<0){
yy = 0;
}
if (yy>maxY){
yy = maxY;
}
$('.box').css({'left':xx + 'px','top':yy + 'px'});
//
//设置大图跟着放大镜盒子移动
//查看放大的倍数，及大图的移动距离
//放大的图片的移动距离为放大镜盒子移动的距离*放大的倍数
var img_x = xx * ($('.big img').width()/$('.small img').width());
var img_y = yy * ($('.big img').height()/$('.small img').height());
//放大的图片的移动
$('.big img').css({'left':-img_x + 'px','top':-img_y + 'px'});
})
})
//
//实现图片的切换
$('.nav li').click(function(){
var Src = $(this).find('img').attr('src');
//设置小图和大图框子中的图片
$('.small img').attr('src',Src);
$('.big img').attr('src',Src);
})
//鼠标离开放大镜盒子于大图盒子进行隐藏
$('.small').mouseout(function(){
$('.box').hide();
$('.big').hide();
})
script>
body>
html>