html实现点击图片放大功能_html点击放大图片-程序员宅基地

技术标签: css  html5  前端  js  

<html>
<head>
    <style>
        .tmpContainer {
    z-index:101;position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center;}
        .bg {
    z-index:100; position: fixed; left:0; top:0; width:100%;}
    </style>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="bg"></div><!--遮罩层-->
<div class="amplify">
    <img src="img.jpg"/>
</div>
<script>
    $(document).ready(function () {
    
        var imgsObj = $('.amplify img');//获取需要放大的图像
        if(!imgsObj){
    
            return;
        }
        $.each(imgsObj,function(){
    
            $(this).click(function(){
    
                var tmpContainer = $('<div class=tmpContainer></div>');
                var currImg = $(this);
                coverLayer(1);
                with(tmpContainer){
    
                    appendTo("body");
                    var windowWidth=$(window).width();
                    var windowHeight=$(window).height();
                    //获取原图宽度、高度
                    var originalImg = new Image();
                    originalImg.src =currImg.attr("src") ;
                    var currImgWidth= originalImg.width;
                    var currImgHeight = originalImg.height;
                    if(currImgWidth<windowWidth){
    //图片宽度较小的时候,保留原图
                        if(currImgHeight<windowHeight){
    
                            var topHeight=(windowHeight-currImgHeight)/2;
                            if(topHeight>35){
      //兼容微信浏览器,使图片高度上居中显示在整个手机屏幕中
                                topHeight=topHeight-35;
                                css('top',topHeight);
                            }else{
    
                                css('top',0);
                            }
                            html('< img src=' + currImg.attr('src') + ' border=0>');
                        }else{
    
                            css('top',0);
                            html('< img src=' + currImg.attr('src') + ' height='+windowHeight+'  border=0>');
                        }
                    }else{
    
                        var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                        if(currImgChangeHeight<windowHeight){
    
                            var topHeight=(windowHeight-currImgChangeHeight)/2;
                            if(topHeight>35){
    
                                topHeight=topHeight-35;
                                css('top',topHeight);
                            }else{
    
                                css('top',0);
                            }
                            html('< img src=' + currImg.attr('src') + ' width='+windowWidth+'  border=0>');
                        }else{
    
                            css('top',0);
                            html('< img src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+' border=0>');
                        }
                    }
                }
                tmpContainer.click(function(){
    
                    $(this).remove();
                    coverLayer(0);
                });
            });
        });

        //使用禁用蒙层效果
        function coverLayer(tag){
    
            with($('.bg')){
    
                if(tag){
    
                    css('height',$(document).height());
                    css('display','block');
                    css('opacity',1);
                    css("background-color","#fff");
                    css("background-color","rgba(0,0,0,0.6)" );  //蒙层透明度
                }else{
    
                    css('display','none');
                }
            }
        }
    });
</script>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/da13122318861/article/details/103823092

智能推荐

CSS3 基础(1)——选择器详解-程序员宅基地

文章浏览阅读115次。CSS3选择器详解一、 属性选择器  在CSS3中,追加了三个属性选择器分别为:[att*=val]、[att^=val]和[att$=val],使得属性选择器有了通配符的概念。选择器示例描述[attribute^=value][src^="https"]选择每一个src属性的值以"https"开头的..._1 2 3 4 5 documen

【模板】最短路_c++求图上最短路-程序员宅基地

文章浏览阅读493次。Floyd 这是DP!DP!DP!int V, E; int d[MAX_V][MAX_V]; void Floyd() { for(int k = 1; k <= V; k+ +) for(int i = 1; i <= V; i ++) for(int j = 1; j <= V; j ++)_c++求图上最短路

动态规划 解 青蛙跳石过河-程序员宅基地

文章浏览阅读2.4k次。题目描述:A frog is crossing a river. The river is divided intox units and at each unit there may ormay not exist a stone. The frog can jump on a stone, but it must not jump into the water.If the f_青蛙跳石

js实现一键复制功能_scriptvar clipboard = new clipboard( .copy-btn , [-程序员宅基地

文章浏览阅读845次。原生实现function copy(data){ var oInput = document.createElement("input"); oInput.value = data; document.body.appendChild(oInput); oInput.select(); document.execCommand("Copy"); oInput.className = "oInput"; oInput.style.display ._scriptvar clipboard = new clipboard( .copy-btn , [text: function. return doc

用计算机弹的铺子,干货铺子 • 计算机二级报名指南-程序员宅基地

文章浏览阅读105次。原标题:干货铺子 • 计算机二级报名指南 计算机二级 江西省2018年3月全国计算机等级考试(NCRE)考生需登陆江西省教育考试院官网进行报名网上注册报名时间:2017年12月18日08:00—28日18:00考试时间:2018年3月24日—26日 啦啦啦~计算机二级的报考已经开始啦~充满智慧的干货也来了~轻松备考哦~Pass!Pass!Pass! 考试简介“全国计算机等级考试(National ..._用计算机弹工营

hadoop集群中存在配置较低的数据节点应用如何应对磁盘数据溢满的问题之rebalance_hadoop从节点内存溢满-程序员宅基地

文章浏览阅读866次。一般情况下集群在数据盘配置一样,几乎使用不到rebalance,但是我们的集群中有一个比较小的数据节点,因此我们需要关注各节点数据分布情况,及时进行rebalance。2、因为rebalance期间需要占用集群资源,因此尽快完成比较重要可以使用setBalancerBandwidth设置来增加每秒流量。我们为什么使用方案一,因为我们仅仅是将配置较低的节点当做计算节点使用,并非数据节点。登录hdfs web ui发现集群中一个节点的负载远高于另外的节点。1、启动rebalance。_hadoop从节点内存溢满

随便推点

JDBC访问数据库的步骤,以及三种数据库的驱动和连接字符串_goldendb连接串如何写-程序员宅基地

文章浏览阅读1k次。一、JDBC访问数据库的具体步骤:1.导入数据库的驱动,加载具体的驱动类2.与数据库建立连接3.发送sql语句,执行4.处理结果集(查询)**二、三种数据库的具体驱动:** 1.Oracle:驱动jar:ojdbc-x.jar具体驱动类:Oracle.jdbc.OracleDriver连接字符串:jdbc:oracle:thin:@localhost:1521:OR......_goldendb连接串如何写

并发、消息队列、缓存_消息队列与缓存的区别-程序员宅基地

文章浏览阅读4.3k次,点赞3次,收藏7次。"并发"会引发关于"顺序"的问题,及如何能够在使用高并发提高效率的同时,又在一定程度上能够控制/维持一定的操作顺序。更广泛的,有关并发的"锁"操作,也都会围绕同样的思路来解决问题。没有银弹。想要在维持并发的同时,通过什么魔法来同时维持顺序是不可能的。最基本的核心想法是,将并发的操作变为串行,那么操作也就自然会有了顺序。这是一个看似有些矛盾的解决方案。并发的目的不就是为了提高效率么?!如果将并..._消息队列与缓存的区别

从nacos客户端的TIME_WAIT说起_nacos timed_waiting-程序员宅基地

文章浏览阅读802次。问题起因前段时间调研nacos,用来代替zookeeper当作dubbo的注册中心,使用的是nacos的1.1.4版本。还用了nacosSync,一款nacos提供的迁移工具,可将常见的注册中心上的服务同步到nacos上。这玩意很不好用,至少不是生产级别的工具。但这与本文无关,后面会专门写一篇文章来介绍这个同步工具的优缺点,以及生产级别还需要做哪些改造。开始测试时,总有服务莫名奇妙的下线了,一直找不到原因。后来在调研的过程中,nacos发布了1.2.0-beta.0版本,于是去github上看了1.2.0_nacos timed_waiting

FL Studio21.1无限试用版体验新功能变化介绍_fl试用版能用多久-程序员宅基地

文章浏览阅读341次。许多刚刚接触音乐创作的新朋友,通过各种渠道了解到FL Studio,但并不知道我们的历史以及在音乐创作方面所产生的影响,今天分享一篇来自coco玛奇朵博主Rio的深度科普文章,相信对新人会有很大启发。_fl试用版能用多久

专题论坛 | 时空知识图谱与地理大模型(SpatialDI2024)-程序员宅基地

文章浏览阅读45次。原文来源于微信公众号“ACM SIGSPATIAL CHN分会”。转载或者引用本文请注明来源及原作者,版权归原作者及刊载媒体所有。ACM SIGSPATIAL中国分会致力于推动空间数据的研究范式及空间智能理论与技术在时空大数据、智慧城市、交通科学、社会治理等领域的创新与应用。为进一步促进空间数据智能研究的理论发展与应用,交流相关领域的新理论、新问题、新方法,ACM SIGSPATIAL中国分会创办..._基于北斗高精度时空信息和位置语义图谱的地理交通时空大模型构建

关于compile() 函数简单实用示例_c#的compile用法-程序员宅基地

文章浏览阅读1.4k次。3、AST分析和修改:将源代码字符串编译为AST对象,然后使用ast模块进行分析和修改操作,例如静态代码分析、代码转换等。1、动态执行代码:可以将源代码字符串编译为代码对象,然后使用exec()函数执行。2、动态求值表达式:将单个表达式编译为代码对象,然后使用eval()函数求值。在使用某些代码需要提炼出公共的代码块是可以使用,方便后续的使用和添加;compile将代码编译为代码对象,应用在代码中可以提高效率。首先code下新建demo.py。编写调用脚本test.py。返回表达式执行结果。_c#的compile用法