序言:在写这个功能之前也用了zoom.js,zoom.js用起来简单引用js然后设置图片属性就可以放大。但是放大后的图片模糊、没有遮罩、在放大图片时其它图片布局会受到影响,当然如果觉得这些都是小问题的话接来下的代码就可以不用看了,这个实现的功能是和zoom.js一样的,只是个人强迫为了体验效果更佳而进行改动。注意事项:放大后的图片其实就是图片自身的大小,放大之前是进行缩小的图片。

1.引用layer.js

Layer官网:http://layer.layui.com/

2.html代码:

<a href="javascript:DataHtml('无标题2.jpg','/UploadFiles/VendorNo/PUR000001/78b65e62-cb56-49eb-9cc2-591376f4cdf4.jpeg')">
  <img alt='无标题2.jpg' title='无标题2.jpg' style='width:100px' src='/UploadFiles/VendorNo/PUR000001/78b65e62-cb56-49eb-9cc2-591376f4cdf4.jpeg'/>
</a>
<a href="javascript:DataHtml('无标题.jpg','/UploadFiles/VendorNo/PUR000001/a55c127f-b6be-4455-a576-f0ca033a116e.jpeg')">
  <img alt='无标题.jpg' title='无标题.jpg' style='width:100px' src='/UploadFiles/VendorNo/PUR000001/a55c127f-b6be-4455-a576-f0ca033a116e.jpeg'/>
</a>
<img alt="" style="display:none" id="displayimg" src="" />

3.js代码:

function DataHtml(name, url) {
$("#displayimg").attr("src", url);
var height = $("#displayimg").height();
var width = $("#displayimg").width();
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
area: [width + 'px', height + 'px'], //宽高
content: "<img alt=" + name + " title=" + name + " src=" + url + " />"
});
}

浏览器效果:

zoom.js的放大效果:

使用Layer完成图片放大功能的更多相关文章

  1. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  2. 图片放大功能如何做?jquery实现

    花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...

  3. jqzoom插件图片放大功能的一些BUG

    建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...

  4. Typora配置双击图片放大功能

    在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...

  5. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  6. JavaScript 点击图片放大功能

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

  7. jquery图片放大功能简单实现

    图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...

  8. html实现点击图片放大功能

    话不多说,直接上代码 <html> <head> <style> .over {position: fixed; left:0; top:0; width:100% ...

  9. 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能

    html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...

随机推荐

  1. 5200 fqy的难题----2的疯狂幂

    5200 fqy的难题----2的疯狂幂  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description ...

  2. Caused by: java.lang.UnsatisfiedLinkError: Couldn&#39;t load BaiduMapVOS_v2_1_3: findLibrary returned nu

    在使用百度地图进行开发的时候.假设遇到了 Caused by: java.lang.UnsatisfiedLinkError: Couldn't load BaiduMapVOS_v2_1_3: fi ...

  3. Buildroot构建指南——工具链【转】

    本文转载自:http://blog.csdn.net/zhou_chenz/article/details/52346134 Linux系统的交叉编译工具链用来将源代码变成bin文件或者库文件的一个软 ...

  4. Webkit内核开源爬虫蜘蛛引擎

    C#开发的基于Webkit内核开源爬虫蜘蛛引擎 https://www.cnblogs.com/micro-chen/p/9075590.html 概述 在各个电商平台发展日渐成熟的今天.很多时候,我 ...

  5. 函数中的this的四种绑定形式

    目录 this的默认绑定 this的隐式绑定 隐式绑定下,作为对象属性的函数,对于对象来说是独立的 在一串对象属性链中,this绑定的是最内层的对象 this的显式绑定:(call和bind方法) n ...

  6. POJ 1101 译文

    The Game 题意: Description One morning, you wake up and think: "I am such a good programmer. Why ...

  7. 在PL/SQL中使用带参数的游标

    需求:查询并输出部门名称为SALES的员工信息 SET serveroutput ON; DECLARE CURSOR c_emp(paramName VARCHAR2) IS SELECT * FR ...

  8. react中withRouter解决props返回为空

    利用 react + antd 框架书写导航栏时,遇到了几个坑,分别是一级菜单和二级菜单在点击的情况下,高亮没有任何问题,但是再点击浏览器返回按钮时,却就乱套了. 1. 二级菜单中,我们可以通过 pr ...

  9. js仿新浪游戏频道导航条

    js仿新浪游戏频道导航条 在线演示本地下载

  10. (转)vuex2.0 基本使用(1) --- state

    Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...