<!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. HTTP简单的解析协议

    1.HTTP定义的协议 官方的定义:        WWW这是Internet作为传输介质的应用.WWW主变速器单元是在线Web网页.WWW它正在给客户/server计算模型,由Web浏览器Webse ...

  2. UIViewAdditions(一个非常方便的工具类用它)

    我们在project在,改变或多或少控件的坐标-宽度-高度,然后,经常看到你的self.view.frame.origin.x,self.view.frame.size.width.........相 ...

  3. sql查询第二大的记录（转）

    问题: 数据库中人表有三个属性,用户(编号,姓名,身高),查询出该身高排名第二的高度.建表语句 create table users ( id ,) primary key, name ), heig ...

  4. Python 新浪微博中提取最常见转载的微博转载了几次，username，内容

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-4 @author: guaguastd @name: fi ...

  5. SQL Server 备份和还原全攻略

    原文:SQL Server 备份和还原全攻略 一.知识点 完全备份: 备份全部选中的文件夹,并不依赖文件的存档属性来确定备份那些文件.(在备份过程中,任何现有的标记都被清除,每个文件都被标记为已备份, ...

  6. EJBCA于Linux安装在

    于windows为了测试安装,装在linuxserver因为CN使用ip需要重新加载.....再折腾.这里有一些地方需要注意 一.所需文件 内容准备不说,请参阅我在以前的文章<EJBCA于win ...

  7. [ACM] hdu 1285 确定比赛 （拓扑排序）

    确定比赛 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  8. 基于Js实现的UrlEncode和UrlDecode函数代码

    <script language="javascript">//UrlEncode函数function UrlEncode(str){  var ret="& ...

  9. Java EE (1) -- Java EE 6 Web Component Developer Certified Expert(1z0-899)

    1: hash map, hash tables 的区别 The HashMap class is roughly equivalent to Hashtable, except that it is ...

  10. 【SSH三个框架】Hibernate第十篇基础：inverse属性具体解释

    inverse后经常用于双向1-N在相关性.它也可以在使用N-N该协会,这里,例如用双1-N联想 或两个与各部门及工作人员,两javabean没有写. 首先,我们的员工看映射文件: <?xml ...