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

智能推荐

vue3+vite+ts项目配置开发环境和生产环境 打包命令配置_vite打包配置-程序员宅基地

文章浏览阅读8.4k次,点赞6次,收藏29次。开发环境和生产环境的配置和打包方式有所不同,下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。打包完成后会在项目根目录下生成dist目录,里面包含了打包后的静态文件和index.html文件,可以直接部署到服务器上。这里配置了三个命令,分别是开发环境启动命令、开发环境打包命令和生产环境打包命令。1.3 配置.env.development。2.2 配置.env.production。1.2 配置vite.config.ts。2.1 配置vite.config.ts。_vite打包配置

(最新最详细)安装ubuntu18.04-程序员宅基地

文章浏览阅读2w次,点赞4次,收藏91次。目录1. window10中下载ubuntu镜像2. 制作U盘启动盘3. Ubuntu 分配硬盘空间1. window10中下载ubuntu镜像下载地址2. 制作U盘启动盘安装制作工具:UltraISO(点我下载),下载完成后安装插入用来做启动盘的U盘(最好是usb3.0接口,16GB或以上),并清空里面的文件打开安装好的UltraISO,点击继续试用按钮工作界面进入工作界面后,点击菜单栏文件(F),在弹出的选项卡里点击打开在弹出的文件选择对话框中找到下载好的 Ubuntu18.04._ubuntu18.04

Toad报“No valid Oracle Client found”错-程序员宅基地

文章浏览阅读203次。2019独角兽企业重金招聘Python工程师标准>>> ..._toad no valid oracle client

MySQL数据库入侵及防御方法-程序员宅基地

文章浏览阅读521次。来自:http://blog.51cto.com/simeon/1981572作者介绍陈小兵,高级工程师,具有丰富的信息系统项目经验及18年以上网络安全经验,现主要从事网络安全及数据库技术研究工作。《黑客攻防及实战案例解析》《Web渗透及实战案例解析》《安全之路-Web渗透及实战案例解析第二版》《黑客攻防实战加密与解密》《网络攻防实战研究:漏洞利用与提权》作者,在国内多本学术期..._mysql 5.0.16入侵

SQL Server SSMS历史版本下载地址-程序员宅基地

文章浏览阅读135次。https://learn.microsoft.com/zh-cn/sql/ssms/release-notes-ssms?view=sql-server-ver16#previous-ssms-releases_sql server历史版本哪儿下

【狂神JAVA】MyBatis笔记_jdk1.7的mybatis-程序员宅基地

文章浏览阅读2.5k次。简介自学的【狂神JAVA】MyBatis分享自写源码和笔记,希望对大家有帮助本人配置jdk13.0.2 (jdk1.7以上均可)Maven 3.6.3MySQL 5.7.23 (mysql5.6以上均可)1. 配置官网文档: https://mybatis.org/mybatis-3/zh/getting-started.htmlpom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://_jdk1.7的mybatis

随便推点

Java并发——Synchronized关键字和锁升级,详细分析偏向锁和轻量级锁的升级_3.轻量级锁-程序员宅基地

文章浏览阅读10w+次,点赞266次,收藏1.1k次。目录一、Synchronized使用场景二、Synchronized实现原理三、锁的优化1、锁升级2、锁粗化3、锁消除一、Synchronized使用场景Synchronized是一个同步关键字,在某些多线程场景下,如果不进行同步会导致数据不安全,而Synchronized关键字就是用于代码同步。什么情况下会数据不安全呢,要满足两个条件:一是数据共享(临界资源),二..._3.轻量级锁

排序算法-堆积树排序法(HeapSort)-程序员宅基地

文章浏览阅读731次。堆积树排序法是选择排序法的改进版,可以减少在选择排序法中的比较次数,进而减少排序时间。堆积排序法用到了二叉树的技巧,是利用堆积树来完成排序的。堆积树是一种特殊的二叉树,可分为最大堆积树和最小堆积树两种。

Hadoop调优第一篇_hadoop_namenode_opts-程序员宅基地

文章浏览阅读917次。1.hdfs核心参数——回收站设置第一步,在调优前我们需要对namenode与datanode的内存配置进行参数化设置。通过hadoop-env.sh查看namenode与datdanode的具体参数。相关参数设置如下export HDFS_NAMENODE_OPTS=”-Dhadoop.security.logger=INFO,RFAS -Xmx1024m”export HDFS_DATANODE_OPTS=”-Dhadoop.security.logger=ERROR,RFAS -Xmx10_hadoop_namenode_opts

Studio 3T for MongoDB 激活破解脚本_studio 3tjihuoma-程序员宅基地

文章浏览阅读1.9w次,点赞2次,收藏27次。Studio 3T试用期过了不能使用,网上未搜索到相对应的激活码,可以选择重置使用时间继续使用。_studio 3tjihuoma

数据结构实验5《基于哈夫曼树的数据压缩》_基于哈夫曼树的数据压缩算法c语言-程序员宅基地

文章浏览阅读2k次,点赞4次,收藏25次。(visual studio 2019可运行)输入及输出要求见《数据结构C语言(第二版)》严蔚敏版【本文仅用于啥都看不懂还想交作业选手】#include<iostream>#include<map>#include<string>#include<stdio.h>#include<memory.h>using namespace std;typedef struct{ char c; int weight; in_基于哈夫曼树的数据压缩算法c语言

Teams Bot App 代码解析_adaptivecards.declare<datainterface>(rawlearncard)-程序员宅基地

文章浏览阅读1w次。Teams Bot App 代码解析_adaptivecards.declare(rawlearncard).render(this.likecountobj)