<!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. Team Foundation Server 2015使用教程--默认团队成员添加

  2. 解决win10客户机本地账户登陆导致远程桌面没法访问问题

    情景:客户机器如果是win10本地账户,我们远程桌面连接是可能会没法访问. 如果客户机器切换到win10 Microsoft账户登录,远程桌面就可以访问了(当然用户肯定不能给你说自己的Microsof ...

  3. 库函数atoi()的实现

    int atoi(const char *nptr); 假设第一个非空格字符存在,是数字或者正负号则開始做类型转换,之后检測到非数字(包含结束符 \0) 字符时停止转换.返回整形数. 否则,返回零. ...

  4. nefu117 素数个数的位数，素数定理

    素数个数的位数 Time Limit 1000ms Memory Limit 65536K description 小明是一个聪明的孩子,对数论有着非常浓烈的兴趣.他发现求1到正整数10n 之间有多少 ...

  5. Java新手如何学习Spring、Struts、Hibernate三大框架？（转）

    整理知乎大牛答案: 1.入门看文档(blog,书籍等等),深入理解配置文件的含义(Spring.Struts.Hibernate); 2.遇到问题,自己动手解决,如果解决了,为什么这样解决?(凡事总问 ...

  6. JavaEE(5) - JMS实现企业Pub-Sub消息处理

    1. 在Weblogic服务器上配置Pub-Sub消息目的 向已有的JMS模块中添加消息主题: Services-->Messaging-->JMS Modules--><Mo ...

  7. 【智能家居篇】wifi网络访问原理（下一个）——联想Association

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢! 认证完毕后,下一步就是关联(Association). 工作站与基站进行关联.以便获得网络的全然訪问权. 关联属于一 ...

  8. 使用 CodeIgniter 框架快速开发 PHP 应用(三)

    原文:使用 CodeIgniter 框架快速开发 PHP 应用(三) 分析网站结构既然我们已经安装 CI ,我们开始了解它如何工作.读者已经知道 CI 实现了MVC式样. 通过对目录和文件的内容进行分 ...

  9. 第13章 模版方法模式（Template Method）

    原文  第13章 模版方法模式(Template Method) 模板模式 模板模式 举例:模拟下数据库的update方法,先删除在插入. 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  10. LINUX2.4.x网络安全框架

       在分析LINUX2.4.x网络安全的实现之前先简介一下它里面包括的几个重要概念:netfilter.iptables.match.target.nf_sockopt_ops.网络安全功能点的实现 ...