使用的图片：

　　　　　　　　　　　　　　　　　　　　　　　　　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. win7上帝模式

    在win7 系统桌面或任意磁盘下新建文件夹,将文件夹改名为 GodModel.{ED7BA470-8E54-465E-825C-99712043E01C}

  2. WCF SOA服务应用

    WCF是微软官方推出的一个基于服务的整合框架,它整合了以前的Web Service.MSMQ.Remoting等通信技术,通过灵活的配置,让服务编程更加容易.可扩展.这篇文章主要目的就是带领大家从开发 ...

  3. PHPExcel说明

    下面是总结的几个使用方法include 'PHPExcel.php';include 'PHPExcel/Writer/Excel2007.php';//或者include 'PHPExcel/Wri ...

  4. MySQL基础学习之触发器

    查看触发器 SHOW TRIGGER\G 创建触发器 CREATE TRIGGER 触发器名字 BEFORE/AFTER DELETE ON 表名 FOR EACH ROW INSERT INTO 表 ...

  5. php实现单链表

    <?php /** * 单链表 */ class Demo { private $id; public $name; public $next; public function __constr ...

  6. PHP 5.6.6 上运行 ecshop 2.7.3 不兼容问题整合

    在安装完php在自己的服务器上以后, 发现在静态网页上出现了很多 error. 在网上查找过后发现,大部分问题是因为 PHP发展到PHP5.5版本以后,有了很多细微的变化.而ECSHOP官方更新又太慢 ...

  7. iis7如何取消目录的可执行权限

    我们需要把IIs中某一个目录的可执行权限去掉.这在IIs6中是非常方便的,可是因为iis7的机制小编也找了不少资料才找到. 第一步:先选择需要取消权限的目录,然后在右边可以看到 “处理程序映射” 双击 ...

  8. 网络请求 post 的接受请求头的代理方法

    接收响应头 content-Length content-Type - (void)connection:(NSURLConnection *)connection didReceiveRespons ...

  9. C# - 接口，继承

    接口 接口是把公共实例(非静态)方法和属性组合起来,以封装特定功能的一个集合.不能像实例化一个类那样实例化接口.接口不能包含实现其成员的任何代码,而只能定义成员本身.实现过程必须在实现接口的类中完成. ...

  10. C# - ref & out

    引用参数和值参数 值参数,是在函数中此变量的任何修改都不影响函数调用中指定的参数,除非把它当作返回值返回,经典例子,交换两个数,但是返回值只有一个. 此时可以用引用参数,函数处理的变量和函数调用中使用 ...