JS 图片放大缩小、旋转

功能描述：点击图片弹出并放大，点击弹出图片外顺时针旋转，鼠标滚动放大缩小，点击弹出图片关闭

<html>
<head>
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">var base_scrollBar = 0;function imgShow(outerdiv, innerdiv, bigimg, _this) {var rIndex = 0;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) / 2; //计算图片与窗口左边距var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距$(innerdiv).css({"top": h,"left": w}); //设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg});$(outerdiv).click(function() { // 点击图片外面旋转图片//$(this).fadeOut("fast");if (rIndex > 3) {rIndex = 0;}rIndex += 1;$(bigimg).css('transform', 'rotate(' + 90 * rIndex + 'deg)');});$(innerdiv).click(function() { // 点击图片淡出消失弹出层rIndex = -1;$(outerdiv).fadeOut("fast");window.scrollTo(0, base_scrollBar);});
}function getScrollTop(){// 获取滚动条距离顶部位置var scrollTop=0;if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollTop;}else if(document.body){scrollTop=document.body.scrollTop;}return scrollTop;
}$(function(){$(".pic").click(function(){var _this = $(this);//将当前的pimg元素作为_this传入函数$("#bigimg").css({'width': '100%', 'height': '100%'});imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);base_scrollBar = getScrollTop();});
});</script><script type="text/javascript">
// 向上滚动放大图片，向下滚动缩小图片
function picture_change(s){//var div = document.getElementById("innerdiv");if($("#outerdiv").css('display')=='block'){var tw = $("#bigimg").width(),th=$("#bigimg").height();var cw = $(window).width(),ch=$(window).height();if(tw>0 && th >0){$("#bigimg").width(tw*s);$("#bigimg").height(th*s);//div.style.left = div.style.left*(2-s);//div.style.top = div.style.top*(2-s);$("#innerdiv").css({'left': (cw-tw*s)/2+'px','top': (ch-th*s)/2+'px'});}}
}var scrollFunc = function (e) {e = e || window.event;if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件if (e.wheelDelta > 0) { //当滑轮向上滚动时picture_change(1.1);}if (e.wheelDelta < 0) { //当滑轮向下滚动时picture_change(0.9);}} else if (e.detail) {  //Firefox滑轮事件if (e.detail> 0) { //当滑轮向下滚动时picture_change(0.9);}if (e.detail< 0) { //当滑轮向上滚动时picture_change(1.1);}}}/*IE、Opera注册事件*/if(document.attachEvent){document.attachEvent('onmousewheel',scrollFunc);}//Firefox使用addEventListener添加滚轮事件if (document.addEventListener) {//firefoxdocument.addEventListener('DOMMouseScroll', scrollFunc, false);}//Safari与Chrome属于同一类型window.onmousewheel = document.onmousewheel = scrollFunc;</script>
</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>
<div><img height="100" width="100" src="c.jpg" class="pic"/></div>
</body>
</html>

JS 图片放大缩小、旋转相关推荐

图片放大缩小旋转左移右移镜像倒影android
图片放大缩小旋转左移右移镜像倒影 demo: TestImage 1. 将 meinv.jpg 图片拷贝到以下目录TestImage\app\src\main\res\mipmap-hdpi 1.An ...
js 图片放大缩小（动画效果）
本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小.下面分析整个过程: 图片逐渐放大缩小怎么实现? 1.用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通 ...
jquery图片放大缩小旋转功能实现
下载地址:https://download.csdn.net/download/qq_43037478/12076630
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
imageView图片放大缩小及旋转
imageView图片放大缩小及旋转一.简介二.方法 1)设置图片放大缩小效果第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...
图片放大缩小效果，支持鼠标滑轮
图片放大缩小效果效果在附件里,麻烦下载来看吧 <html> <head><title>Simple jsp page</title><link ...

JS 图片放大缩小、旋转

JS 图片放大缩小、旋转相关推荐

最新文章

热门文章