使用的图片：

　　　　　　　　　　　　　　　　　　　　　　　　　1.jpg

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

* {margin:;padding:;}

#imglist {list-style:none; width:500px; margin:50px auto;}

#imglist li {float:left; margin-top:10px;}

    </style>

</head>

<body>

    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div></div>

<ul id="imglist">

    <li><img class="pimg" src="img/1.jpg" width="200px" /></li>

<!--     <li><img class="pimg" src="img/2.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/3.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/4.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/5.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/6.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/7.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/8.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/9.jpg" width="500px" /></li>

    <li><img class="pimg" src="img/10.jpg" width="500px" /></li> -->

</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script>

    $(function(){

        $(".pimg").click(function(){

            alert();

            var _this = $(this);//将当前的pimg元素作为_this传入函数

            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

        });

    });

</script>

<script type="text/javascript">

    function imgShow(outerdiv, innerdiv, bigimg, _this){

    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性

    $(bigimg).attr("src", src);//设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/

    $("<img/>").attr("src", src).load(function(){

        var windowW = $(window).width();//获取当前窗口宽度

        var windowH = $(window).height();//获取当前窗口高度

        var realWidth = this.width;//获取图片真实宽度

        var realHeight = this.height;//获取图片真实高度

        var imgWidth, imgHeight;

        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

        if(realHeight>windowH*scale) {//判断图片高度

            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放

            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度

            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度

                imgWidth = windowW*scale;//再对宽度进行缩放

            }

        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度

            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放

            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度

        } else {//如果图片真实高度和宽度都符合要求，高宽不变

            imgWidth = realWidth;

            imgHeight = realHeight;

        }

        $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

        var w = (windowW-imgWidth)/;//计算图片与窗口左边距

        var h = (windowH-imgHeight)/;//计算图片与窗口上边距

        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性

        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg

    });

    $(outerdiv).click(function(){//再次点击淡出消失弹出层

        $(this).fadeOut("fast");

    });

}

</script>

</body>

</html>

javascript点击图片放大的功能（原生）的更多相关文章

  1. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  3. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  4. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  5. 自定义mousewheel事件，实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

  6. 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  7. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  8. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  9. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

随机推荐

  1. Wooden Sticks

    Wooden Sticks Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total ...

  2. AbstractExecutorService （未完成）

    AbstractExecutorService是一个实现了ExecutorService的抽象类.主要实现了ExecutorService的invoke方法.

  3. leetcode Permutations II 无重全排列

    作者:jostree  转载请注明出处 http://www.cnblogs.com/jostree/p/4051169.html 题目链接:leetcode Permutations II 无重全排 ...

  4. js模拟苹果菜单

    模拟苹果菜单的js代码是从网上看到的,用来做导航菜单还是蛮好看的.这里借鉴一下. 效果描述:当鼠标移动离哪个图片最近的时候,这个图片最大,鼠标离的图片越远,则图片越小: 原理:主要用到了三角形的勾股定 ...

  5. 防火墙,svn服务器端安装(yum),使用

    yum install subversion 查看安装位置 rpm -ql subversion 结果如下: svn在bin目录下生成了几个二进制文件 可以查看svn的使用方法 svn --help ...

  6. 远程连接Ucenter数据库

    网站和Ucenter不是同一服务器的连接方法~我折腾了好几天,终于找到了这方法!各位连接不上的不妨试试~什么事只有试过才知道行不行! define('UC_CONNECT', 'mysql'); de ...

  7. Python原型模式

    如果想根据现有对象复制出新的对象并对其修改,可以考虑原型模式(Prototype Pattern) class Point: __slots__ = ("x", "y&q ...

  8. uvision4 ide已停止工作

    情景描述: 笔者安装了新系统WIN8.1,装上了MDKV4.72.MDK编译程序可以正常工作,可是只要当我“下载程序”或者“调试程序”的时候就提示“uvision4 ide已停止工作”,迫不得已只能关 ...

  9. uCGUI动态内存管理

    动态内存的堆区 /* 堆区共用体定义 */ typedef union { /* 可以以4字节来访问堆区,也可以以1个字节来访问 */ ]; /* required for proper aligne ...

  10. 如何使一个input文本框随其中内容而变化长度（转）

    第一: <input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(t ...