点击图片放大缩小功能

1.点击图片放大缩小的思路

图片部分：

<table><div><img style="width:62px;height:83px;display:block" src="${photourl}" οnclick="showMaxImg(this)"></div>
</table>

思路一：点击图片，然后在bootstrap里面的模态框（modal）放大，再点击放大后的图片，图片恢复正常。(使用bootstrap需要引入)

<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg" style="display:inline-block;width:auto;"><div class="modal-content"><div id="imgshow"></div></div></div></div>

第一个div里面必须要有modal，标明使用的是模态框。text-center:居中显示；aria-hidden：true；图片未点击时隐藏。

js部分：

function showMaxImg(obj){var src=$(obj).attr("src");$("#imgModal").find("#imgshow").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' data-dismiss='modal'>");
$("#imgModal").modal('show');
}

获取原位置图片src，添加到模态框中图片的位置，然后显示隐藏的模态框。

思路二：使用hover（鼠标指针浮动在上面的元素）选择器，鼠标浮动在需要放大的图片上，图片放大，且相对靠右显示（我在实现的过程中遇到的问题是图片在表格靠近浏览器边缘的位置，放大之后让图片相对靠右显示）

我这里仅使用样式的方法进行修改：

img{cursor:pointer;//鼠标手型transition:all 0.6s ease-in-out;//过渡
}
table img:hover{display:block;transform：scale(5);//放大5倍margin-left:20%;//可根据实际情况调节，避免屏幕左边遮挡住照片的一部分
}

2.补充：

获取屏幕的分辨率：window.screen.width，

把图片固定在屏幕上：position:fixed; 或者给图片设定好具体的长宽高。

js给dom对象添加样式示例，$('body').css({'overflow':'hidden','padding-right':'17px'}); overflow:控制滚动条的。

modal事件，参考：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

display:block让a变成块级元素，可以跟div一样有高度、宽度、行高，否则宽度、高度是无效的。

点击图片放大缩小功能相关推荐

vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
jQuery——小案例：点击图片放大缩小
需求: HTML中有三张图片: 如果图片处于"大"状态,则点击图片可以缩小. 如果图片处于"小"状态,则点击图片可以放大. 代码: <!DOCTYPE h ...
js实现图片放大缩小功能
在web项目中,用到js来实现图片的放大缩小功能,在这里是通过zoomify来实现,并在这个基础上进行二次改进,已达到更满意的效果. 1.下面是展示的效果: 通过对zoomifyjs改进,达到上述效果 ...
Css+Jquery实现点击图片放大缩小预览图片预览查看大图
要求点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图. 技术要点主要是Jquery进行元素的显示与隐藏. 代码 <!DOCTYPE html> <html ...
实现点击图片放大查看功能
1.html 代码 <div id="imgEnlargeDiv" style="display: none; text-align: center;positio ...
简单实现点击图片放大的功能
背景:想在app中加上点击缩略图放大的效果,但是不想导入大量的JS ,也无需哪些复杂的插件,于是自己手写了一个很简单的实现,在这里记下来. 代码很简单,还有很多优化空间,时间有限,就没有优化了 1 . ...
疯狂猜图中的图片放大缩小功能的实现
为什么80%的码农都做不了架构师?>>> #import "ViewController.h"@interface ViewController () @p ...
jqweui轮播图点击图片放大缩小
需要js cs 的直接上官网下:jqweui: jqweui (gitee.com) 直接上代码 <!DOCTYPE html> <html><head><t ...
通过layui组件的滑动块实现控制图片放大缩小功能！
先看效果图 html 代码:创建滑块 <div id="slideys" class="demo-slider"></div> //ja ...

点击图片放大缩小功能

点击图片放大缩小功能相关推荐

最新文章

热门文章