使用的图片：

　　　　　　　　　　　　　　　　　　　　　　　　　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. 安卓Handler机制的例子

    Handler机制是实现线程之间通讯的一种很常见的方法,很多时候都会用到. package com.lab.activity; import android.app.Activity; import ...

  2. SQLite学习第03天：环境搭建

    相比于其他数据库而言,SQLite的环境搭建十分简单,简单几步就可以完成: (1) 首先,从http://www.sqlite.org/download.html的网站上下载预编译的shell二进制文 ...

  3. Qt多文档界面应用设计

    使用Qt编写多文档界面(MDI)应用相当方便,主要会使用到QMdiArea和QMdiSubWindow两个类.可以查看Qt Asistant中这两个类的说明文档,里面介绍的相当详细.另外,可以搜索例程 ...

  4. jquery改变多个css样式

    <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax ...

  5. global, $GLOBALS[]

    // global在函数中产生一个指向函数外部变量的别名变量,而不是真正的函数外部变量,一旦改变了别名的变量指向地址,就会发生一些意外的情况 $a = 10; function test() { gl ...

  6. mac下搭建react-native环境

    1.安装Homebrew 2.安装node(最好安装4.x以上版本这样就自带了一个npm) 3.安装npm(node的包管理工具) 一般高版本的npm在安装node的时候已经具有了 4.安装react ...

  7. PHP 生成随机浮点数

    <?php /** * @desc 获取随机浮点数(支持最大最小值参数互换) * @date 2014-11-07 17:04:21 * * @param int|\最小浮点数 $min 最小浮 ...

  8. 修改centos环境变量

    1.vim /etc/profile 2.PATH=$PATH:/usr/local/php/bin;export PATH 3.source /etc/profile

  9. ORA-24010 SMG-3000

    参考:http://t.askmaclean.com/thread-528-1-1.html 运行脚本的时候一定要清楚脚本做了什么操作,注意看清脚本的报错. conn / as sysdba@?/rd ...

  10. C# dynamic

    [TestMethod] public void DynamicTest() { dynamic Customer = new ExpandoObject(); Customer.Name = &qu ...