JQ的简易应用一则（放大）

最新推荐文章于 2020-11-16 14:08:53 发布
最新推荐文章于 2020-11-16 14:08:53 发布
阅读量186 收藏
点赞数 2
文章标签： 放大 JQ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42275455/article/details/82591205
版权

若未使用JQ，请先配置jq环境
http://jquery.com/download/

简易放大镜功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #contain{
        position: absolute;
        width: 500px;
        height: 500px;
        border: 2px solid #000000;
    }
    .dd{
        position: absolute;
        width: 200px;
        height: 200px;
        float: left;
        border: 1px solid yellow;
    }
    img{
        width: 200px;
        height: 200px;
    }
    #div2{
        margin-left: 300px;
        margin-top:1px;
    }
    #div3{
        margin-left: 0px;
        margin-top:300px;
    }
    #div4{
        margin-left: 300px;
        margin-top:300px;
    }
    #big{
        position:absolute;
        width: 400px;
        height: 400px;
        background-color: green;
        display: none;
        border: 1px solid blue;
    }
    </style>
</head>
<body id="test">
    <div id="contain">
    <div class="dd" id="div1"><img src="gou.jpg"></div>
    <div class="dd" id="div2"><img src="niu.jpg"></div>
    <div class="dd" id="div3"><img src="she.jpg"></div>
    <div class="dd" id="div4"><img src="shu.jpg"></div>
    </div>
    <div id="big"></div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#div1").mousemove(function(e) {
        var x = e.originalEvent.x || e.originalEvent.layerX || 0;
        var y = e.originalEvent.y || e.originalEvent.layerY || 0;
        var xx=x+300;
        var yy=y+50;
            $('#big').css({'background-image':'url(gou.jpg)','background-size':'100% 100%','display':'block'});
             $('#big').css('marginLeft',xx);
             $('#big').css('marginTop',yy);
        })
        $("#div1").mouseout(function() {
             $('#big').css({'display':'none'});
        })
        $("#div2").mousemove(function(e) {
        var x = e.originalEvent.x || e.originalEvent.layerX || 0;
        var y = e.originalEvent.y || e.originalEvent.layerY || 0;
        var xx=x+300;
        var yy=y+50;
            $('#big').css({'background-image':'url(niu.jpg)','background-size':'100% 100%','display':'block'});
             $('#big').css('marginLeft',xx);
             $('#big').css('marginTop',yy);
        })
        $("#div2").mouseout(function() {
             $('#big').css({'display':'none'});
        })
        $("#div3").mousemove(function(e) {
        var x = e.originalEvent.x || e.originalEvent.layerX || 0;
        var y = e.originalEvent.y || e.originalEvent.layerY || 0;
        var xx=x+300;
        var yy=y-400;
            $('#big').css({'background-image':'url(she.jpg)','background-size':'100% 100%','display':'block'});
             $('#big').css('marginLeft',xx);
             $('#big').css('marginTop',yy);
        })
        $("#div3").mouseout(function() {
             $('#big').css({'display':'none'});
        })
        $("#div4").mousemove(function(e) {
        var x = e.originalEvent.x || e.originalEvent.layerX || 0;
        var y = e.originalEvent.y || e.originalEvent.layerY || 0;
        var xx=x+300;
        var yy=y-400;
            $('#big').css({'background-image':'url(shu.jpg)','background-size':'100% 100%','display':'block'});
             $('#big').css('marginLeft',xx);
             $('#big').css('marginTop',yy);
        })
        $("#div4").mouseout(function() {
             $('#big').css({'display':'none'});
        })
        })
