温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么利用jQuery实现图片放大镜

发布时间:2020-12-09 09:52:32 来源:亿速云 阅读:265 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关怎么利用jQuery实现图片放大镜,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

一、需求分析

图片的放大效果我们在软件开发中经常遇到,其相当于放大镜效果。我们在平时的网购中可以看到,我们在浏览一商品时,单击一张图片,其左侧会展示一张商品的图片,当鼠标移动到图片上时就会在右侧展示局部放大的效果

二、设计思路

1、当鼠标移入到小图的盒子时,如何显示放大镜盒子和大图盒子?

2、如何获取小图图片和大图图片的宽度和高度?

3、如何设置放置小图盒子的宽度

4、如何设置放大镜滑块和盒子的大小

5、何设置放大镜盒子移动事件

6、如何设置鼠标在放大镜盒子的中心上?

7、如何设置使放大镜盒子不可以出边框?

8、如何设置大图跟着放大镜盒子移动?

9、放大的图片的移动距离如何设置?

10、如何计算放大的图片的移动距离?

11、当鼠标移入到小图的盒子时,如何隐藏放大镜盒子和大图盒子?

三、知识储备

1. 实现图片放大镜的原理:

(1)给放大镜元素一个对应的html元素为<div>

(2)设置这个div的宽高固定为某个值;

(3)设置div的css为超出部分隐藏;

(4)div中嵌套子元素img设置宽高固定为某个值;

(5)通过数学函数计算,移动div的x轴和y轴的滚动条,正好让放大镜显示鼠标在大图的那一块区域。

2. jQuery选择器的分类

怎么利用jQuery实现图片放大镜

3. 常见的jQuery事件

(1)页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。常见的事件有:在元素上移动鼠标、选取单选按钮、点击元素…

(2)在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。

怎么利用jQuery实现图片放大镜

4. 鼠标位置获取。

怎么利用jQuery实现图片放大镜

5. jQuery中的常见的DOM操作:查找元素、遍历元素、创建元素、插入元素、删除元素、替换元素、复制元素、属性操作、样式操作、HTML操作。&oq=查找元素、遍历元素、创建元素、插入元素、删除元素、替换元素、复制元素、属性操作、样式操作、HTML操作。

四、代码实现

1、在页面布局的DIV下添加三个DIV标签;

<!-- 定义一个盒子存放缩略图 -->

              <div>
                     <!-- 盒子中的图片 -->
                     <img src="img/1.jpg" alt="">
                     <!—定义一个盒子来存放放大镜 -->
                     <div></div>
              </div>
              <!—定义一个盒子来存放放大后图片-->
              <div>
                     <img src="img/1.jpg" alt="">
              </div>

2、使用CSS进行美化

l  全局样式

*{
              margin: 0;
              padding: 0;
}

l  .small样式

.small{
                     position: relative;
                     height: 400px;
                     margin-left: 5px;
              }

l  .small img样式

.small img{
                     height: 360px;
                     width:  620px;
              }

l  .box样式

.box{
                     position: absolute;
                     background: rgba(254, 238, 167, .4);
                     left:0;
                     top: 0;
                     display: none;
                     cursor: crosshair;
              }

l  .big样式

.big{
                     position:absolute;
                     top: 0px;
                     left:410px;
                     width: 600px;
                     height: 360px;
                     overflow: hidden;
                     display: none;
              }

l  .big img样式

.big img{
                     position: relative;
              }

3、使用jQuery实现效果

1)    将放大镜盒子和大图盒子显示出来,代码如下:

$('.box').show();
$('.big').show();

2)  获取小图片的宽度和高度,代码如下:

var width = $('.small img').width();
var height=$('.small img'). height ();

3)  获取大图片的宽度和高度,代码如下:

var Bwidth = $('.big img').width();
var Bheight = $('.big img').height();

4)  设置放置小图盒子的宽度,代码如下:

$('.small').css('width',width+'px');

5)  设置放大镜滑块的大小,代码如下:

var Hwidth = ($('.big').width())/Bwidth*($('.small').width());
var Hheight = ($('.big').height())/Bheight*($('.small').height());

6)  设置放大镜盒子的大小

$('.box').css({'width':Hwidth + 'px','height':Hheight + 'px'});

7)  设置放大镜盒子移动事件

$('.small').mousemove(function(e){
//获取鼠标的位置,代码如下:
var x = e.clientX;
var y = e.clientY;
//设置鼠标在放大镜盒子的中心上,代码如下:
var xx = x - $('.box').width()/2;
var yy = y -$('.box').height()/2;
//设置使放大镜盒子不可以出边框,代码如下:
var maxX = $('.small').width()-$('.box').width();
var maxY = $('.small').height()-$('.box').height();
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();
}) 
})

五、结果展示

怎么利用jQuery实现图片放大镜

关于怎么利用jQuery实现图片放大镜就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI