使用的图片：

　　　　　　　　　　　　　　　　　　　　　　　　　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. C#线程总结

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  2. Javascript中setTimeout和setInterval的区别和使用

    在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...

  3. 如何去掉 Discuz标题后缀power by discuz

    如何去掉 Discuz标题后缀power by discuz 打开如下文件 template/default/common/header_common.htm/php 找到如下代码 $navtitle ...

  4. 手动将MySQL服务安装到windows中

    我的系统是win7 x64,mysql版本5.6 (网上的老教程很多都没用了,版本太旧,这是我自己总结出来的方法) 下载zip包的mysql可以获得最新版本,还可以免安装,好处多多,但是要把mysql ...

  5. SET ANSI_NULLS ON

    Transact-SQL 支持在与空值进行比较时,允许比较运算符返回 TRUE 或 FALSE. 通过设置 ANSI_NULLS OFF 可将此选项激活.当 ANSI_NULLS 为 OFF 时,如果 ...

  6. 用PLSQL Developer粘贴数据的时候报oracle variant conversion error for variable v0

    参考文章:http://bugcool.blog.51cto.com/2080571/664434 两个数据库表对着copy粘贴的时候,报这个错.只是我这边不是顺序不对,不知道为什么其中的一行换行了. ...

  7. 2011年-CUshell编程大赛

    今天群里有人在做练习时遇到一个问题,$0中的分隔符使用OFS没有成功作用,遂查到这个问题,留作备忘查看 http://bbs.chinaunix.net/thread-2319120-1-1.html

  8. wpf 只在window是ShowDialog打开时才设置DialogResult

    //only set DialogResult when window is ShowDialog before if(System.Windows.Interop.ComponentDispatch ...

  9. Sublime Text 3插件之SublimeTmpl：新建文件的模版插件

    SublimeTmpl能新建html.css.javascript.php.python.ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板. ...

  10. python 读取机器信息

    本人最近新学python ,用到关于机器的相关信息,经过一番研究,从网上查找资料,经过测试,总结了一下相关的方法. # -*- coding: UTF8 -*- import os import wi ...