使用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= ...
随机推荐
- Mysql查看sql是否走事务
登陆进入server [root@gzmtest_25 ~]# su - mysql [mysql@gzmtest_25 ~]$ mysql.local Welcome to the MySQL mo ...
- select readonly 不能看到其它选项解决方式
在html中是select readonly后.依旧能够下拉选择.不想做disabled添加隐藏域,以下提供两种解决方式 解决方式1: onfocus="this.defaultIndex= ...
- 3n+1问题
#include <stdio.h> #include <math.h> // 算法竞赛的目标是编程对任意输入均得到正确的结果. // 请先独立完成,如果有困难可以翻阅本书代码 ...
- 解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合”
解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合” 最近更新: 2013-2-15 587 很少写WinForm程序第一次使用ListBox控件就遇到了比 ...
- bzoj1123 [POI2008]BLO——求割点子树相乘
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1123 思路倒是有的,不就是个乘法原理吗,可是不会写...代码能力... 写了一堆麻麻烦烦乱七 ...
- 用Thymeleaf在前台下拉列表取值
转自:https://blog.csdn.net/u013600907/article/details/76165748
- kafka参数在线修改
当kafka集群单个节点出现磁盘满了,需要清理历史topic数据:方法如下 1): 停掉kafka进程,将kafka的server.properties中的log.retention.hours=1/ ...
- thinkphp的ip地址定位
在WEB应用中,根据IP地址定位和记录相关访问日志也是非常常见的需求,在ThinkPHP中你可以轻松的实现IP地址获取和定位. 获取扩展类库 可以在官网的http://www.thinkphp.cn/ ...
- javascript之模块加载方案
前言 主要学习一下四种模块加载规范: AMD CMD CommonJS ES6 模块 历史 前端模块化开发那点历史 require.js requirejs 为全局添加了 define 函数,你只要按 ...
- 【LuoguP2210 USACO】 Haywire
这种答案跟序列排列顺序有关的,n比较小的(稍微大一点的也可以),求最优解的,一般都可以随机化过 随机化不一定是模拟退火或是什么遗传蚁群 哪怕只是直接随机化一个序列,只要你随机的次数够多,它都能找到正解 ...