<!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. PC结束 Spark 二次开发 收到自己主动，并允许好友请求

    本次Spark二次开发是为了客服模块的开发, 能让用户一旦点击该客服则直接自己主动加入好友.而客服放则需自己主动加入好友,不同弹出对话框进行允许,这方便的广大客服. 如今废话不多说,直接上代码. pa ...

  2. BZOJ 2115 Wc2011 Xor DFS+高斯消元

    标题效果:鉴于无向图.右侧的每个边缘,求一个1至n路径,右上路径值XOR和最大 首先,一个XOR并能为一个路径1至n简单的路径和一些简单的XOR和环 我们开始DFS获得随机的1至n简单的路径和绘图环所 ...

  3. Word2vec 讨论

    我没有在自然语言处理完成.但基于Deep Learning 关注,自然知道一些Word2vec强大. Word2vec 是google 在2013年提供的一款将词表征为实数值向量的高效工具.而Word ...

  4. 【翻译】在Ext JS 5应用程序中怎样使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...

  5. tomcat-jQ-springMVC-bootstrap

    基于tomcat-jQ-springMVC-bootstrap的公司产品管理WEB应用 管理员登录后台以后才能操作 ,权限管理只有一个管理员, 系统的主要作用是查看所有的 “公司列表”, 并查看该公司 ...

  6. JavaScript中null和undefined的总结

    先说null,它表示一个特殊值,常用来描述“空值”.对null执行typeof运算,结果返回字符串“object”,也就是说,可以将null认为是一个特殊的对象值,含义是“非对象”(感觉怪怪的).实际 ...

  7. AIX采用LV创ASM磁盘组

    CREATE ASM ON AIX LV DEVICE OS:AIX  6100-03 ASM版本号 10205 # lspv hdisk0          000d295a6d68902b     ...

  8. java 不寻常的问题 No bean named &#39;sessionFactory&#39; is defined 和 initialize a collection of role

    左右java的"No bean named 'sessionFactory' is defined "  现在经常出去SHH或在其框架内Sping+JPA使用底部HIbernate ...

  9. crawler_x-requested-with 请求头

    在分析微博热点话题时  拿到异步请求后,有个关键参数 x-request-with 不携带不给正确响应 在服务器端判断request来自Ajax请求(异步)还是传统请求(同步): 两种请求在请求的He ...

  10. SpringMVC1

    itRed You are never too old to set another goal or to dream a new dream. SpringMVC一路总结(一) SpringMVC听 ...