使用Layer完成图片放大功能
序言:在写这个功能之前也用了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完成图片放大功能的更多相关文章
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 图片放大功能如何做?jquery实现
花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...
- jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
- Typora配置双击图片放大功能
在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...
- 图片放大功能插件及jquery.extend函数理解
前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery图片放大功能简单实现
图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...
- html实现点击图片放大功能
话不多说,直接上代码 <html> <head> <style> .over {position: fixed; left:0; top:0; width:100% ...
- 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能
html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...
随机推荐
- python 003 os模块 example
import os for tmpdir in ('/tmp',r'C:/Users/Administrator/PycharmProjects/'): if os.path.isdir(tmpdir ...
- selenium IDE 回放报错
解决:Selenium RC未启动,启动即可. java -jar selenium-server-standalone-2.25.0.jar 启动RC报错,提示找不到firefox的path,于是配 ...
- Qt graphic item日记
今天在用用graphic view 加入graphic item的时候要引入一个context menu,自然就要对context menu上的action进行slot处理.可是graphic ite ...
- DBI(i80)/DPI(RGB)/DSI【转】
本文转载自:http://blog.csdn.net/liuxd3000/article/details/17437317 (1)DBI接口 A,也就是通常所讲的MCU借口,俗称80 system接口 ...
- 交叉熵代价函数——当我们用sigmoid函数作为神经元的激活函数时,最好使用交叉熵代价函数来替代方差代价函数,以避免训练过程太慢
交叉熵代价函数 machine learning算法中用得很多的交叉熵代价函数. 1.从方差代价函数说起 代价函数经常用方差代价函数(即采用均方误差MSE),比如对于一个神经元(单输入单输出,sigm ...
- 3.2 手机中的数据库——SQLite
http://www.sqlite.org/download.html 截至我安装SQLite数据库为止的时间,最新的版本可以下载sqlite-dll-win64-x64-3200000.zip和sq ...
- 【DP】书的复制
原题链接__戳我噢 [思路] (区间)DP F[I][J]表示前i本书分给j个人用的最短时间 由于每一次j的状态由比j小的状态得出,所以要先枚举j,然后枚举i,接着枚举上一次抄书的人是谁 我觉得,难点 ...
- C - Arrival of the General
Problem description A Ministry for Defense sent a general to inspect the Super Secret Military Squad ...
- D - Garden
Problem description Luba thinks about watering her garden. The garden can be represented as a segmen ...
- invoke与call
“调用一个委托实例” 中的 “调用” 对应的是invoke,理解为 “唤出” 更恰当.它和后面的 “在一个对象上调用方法” 中的 “调用” 稍有不同,后则对应的是call.在英语的语境中,invoke ...