使用的图片：

　　　　　　　　　　　　　　　　　　　　　　　　　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. .NET和JSON

    JSON(JavaScript Object Notation)已经成为了现在大多数程序间数据交换的存储格式,在很多地方取代了XML文件的位置.JSON实际就是JavaScript的对象数组. .NE ...

  2. HIT 1867 经理的烦恼

    题目链接:http://acm.hit.edu.cn/hoj/problem/view?id=1867 每次更新时判断是否素数,如果从非素数变成素数就Update(x, 1),如果从素数变成非素数就U ...

  3. PHP学习笔记——PHP脚本和JAVA连接mysql数据库

    环境 开发包:appserv-win32-2.5.10 服务器:Apache2.2 数据库:phpMyAdmin 语言:php5,java 平台:windows 10 java驱动:mysql-con ...

  4. 国内IT技术博客对比

    今天我想就自己对用了国内几个IT行业领先的博客做一个心得体会的总结: 我总共是用了三个,第一个是新浪,第二个是CSDN,第三个是博客园: 当然期间有自己搭建过wordpress,也用了一段时间,但是感 ...

  5. Openstack安装

    作者:陈沙克 Openstack发展很猛,很多朋友都很认同,2013年,会很好的解决OpenStack部署的问题,让安装,配置变得更加简单易用. 很多公司都投入人力去做这个,新浪也计划做一个Opens ...

  6. hdu 5055 Bob and math problem

    先把各个数字又大到小排列,如果没有前导零并且为奇数,则直接输出.如果有前导零,则输出-1.此外,如果尾数为偶数,则从后向前找到第一个奇数,并把其后面的数一次向前移动,并把该奇数放到尾部. 值得注意的是 ...

  7. Webstorm 配置与使用 Less

    * 安装完NodeJs * 将npm文件夹保存在C:\Users\Administrator\AppData\Roaming\下 * 在webStrom中,setting -> Tools -& ...

  8. Yii框架下使用redis做缓存，读写分离

    Yii框架中内置好几个缓存类,其中有memcache的类,但是没有redis缓存类,由于项目中需要做主从架构,所以扩展了一下: /** * FileName:RedisCluster * 配置说明 * ...

  9. c#让窗体永在最前 调用windows api 将窗体设为topmost

    有时候应用程序需要将一个窗体始终位于屏幕的最前面,即使切换到其它窗体也能看到该窗体,这样的窗体就叫做TopMost窗体. 用C#制作TopMost窗体之前,首先要了解如何声明SetWindowPos函 ...

  10. hive--UDF、UDAF

    1.UDF package com.example.hive.udf; import org.apache.hadoop.hive.ql.exec.UDF; import org.apache.had ...