<!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. SQL开发中容易忽视的一些小地方(一)

    原文:SQL开发中容易忽视的一些小地方(一) 写此系列文章缘由: 做开发三年来(B/S),发现基于web 架构的项目技术主要分两大方面: 第一:C#,它是程序的基础,也可是其它开发语言,没有开发语言也 ...

  2. NSIS API 函数常用备份

    原文:NSIS API 函数常用备份 关闭程序: System::Call `user32::AnimateWindow(i$HWNDPARENT,i200,i${AW_BLEND}|${AW_HID ...

  3. HDU 4081-Parsing URL(水)

    Parsing URL Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) Tota ...

  4. android app启动过程（转）

    Native进程的运行过程 一般程序的启动步骤,可以用下图描述.程序由内核加载分析,使用linker链接需要的共享库,然后从c运行库的入口开始执行. 通常,native进程是由shell或者init启 ...

  5. handlebar的一些用法——个人使用总结

    handlebar的一些用法 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less t ...

  6. MySQL定义和变量赋值

    变量可以在子程序(性能.存储过程.匿名块)声明和使用.这些变量的范围是在BEGIN...END规划. 变量的定义 语法格式: DECLARE var_name [, var_name]... data ...

  7. RQNOJ PID4 / 数列(位运算)

    题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...

  8. 快捷键让SublimeText在编文件快速在浏览器打开

    这里插入一下安装"view in browser"官方版的说明:(前提是得先安装package control插件) 1.通过"ctrl+shift+p"打开命 ...

  9. oracle_windows下命令启动oracle监听和服务

    1.检查监听器状态 C:\Users\Administrator>lsnrctl status 2.启动监听程序 C:\Users\Administrator>lsnrctl start ...

  10. JavaScript语言基础知识1

    我们想知道什么JavaScript.首先,我们必须知道JavaScript有什么特点? JavaScript究竟是什么?它是一种基于对象而且具有安全性的脚本语言,对.它是脚本语言.所以它有下面特点: ...