</script>
</body>
</html>
命名不规范者
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jQuery实现放大图效果
ChrngFu的博客
08-04 507
一、首先我们需要把页面画出来 1，画出框架 <div class="box"> <div class="tupian"> <img src="https://img14.360buyimg.com/n0/jfs/t1/178469/14/4616/143349/60a26b86E45e2c962/1f93da665f0970f6.jpg"> <div...
jq 实现局部放大效果
yanpengfeil的博客
04-21 854
针对这个功能真的着实研究了两天，其实是有插件的，但是不适用于当前项目要求，没办法，上手盘它.... 此次的需求： 列表图片需要具有缩略图，展示图，局部放大图...插件都是单一的，所以并不适用列表，文末会有效果图。 遇到了一些问题，记录下： 问题汇总： 1. 在页面初始化完成的时候，通过以下方式设置的各种事件无效。 $(function(){ ...
JQ 图片放大
07-20
Jquery 插件图片放大效果(兼容ie 火狐 谷歌 Safari)
jq放大图片
黎成诃月的博客
01-17 399
$(".list-item").hover(function(){         $(this).children(".list-scale").addClass("scaleMax")     },function(){         $(this).children(".list-scale").removeClass("scaleMax")     }); .bigImg-text{
jq点击按钮放大查看图片
10-20
jq放大图片查看，可以用键盘左右键切换图片，无缝衔接，弹窗式放大
jq封装放大镜.rar
06-18
1. **选择元素**：使用jQuery的选择器选取需要应用放大镜效果的图片元素，如`$("#productImage")`。 2. **创建容器**：在图片旁边创建一个透明的div作为放大镜的容器，用于显示放大的图像部分。容器的大小和位置...
jq应用程序文件夹特效代码
03-20
【jq应用程序文件夹特效代码】是一个关于使用JavaScript库jQuery（jq）来实现应用程序文件夹样式的特效代码资源。虽然描述部分没有提供具体信息，但从标题和标签我们可以推测，这个压缩包可能包含了一些用于创建交互...
jq zoom实现图片放大缩小
02-11
在网页设计中，图片放大和缩小功能是一种常见的用户体验优化手段，尤其在展示商品细节或艺术作品时尤为重要。jQuery Zoom插件就是为此目的而设计的，它允许用户在不离开页面的情况下，通过鼠标悬停或者点击来查看...
JQ 放大镜
08-13
"JQ 放大镜"是一个基于jQuery的插件，用于实现网页中图片的放大效果，常见于电商网站的产品展示。这个插件提供了一个交互式的界面，用户可以通过鼠标悬停在图片上，看到一个放大的预览区域，从而更清晰地查看图片...
jquery 实现点击图片放大效果
02-21
jquery 实现点击图片放大效果
jQuery提供两种点击图片放大效果
12-09
jQuery提供两种点击图片放大效果，jQuery提供两种点击图片放大效果jQuery提供两种点击图片放大效果
jquery 点击图片放大，再点击缩小（针对同一张图片）
09-27
一个简单的 针对同一张图片，点击图片放大，再点击缩小.
jQ场景局部放大效果zip
07-03
jQ场景局部放大效果是一款基于jquery css3实现的图片某些部分放大效果。 jQ场景局部放大效果演示图：
Jquery图片放大
aKuang_JH的博客
09-26 593
实现目的： 1.鼠标悬浮在图片上，图片放大，并显示对应信息。 2.点击跳转页面，显示对应信息，购买增加表格记录。 效果图： 图片放大 图1-1
jquery图片放大
或非与博客
03-11 1409
jquery 图片放大 <html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://www.mmogapower.co/catalog/view/script/js/common/jquery.jqzoom-...
jq图片放大缩小
xiaoyun888_的博客
11-16 149
css部分： .pic01{ width: 100px !important; height: 100px; } .pic02{ display: none; } .pic02 img{ z-index: 11; width: 300px; height: 300px; .
超简单jq完成点击图片放大功能
weixin_42157001的博客
07-17 6810
后台小伙伴给的需求，本想找找类似的插件使用一下算了，想了想这个功能好像也不是很难实现，况且安装插件要先查找很多，然后筛选自己合适的，下载，导入，太麻烦了，不如自己手写。 基本需求是引入 jquery.js 文件，去jquery官网下载最新版就行； <body> <img class="pic01" src="11.jpg" alt=""> &lt...
【JQ】点击图片放大缩小（等比例放大）
longlongfishday的博客
09-04 1645
图片放大缩小demo ①文件路径 ②enlarge.html <!DOCTYPE html> <script src="jquery/jquery-3.4.1.min.js"></script> <script src="../0903/enlarge.js"></script> <html lang ="en">...
jquery 点击图片放大效果 基于thinkphp
aiku_de_yu的博客
02-28 1315
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; cha
写一个jq实现二维码放大
最新发布
04-25
好的，以下是一个简单的使用jQuery实现二维码放大的示例代码： HTML代码： ``` <div class="qrcode"> <img src="二维码地址" alt="二维码" /> </div> ``` CSS代码： ``` .qrcode { position: relative; } .qrcode img { display: block; width: 100%; height: auto; } .qrcode .popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; z-index: 999; } .qrcode .popup img { display: block; max-width: 300px; max-height: 300px; } ``` JavaScript代码： ``` $(document).ready(function() { $('.qrcode').hover(function() { var src = $(this).find('img').attr('src'); $(this).append('<div class="popup"><img src="' + src + '"/></div>'); $(this).find('.popup').fadeIn(200); }, function() { $(this).find('.popup').fadeOut(200, function() { $(this).remove(); }); }); }); ``` 解释一下代码：首先，HTML代码中有一个包含二维码图片的div元素。CSS代码中，我们将该元素设置为相对定位，二维码图片设置为100%的宽度和自适应的高度。我们还定义了一个名为“popup”的绝对定位元素，用于展示放大后的二维码图片，初始状态设置为不显示。JavaScript代码中，我们使用jQuery的hover方法监听该元素的鼠标进入和离开事件，当鼠标进入时，我们将该元素内部加入一个.popup元素，并将其内部的img元素的src属性设置为鼠标悬停在的二维码图片的地址，然后使用fadeIn方法显示.popup元素；当鼠标离开时，我们使用fadeOut方法隐藏.popup元素，完成隐藏后再将.popup元素从该元素中移除。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值