精华内容
下载资源
问答
  • 点击图片实现图片放大的效果: 我们经常会看到当我们点击图片... 今天我参考了网上一些经验实现了图片放大功能。 首先我们看代码: <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图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果 源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm
    
    

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

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

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

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

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

    官方验证:

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


    展开全文
  • 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

    1. 引入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>
    
    1. 放大代码
    <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

    展开全文
  • 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和...
  • 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=...
  • vue点击图片放大预览图片支持旋转等

    万次阅读 热门讨论 2018-08-07 18:52:51
    提到图片放大预览,可能好多人想到的是lightbox,但是伸手党做习惯了,所以去github上搜索了一个,感觉效果很完美,简单实用,所以推荐给大家。 https://github.com/mirari/v-viewer github地址,下面是我这块...
  • 很多时候我们需要把图片放大,可是放大之后图片却不如原先清晰,那应该怎么办呢?如果图片放大倍数不超过1倍时,通常使用PS来解决。如果放大倍数较大或图片本身比较模糊,那么就要借助在这方面更专业的插件来解决了...
  • 如何用axure实现查看淘宝评论买家秀的功能,具体而言就是点击图片放大,再次点击图片还原?
  • layui点击图片放大

    千次阅读 2018-07-30 19:19:00
    layui点击图片放大 显示的图片&lt;div class="form-group col-md-6"&gt; &lt;div class="col-sm-3 control-label"&gt;&lt;span class="require"...
  • 图片浏览功能 图片放大缩小 http://blog.csdn.net/aaawqqq/article/details/43128111
  • 要用到的 就是坐标转换方法由于无法插入视频,具体参照微信朋友圈九宫格图片放大 - (CGRect)convertRect:(CGRect)rect toView:(nullable UIView *)view;- (CGRect)convertRect:(CGRect)rect fromView:(nullable ...
  • 原生js点击图片放大

    万次阅读 2019-06-15 10:00:02
    简单的点击图片放大效果 代码如下 建一个html网页即可,无需引入任何文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &...
  • 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 &amp;lt;!-- 注意:必须先引入jquery.js再引入zoomify --&amp;gt; &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;...
  • winform窗体上图片放大功能

    千次阅读 2020-05-19 11:58:36
    窗体上放置两个pictureBox控件,第一个添加image,属性SizeMode设置为... //鼠标点击图片放大图片 private void pictureBox1_MouseClick(object sender, MouseEventArgs e) { //图片控件的宽高 double w
  • JS实现点击图片放大效果

    热门讨论 2011-01-06 13:29:22
    JS 图片 放大 JS放大图片 很好的一个代码.以后还有很多.
  • jquery mobilejqm手势实现图片放大。两个手指搓动屏幕实现图片放大功能
  • Android 图片浏览功能 图片放大缩小

    千次阅读 2016-08-10 13:56:11
    Android 图片浏览功能 图片放大缩小 使用 photoview 双击或双指缩放的ImageView  使用多点触控和双击。 滚动,以平滑滚动甩。 github 下载地址: ...
  • 仿淘宝,京东商品详细图片的viewpager,点击图片放大,左右滑动
  • 要在小程序中实现图片放大缩小是着实不容易呀,还要把用户选择的指定区域生成图片,简直令人发指。不多说,上烧鸡(代码)首先还是先来看看要实现的效果用户可以在指定的区域中滑动,放大,缩小自己的图片,点击确定...
  • Android——图片放大镜效果

    千次阅读 2017-10-31 14:50:10
    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
  • 图片放大镜组件分析

    2018-07-03 15:08:52
    网上图片放大镜组价开发示例代码很多,虽然方法大致相同,可是都没有很好的注释,由于我要做的页面用到了这个组件,我就把代码进行了梳理和分析,做了详尽的注释,并因情景做了相应的改动。首先要明白一些基础的概念...
  • var UIPhotoViewer = api.require('UIPhotoViewer'); ... // 点击图片 放大查看 fangBigTu(it) { UIPhotoViewer.open({ images: it, ...
  • 在手机上点击图片放大,并且可以拿手去拉开放大缩小 用的是一个viewer的插件 yarn add viewer --save <viewer :images="item.imgUrl"> <img :src="img" /> </viewer> <style> .viewer-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,418
精华内容 7,767
关键字:

图片放大