图片放大

点击图片实现图片放大

2020-02-19 18:26:05

点击图片实现图片放大的效果：我们经常会看到当我们点击图片... 今天我参考了网上一些经验实现了图片放大功能。首先我们看代码： <html> <head> <style> .over { position: fixed; left: 0...

点击图片实现图片放大的效果：
我们经常会看到当我们点击图片的时候，图片可以放大，放到原来本身的样子，看起来特别舒服。

今天我参考了网上一些经验实现了图片放大功能。
首先我们看代码：
 <html>
<head>
    <style>
        .over {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 100; 
        }

        .tempContainer {
            position: fixed;
            width: 100%;
            margin-right: 0px;
            margin-left: 0px;
            text-align: center;
            z-index: 101;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
    <div class="over"></div><!--背景层-->
    <div class="logoImg amplifyImg"  >
        <!--注意：此处的amlifyImg不可少-->
        <img src="~/images/chun.jpg"  style="cursor:pointer;"/><!-- 此处是引入图片的路径 -->
    </div>
       <script>
        $(document).ready(function () {
            var imgsObj = $('.amplifyImg img');//需要放大的图像
            if (imgsObj) {
                $.each(imgsObj, function () {
                    $(this).click(function () {
                        var currImg = $(this);
                        coverLayer(1);
                        var tempContainer = $('<div class=tempContainer></div>');//图片容器
                        with (tempContainer) {//width方法等同于$(this)
                            appendTo("body");
                            var windowWidth = $(window).width();//窗口的宽度
                            var windowHeight = $(window).height();//窗口的高度
                            //获取图片原始宽度、高度
                            var orignImg = new Image();
                            orignImg.src = currImg.attr("src");
                            var currImgWidth = orignImg.width;
                            var currImgHeight = orignImg.height;
                            if (currImgWidth < windowWidth) {//为了让图片不失真，当图片宽度较小的时候，保留原图
                                if (currImgHeight < windowHeight) {
                                    
                                    var topHeight = (windowHeight - currImgHeight) / 2;
                                    //if (topHeight > 35) {/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                    //    topHeight = topHeight - 35;
                                    //    css('top', topHeight);
                                    //} else {
                                    //    css('top', 0);
                                    //}
                                    css('top', topHeight);//上面是适应安卓的，这是适应pc端的
 
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px;"><img src="/images/ico_left.png"   /></div><div ><img border=0 src=' + currImg.attr('src') + '></div ><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                } else {
                                      
                                    css('top', 0);
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png"   /></div><div><img border=0 src=' + currImg.attr('src') + ' height=' + windowHeight + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                }
                            } else {
                                 
                                var currImgChangeHeight = (currImgHeight * windowWidth) / currImgWidth;
                                if (currImgChangeHeight < windowHeight) {
                                     
                                    var topHeight = (windowHeight - currImgChangeHeight) / 2;//让图片居中显示
                                    //if (topHeight > 35) {
                              
                                    //    topHeight = topHeight - 35;
                                    //    css('top', topHeight);
                                    //} else {
                                    
                                    //    css('top', 0);
                                    //}
                                     css('top', topHeight);//上面是适应安卓的，这是适应pc端的
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png"   /></div><div><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                } else {
                                     
                                    css('top', 0);
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png"   /></div><div><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + 'height=' + windowHeight + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                }
                            }
                        }
                        //tempContainer.click(function () {
                        //    $(this).remove();
                        //    coverLayer(0);
                        //});
                        show();
                    });
                });
            }
            else {
                return false;
            }
            //使用禁用蒙层效果
            function coverLayer(tag) {
                with ($('.over')) {
                    if (tag == 1) {
                        css('height', $(document).height());
                        css('display', 'block');
                        css('opacity', 1);
                        css("background-color", "#FFFFFF");
                        css("background-color", "rgba(0,0,0,0.8)");  //蒙层透明度
                    }
                    else {
                        css('display', 'none');
                    }
                }
            }

            function show() {
                 $(".tempContainer").on("click", "#body-left ", function () {

                alert(1);

            });
              $(".tempContainer").on("click", "#body-right ", function () {

                alert(2);

            });

            }
            
        });
    </script>
</body>
</html>

难点我都具体分析了。
看看效果图吧。

这是浏览图，点击后的效果是：


看起来还不错。

收起

展开全文

jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果

千次阅读 2016-02-02 09:23:20

jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果源代码下载地址：http://www.zuidaima.com/share/1746784990055424.htm

原文：jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果

源代码下载地址：http://www.zuidaima.com/share/1746784990055424.htm

1、程序兼容IE、火狐、谷歌、猎豹等主流浏览器。

2、简便易懂，便于嵌入式web开发。

官方验证：

firefox下可以，大家可以放心下载。

收起

展开全文

jquery

web页面图片放大

2019-12-25 17:57:59

文章目录图片放大 方式一图片放大 方式二 图片放大 方式一借鉴于 https://blog.csdn.net/Lxinccode/article/details/80353060 <div class="evidenceImgDiv"> <img src=...


文章目录
图片放大 方式一
图片放大 方式二

图片放大 方式一

借鉴于 https://blog.csdn.net/Lxinccode/article/details/80353060

<div class="evidenceImgDiv">
	<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&hs=2&pn=2&spn=0&di=192500&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3190441126%2C995644236&os=1454830399%2C2300565235&simid=4177018013%2C777657142&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb1cce6f996734bdbb9b3fb9ef7705deabc980e35493b-ysf8BZ_fw658&fromurl=ippr_z2C%24qAzdH3FAzdH3Fi7wkwg_z%26e3Bv54AzdH3FrtgfAzdH3F80abl000mdAzdH3F&gsm=&islist=&querylist=" border="5px" onclick="clickImgToEnlarge(this);"/>
</div>
<div id="enlargeImgDiv" style="cursor:pointer;z-index: 1111">
	<img src="" border="5px" id="enlargeImg"/>
</div>
<script>
function clickImgToEnlarge(obj) {
	//点击评论图片放大
	$('#enlargeImgDiv').show();
	$('#enlargeImg').attr('src',obj.src);
	//获取图片大小
	var widthHtml = $('#enlargeImg').width();
	var heightHtml = $('#enlargeImg').height();
	var a_widthHtml = '-' + widthHtml / 2;
	var a_heightHtml = '-' + heightHtml / 2;
	//图片宽高比例
	var proportion = widthHtml / heightHtml;
	
	//获取浏览器可视区域大小
	var windowsWidth = $(window).width();
	var windowsHeight = $(window).height();
	var a_windowsWidth = windowsWidth * 0.8;
	var a_windowsHeight = windowsHeight * 0.8;
	var b_windowsWidth = '-' + a_windowsWidth / 2;
	var b_windowsHeight = "-" + a_windowsHeight / 2
	var a = "-" + proportion * a_windowsHeight / 2;
	
	if(widthHtml > a_windowsWidth || heightHtml > a_windowsHeight) {
	    $('#enlargeImg').css({
	        'height': a_windowsHeight + 'px',
	        'position': 'fixed',
	        'display': 'block',
	        'left': 50 + '%',
	        'margin-left': a + 'px',
	        'top': 50 + '%',
	        'margin-top': b_windowsHeight + 'px',
	    })
	} else {
	    $('#enlargeImg').css({
	        'position': 'fixed',
	        'display': 'block',
	        'left': 50 + '%',
	        'margin-left': a_widthHtml + 'px',
	        'top': 50 + '%',
	        'margin-top': a_heightHtml + 'px',
	    })
	}
}
//点击放大后的图片隐藏
$('#enlargeImgDiv').click(function() {
	$('#enlargeImgDiv').hide();
	$('#enlargeImg').attr('src', '')
	$('#enlargeImg').removeAttr("style")
});
</script>

图片放大 方式二

借鉴于 https://blog.csdn.net/weixin_43747105/article/details/86302254


引入js文件

<link rel="stylesheet" href="${ctxPath}/css/viewer.min.css">
<script src="${ctxPath}/plugins/jquery/jquery.min.js"></script>
<script src="${ctxPath}/js/viewer-jquery.min.js"></script>


放大代码

<ul id="imgUl">
	<div class="evidenceImgDiv">
		<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&hs=2&pn=1&spn=0&di=39490&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3632677651%2C3179755979&os=2150266739%2C1838726856&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb8a2f3cb90ebfdcc8f432e55137d8008d8e0b53c656d-LYlEC1_fw658&fromurl=ippr_z2C%24qAzdH3FAzdH3Fi7wkwg_z%26e3Bv54AzdH3FrtgfAzdH3F8ml9lbc0n9AzdH3F&gsm=&islist=&querylist=" border="5px" onclick="clickImgToEnlarge();"/>
	</div>
	<div class="evidenceImgDiv">
		<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&hs=2&pn=2&spn=0&di=192500&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3190441126%2C995644236&os=1454830399%2C2300565235&simid=4177018013%2C777657142&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb1cce6f996734bdbb9b3fb9ef7705deabc980e35493b-ysf8BZ_fw658&fromurl=ippr_z2C%24qAzdH3FAzdH3Fi7wkwg_z%26e3Bv54AzdH3FrtgfAzdH3F80abl000mdAzdH3F&gsm=&islist=&querylist=" border="5px" onclick="clickImgToEnlarge();"/>
	</div>
</ul>

<script>
	function clickImgToEnlarge() {
		$(document).ready(function () {
			$('#imgUl').viewer({
				title: false,
				fullscreen: false
			});
		});
</script>


jQuery图片查看器插件Viewer.js语法：

http://www.jq22.com/jquery-info6536


jQuery图片查看器插件Viewer.js下载：

https://gitee.com/www.gyh.com/jQueryViewer/tree/master

收起

展开全文

jquery

WPF图片放大缩小

千次阅读 2017-11-14 17:00:10

WPF图片放大缩小

先来看一下效果图:(鼠标放上去就变大,离开就恢复) 


xaml代码:



//单张图片代码
<Image Source="1.jpg" Margin="30,47,512,73" Height="150" Width="150" MouseLeave="Image_MouseLeave" MouseEnter="Image_MouseEnter">
            <Image.RenderTransform>
                <!--ScaleX/Y 为缩放的倍数-->
                <ScaleTransform CenterX="75" CenterY="75"/>
            </Image.RenderTransform>
        </Image>

后台事件代码:

            //鼠标离开事件
            private void Image_MouseLeave(object sender, MouseEventArgs e)
        {
            Image sf = sender as Image;
            ScaleTransform st=new ScaleTransform();
            st.ScaleX = 1;
            st.ScaleY = 1;
            sf.RenderTransform = st;
        }
        //鼠标进入事件
        private void Image_MouseEnter(object sender, MouseEventArgs e)
        {
            Image sf = sender as Image;
            ScaleTransform st = new ScaleTransform();
            st.ScaleX = 1.2;
            st.ScaleY = 1.2;
            sf.RenderTransform = st;
        }

收起

展开全文

layui图片放大功能
千次阅读 2019-07-12 15:37:21
刚刚的项目里面要做一个图片放大功能，用的layui，直接用layer.open改造了一个，记录一下！页面： <a href="javascript:void(0);" class="img_big" title="图片路径"> <img class="***" src="图片路径....
收起
python opencv 图片放大
千次阅读 2019-01-07 16:18:59
用opencv将图片放大有几种插值方法，系统默认线性插值cv2.INTER_LINEAR，这样图片放大后处理边界时会有个渐变的过程，看起来更平和。但我们实际应用中多用最近邻插值方法，方法如代码中的new函数。对两个相邻像素1和...
收起
python opencv
TableView头部图片下拉图片放大
千次阅读 2016-09-06 18:10:05
浏览商品时，组头放置的商品图片，下拉UITableView，会有头部图片放大的效果
收起
图片放大预览viewerjs
千次阅读 2019-11-14 14:25:51
图片放大预览viewerjs https://www.npmjs.com/package/viewerjs viewerjs 这个是文件地址 https://github.com/josson001/Viewer.git 使用步骤 npm install viewerjs 浏览器引入方式 <link href=...
收起
viewerjs
vue点击图片放大预览图片支持旋转等
万次阅读 热门讨论 2018-08-07 18:52:51
提到图片放大预览，可能好多人想到的是lightbox,但是伸手党做习惯了，所以去github上搜索了一个，感觉效果很完美，简单实用，所以推荐给大家。 https://github.com/mirari/v-viewer github地址，下面是我这块...
收起
vue
PhotoZoom2020最新下载注册激活图片放大不清晰？图片无损放大插件教程分享使用
2020-08-24 22:08:04
很多时候我们需要把图片放大，可是放大之后图片却不如原先清晰，那应该怎么办呢？如果图片放大倍数不超过1倍时，通常使用PS来解决。如果放大倍数较大或图片本身比较模糊，那么就要借助在这方面更专业的插件来解决了...
收起
AXURE实验图片放大缩小功能
2019-06-13 20:22:27
如何用axure实现查看淘宝评论买家秀的功能，具体而言就是点击图片放大，再次点击图片还原？
收起
layui点击图片放大
千次阅读 2018-07-30 19:19:00
layui点击图片放大 显示的图片<div class="form-group col-md-6"> <div class="col-sm-3 control-label"><span class="require"...
收起
图片浏览功能 图片放大缩小
2015-09-18 21:56:24
图片浏览功能 图片放大缩小 http://blog.csdn.net/aaawqqq/article/details/43128111
收起
类微信朋友圈图片放大效果，点击图片放大动画
千次阅读 2016-06-20 15:32:27
要用到的就是坐标转换方法由于无法插入视频，具体参照微信朋友圈九宫格图片放大 - (CGRect)convertRect:(CGRect)rect toView:(nullable UIView *)view;- (CGRect)convertRect:(CGRect)rect fromView:(nullable ...
收起
ios 微信动画
原生js点击图片放大
万次阅读 2019-06-15 10:00:02
简单的点击图片放大效果代码如下建一个html网页即可，无需引入任何文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &...
收起
javascript
Vue图片放大镜插件
2020-07-10 23:37:27
Vue(2.x) 图片放大器(Photoloupe) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wdg2GA8A-1594395415139)...
收起
图片放大居中
千次阅读 2014-07-20 18:00:47
图片放大 *{margin:0; padding:0;} ul,li{margin-right: 0; padding:0;} li{list-style:none;} a{text-decoration: none;} .clearfix:before,.clearfix:after{display: table; content: "";}
收起
鼠标移到图片上图片放大
千次阅读 2018-06-29 17:09:05
在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果，但用CSS3来实现会...
收起
点击图片放大功能
2018-11-12 10:35:46
点击图片放大功能注意：引入顺序必须先引入jquery.js再引入zoomify.js &lt;!-- 注意：必须先引入jquery.js再引入zoomify --&gt; &lt;!DOCTYPE html&gt; &lt;html&...
收起
jquery
winform窗体上图片放大功能
千次阅读 2020-05-19 11:58:36
窗体上放置两个pictureBox控件，第一个添加image，属性SizeMode设置为... //鼠标点击图片放大图片 private void pictureBox1_MouseClick(object sender, MouseEventArgs e) { //图片控件的宽高 double w
收起
c#
JS实现点击图片放大效果
热门讨论 2011-01-06 13:29:22
JS 图片放大 JS放大图片很好的一个代码.以后还有很多.
收起
jquery mobile手势实现图片放大
2015-01-05 03:20:29
jquery mobilejqm手势实现图片放大。两个手指搓动屏幕实现图片放大功能
收起
jquery
Android 图片浏览功能 图片放大缩小
千次阅读 2016-08-10 13:56:11
Android 图片浏览功能 图片放大缩小使用 photoview 双击或双指缩放的ImageView 使用多点触控和双击。滚动，以平滑滚动甩。 github 下载地址： ...
收起
仿淘宝，京东商品详细图片的viewpager，点击图片放大，左右滑动
热门讨论 2016-04-25 14:42:23
仿淘宝，京东商品详细图片的viewpager，点击图片放大，左右滑动
收起
viewpager
微信小程序实现图片放大缩小，并截取指定区域图片
万次阅读 多人点赞 2017-12-29 17:38:41
要在小程序中实现图片放大缩小是着实不容易呀，还要把用户选择的指定区域生成图片，简直令人发指。不多说，上烧鸡（代码）首先还是先来看看要实现的效果用户可以在指定的区域中滑动，放大，缩小自己的图片，点击确定...
收起
Android——图片放大镜效果
千次阅读 2017-10-31 14:50:10
Android——图片放大镜效果前言：使用两种方法实现图片放大镜效果，随着手在屏幕上的移动来放大相应位置的图片。
收起
android
css鼠标悬停 图片放大
2017-10-13 16:33:51
css部分 .photo img{ cursor: pointer;.../*图片放大过程的时间*/ } .photo img:hover{ transform: scale(1.2);/*鼠标经过图片放大的倍数*/ } html部分 div class="photo" > img src="002.png
收起
前端 css
图片放大镜组件分析
2018-07-03 15:08:52
网上图片放大镜组价开发示例代码很多，虽然方法大致相同，可是都没有很好的注释，由于我要做的页面用到了这个组件，我就把代码进行了梳理和分析，做了详尽的注释，并因情景做了相应的改动。首先要明白一些基础的概念...
收起
vue
apicloud图片放大和图片左右滑，查看图片很多张
千次阅读 2019-05-29 08:54:35
var UIPhotoViewer = api.require('UIPhotoViewer'); ... // 点击图片放大查看 fangBigTu(it) { UIPhotoViewer.open({ images: it, ...
收起
H5实现点击图片放大功能
2021-02-07 11:35:19
在手机上点击图片放大，并且可以拿手去拉开放大缩小用的是一个viewer的插件 yarn add viewer --save <viewer :images="item.imgUrl"> <img :src="img" /> </viewer> <style> .viewer-...
收起

点击图片实现图片放大

jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果

web页面图片放大

文章目录

图片放大方式一

图片放大方式二

WPF图片放大缩小

layui图片放大功能

python opencv 图片放大

TableView头部图片下拉图片放大

图片放大预览viewerjs

vue点击图片放大预览图片支持旋转等

PhotoZoom2020最新下载注册激活图片放大不清晰？图片无损放大插件教程分享使用

AXURE实验图片放大缩小功能

layui点击图片放大

图片浏览功能图片放大缩小

类微信朋友圈图片放大效果，点击图片放大动画

原生js点击图片放大

Vue图片放大镜插件

图片放大居中

鼠标移到图片上图片放大

点击图片放大功能

winform窗体上图片放大功能

JS实现点击图片放大效果

jquery mobile手势实现图片放大

Android 图片浏览功能图片放大缩小

仿淘宝，京东商品详细图片的viewpager，点击图片放大，左右滑动

微信小程序实现图片放大缩小，并截取指定区域图片

Android——图片放大镜效果

css鼠标悬停图片放大

图片放大镜组件分析

apicloud图片放大和图片左右滑，查看图片很多张

H5实现点击图片放大功能

点击图片实现图片放大

jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果

web页面图片放大

文章目录

图片放大 方式一

图片放大 方式二

WPF图片放大缩小

layui图片放大功能

python opencv 图片放大

TableView头部图片下拉图片放大

图片放大预览viewerjs

vue点击图片放大预览图片支持旋转等

PhotoZoom2020最新下载注册激活图片放大不清晰？图片无损放大插件教程分享使用

AXURE实验图片放大缩小功能

layui点击图片放大

图片浏览功能 图片放大缩小

类微信朋友圈图片放大效果，点击图片放大动画

原生js点击图片放大

Vue图片放大镜插件

图片放大居中

鼠标移到图片上图片放大

点击图片放大功能

winform窗体上图片放大功能

JS实现点击图片放大效果

jquery mobile手势实现图片放大

Android 图片浏览功能 图片放大缩小

仿淘宝，京东商品详细图片的viewpager，点击图片放大，左右滑动

微信小程序实现图片放大缩小，并截取指定区域图片

Android——图片放大镜效果

css鼠标悬停 图片放大

图片放大镜组件分析

apicloud图片放大和图片左右滑，查看图片很多张

H5实现点击图片放大功能

图片放大

图片放大方式一

图片放大方式二

图片浏览功能图片放大缩小

Android 图片浏览功能图片放大缩小

css鼠标悬停图片放大