<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>

    <title>loading</title>

</head>

<body>

    <a href="javascript:;" rel="http://www.zuixiaoyao.test/images/v2/index/header.jpg" id="fas" style="display:block;" onclick="creatediv(this)">

        <img src="erweima.jpg" />

    </a>

</body>

</html>

<script>

    function getPos(element){

        if ( arguments.length != 1 || element == null ) {

            return null;

        }

        var offsetTop = element.offsetTop;

        var offsetLeft = element.offsetLeft;

        var offsetWidth = element.offsetWidth;

        var offsetHeight = element.offsetHeight;

        while( element = element.offsetParent ) {

            offsetTop += element.offsetTop;

            offsetLeft += element.offsetLeft;

        }

        return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,

            offsetWidth: offsetWidth, offsetHeight: offsetHeight };

    }

    function creatediv(elm){

        var deld = document.getElementById('version_sz_h');

        if(deld && deld.parentNode && deld.tagName != 'BODY'){

            deld.parentNode.removeChild(deld);

        }

        var div = document.createElement('div');

        var pos = getPos(elm);

        div.id = 'version_sz_h';

        div.style.position = 'absolute';

        div.style.zIndex = 99999;

        div.style.top = pos.absoluteTop +'px';

        div.style.left = pos.absoluteLeft +'px';

        div.style.width = '35px';

        div.style.height = '35px';

        var img = '<img src="loading.gif" width="35px" height="35px"/>';

        div.innerHTML = img;

        var image = new Image();

        image.onload = function(){

            var w = this.width;

            var h = this.height;

            var b = w/h;//>1 宽屏图片 <1 长形图片

            div.innerHTML = '<img src="'+ elm.getAttribute('rel') +'" width="100%" height="100%" style="cursor:pointer;" id="hoverImg"/>';

            var Lw = 0;

            var Lh = 0;

            var timer = setInterval(function(){

                if(b >= 1){//宽屏

                    Lh += 10;

                    Lw += 10*b;

                }else{

                    Lw += 10;

                    Lh += 10*b;

                }

                if((Lh+35) >= h && (Lw+35) >= w){

                    div.style.width = w + 'px';

                    div.style.height = h + 'px';

                    window.clearInterval(timer);

                }else{

                    div.style.width = 35 + Lw +'px';

                    div.style.height = 35 + Lh +'px';

                }

            },10);

            var imgBox = document.getElementById('hoverImg');

            var flag = 1;

            imgBox.onclick = function(){

                if(flag){

                    var Lh = h;

                    var Lw = w;

                    var timer1 = setInterval(function(){

                        if(b >= 1){//宽屏

                            Lh -= 10;

                            Lw -= 10*b;

                        }else{

                            Lw -= 10;

                            Lh -= 10*b;

                        }

                        if(Lh <= 0 && Lw <= 0){

                            div.style.width = '0px';

                            div.style.height = '0px';

                            window.clearInterval(timer1);

                                if(div && div.parentNode && div.tagName != 'BODY'){

                                    div.parentNode.removeChild(div);

                                }

                        }else{

                            div.style.width = Lw +'px';

                            div.style.height = Lh +'px';

                        }

                    },10);

                    flag = 0;

                }

            }

        }

        image.src = elm.getAttribute('rel');

        document.body.appendChild(div);

    }

</script>

js 图片点击放大功能的更多相关文章

  1. vue图片点击放大功能

    因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换.当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不 ...

  2. ios开发图片点击放大

    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...

  3. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  4. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  5. Android中Textview显示Html，图文混排，支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

  6. 微信企业号办公系统-图片预览放大功能-previewImage

    在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...

  7. 动画--android图片点击放大动画，并遮挡旁边的控件

    http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...

  8. 自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

  9. Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效

    文章目录 广告: 背景 发现 解决 get技能 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.git ...

随机推荐

  1. 走向DBA[MSSQL篇] 针对大表 设计高效的存储过程【原理篇】 附最差性能sql语句进化过程客串

    原文:走向DBA[MSSQL篇] 针对大表 设计高效的存储过程[原理篇] 附最差性能sql语句进化过程客串 测试的结果在此处 本篇详解一下原理 设计背景 由于历史原因,线上库环境数据量及其庞大,很多千 ...

  2. Nginx模块开发入门（转）

    前言 Nginx是当前最流行的HTTP Server之一,根据W3Techs的统计,目前世界排名(根据Alexa)前100万的网站中,Nginx的占有率为6.8%.与Apache相比,Nginx在高并 ...

  3. 大约 C++ 几个方面分析--overload, override, overwrite, rewrite

    overload, override, overwrite, rewrite 这几个单词常常出如今 C++ 书中,翻阅一些译版后发现并未对 override, overwrite, rewrite 严 ...

  4. socket-详细分析No buffer space available（转）

    新年上班第一天,突然遇到一个socket连接No buffer space available的问题,导致接口大面积调用(webservice,httpclient)失败的问题,重启服务器后又恢复了正 ...

  5. 【剑指offer】数字数组中只出现一次（2）

    转载请注明出处:http://blog.csdn.net/mmc_maodun/article/details/27800577 题目:一个int数组中有三个数字a.b.c仅仅出现一次,其它数字都出现 ...

  6. 五通信算法：五种编码增益比较matlab模拟

    1. 卷积编码增益性能.BER 信道环境:AWGN 信噪比SNR :0:0.1:6 MATALB仿真架构:源比特 +卷积码 +BPSK +AWGN +Viterbi +BER 说明:卷积编码,不同的R ...

  7. hdu 4445 Crazy Tank （暴力枚举）

    Crazy Tank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. jsp 说明标签

    page指令 Page指令用来定义整个JSP页面的一些属性和这些属性的值. 比如我们能够用page指令定义JSP页面的contentType属性的值是text/html;charset=GB2312, ...

  9. bnu 34986 Football on Table(数学+暴力)

    pid=34986" target="_blank" style="">题目连接:bnu 34986 Football on Table 题目大 ...

  10. javascript系列之DOM(二)

    原文:javascript系列之DOM(二) 原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一 ...