jquery使图片简单放大效果【上传图片或者查看从数据库中读出来的imgPath】

最新推荐文章于 2020-08-21 22:00:13 发布
最新推荐文章于 2020-08-21 22:00:13 发布
阅读量615 收藏
点赞数
分类专栏： J2EE(web项目)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/buster2014/article/details/43793185
版权



jquery使图片放大

关键点：

①获取小图片左上角的绝对位置

<pre name="code" class="javascript">//var X = $('#img1').position().left;//横坐标
//var Y=$('#img1').offset().top;//纵坐标

 

 

②div+js+css控制
 

 

效果图：
 

放大的图片可以随着小图片位置的移动相应的移动
 


 
 

jsp页面：
 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'switchImage.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script language="javascript"> 
	// 获取IMG绝对X,Y坐标，可以用offset()方法：
 	// var X = $('#img1').offset().top;
	//var Y = $('#img1').offset().left;
	//获取相对(父元素)位置:
	//var X = $('#img1').position().top;
	//var Y = $('#img1').position().left;
	
	//以下效果是鼠标移动到小图片时，旁边弹出一个大图片
	$(function(){ 
		var ei = $("#large"); 
		var X = $('#smallImg').offset().left;
		var Y = $('#smallImg').offset().top;
		
		ei.hide(); 
		$("#smallImg, img").mousemove(function(e){ //；e.pageX、e.pageY是鼠标移动的位置,把top、left分别设置为e.pageY、e.pageX;可以实现随鼠标的位置走动的效果
			ei.css({ position:'absolute',top:Y/2,left:X+this.width}).html('<img width="'+this.width*1.5+'" height="'+this.height*1.5+'" style="border:1px solid gray;" src="' + this.src + '" />').show(); 
		}).mouseout( function(){ 
			ei.hide(); 
			}) 
		
	}); 
</script> 
  </head>
  
  <body>
    This is my JSP page. <br>
     This is my JSP page. <br>
      This is my JSP page. <br>
       This is my JSP page. <br>
        This is my JSP page. <br>
         This is my JSP page. <br>
    <div>
    aaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbb<img id="smallImg" width="100" height="200" src="images/mm.jpg" >
 					<div id="large"></div> 
 	cccccccccccccccccccccccccccccccccc
</div>
  </body>
</html>

 

 ================================================================================================================================ 

 

参考文章：
 

以下实现的效果是选择要上传的文件，然后把该图片赋值到img控件上，鼠标移动到该图片上时，放大显示
 

 

 
 < 
 html  
 >  

 

 
 < 
 head 
 >  

 

 
 < 
 meta  
 http-equiv 
 = 
 "Content-Type"  
 content 
 = 
 "text/html; charset=gbk"  
 />  

 

 
 < 
 script  
 type 
 = 
 "text/javascript"  
 src 
 = 
 "http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" 
 ></ 
 script 
 >  

 

 
 < 
 script  
 language 
 = 
 "javascript" 
 >  

 

 
 $(function(){  

 

 
 var ei = $("#large");  

 

 
 ei.hide();  

 

 
 $("#img1, img").mousemove(function(e){  

 

 
 ei.css({top:e.pageY,left:e.pageX}).html('< 
 img  
 style 
 = 
 "border:1px solid gray;"  
 src 
 = 
 "' + this.src + '"  
 />').show();  

 

 
 }).mouseout( function(){  

 

 
 ei.hide();  

 

 
 })  

 

 
 
  

 

 
 $("#f1").change(function(){  

 

 
 $("#img1").attr("src","file:///"+$("#f1").val());  

 

 
 })  

 

 
 });  

 

 
 </ 
 script 
 >  

 

 
 < 
 style  
 type 
 = 
 "text/css" 
 >  

 

 
 #large{position:absolute;display:none;z-index:999;}  

 

 
 </ 
 style 
 >  

 

 
 </ 
 head 
 >  

 

 
 < 
 body 
 >  

 


    

 

 
 上传预览图片:  

 

 
 < 
 input  
 id 
 = 
 "f1"  
 name 
 = 
 "f1"  
 type 
 = 
 "file"  
 />  

 

 
 < 
 img  
 id 
 = 
 "img1"  
 width 
 = 
 "120"  
 height 
 = 
 "60"  
 src 
 = 
 "http://www.cssrain.cn/skins/tim/logo-jq.gif" 
 >  

 


    

 

 
 < 
 div  
 id 
 = 
 "large" 
 ></ 
 div 
 >  

 


    

 

 
    

 

 
 鼠标滑过预览图片  

 

 
 </ 
 body 
 >  

 

 
 </ 
 html 
 > 

 

 

 


 
 


 
 


 
 


 
 


 
 


 
 


 
 


 
 


 

                

        

        

    




    

      

        

            

              
                
                  buster2014
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery实现图片放大功能

				
			

			

				

					09-01
				

			

		

		

			
				
jquery实现图片放大功能,图片局部位置放大功能，多图展示功能。

			
		

	



                

              
                



	

		

			

				
					
DocBook使用XIncludes指定图像路径的方法

				
			

			

				

					yuanlanxiaup
				

				

					12-14
					
					100
					
				

			

		

		

			
				
设有一DocBook的文档如下：
&lt;book …
    xml:base="./"&gt;
......
&lt;xi:include href="chapter_overview.xml" /&gt;
在使用XIncludes导入chapter_overview.xml时，XSL处理器将在该文件的路径前添加xml.base，因此就成为“./chapter_overview.xml”，...

			
		

	



                


  
              

                


	

		

			

				
					
Spring文件上传下载and图片上传及前台显示

				
			

			

				

					iteye_12664的博客
				

				

					07-20
					
					144
					
				

			

		

		

			
				

之前感觉图片上传下载不就是通过流的形式么，最近做起来还真是棘手啊，所以说有的是就得先做后想才对。
　　大体思路：把把图片存到文件夹中，然后把图片的名字存入数据库中。因公司用的Spring框架，所以只用Spring框架完成了上传，之后改变了方法完成的上传及前台显示，还是把网上找的Spring的上传下载贴出来，估计以后用得上，下载没有亲测~~
　　Spring上传：
　　springmvc.x...

			
		

	





	

		

			

				
					
pathForResource:imgPath

				
			

			

				

					沸腾的泪水的专栏
				

				

					10-30
					
					1625
					
				

			

		

		

			
				
+(id)createImageView:(CGRect)frame forPath:(NSString *)imgPath{
    
    UIImageView *imageView = [[[UIImageView
alloc] init] autorelease];
    
    imageView.frame = frame;
    
    if (imgPat

			
		

	



		

			
		



	

		

			

				
					
php版阿里云OSS图片上传类详解

				
			

			

				

					12-19
				

			

		

		

			
				
 * 简单上传,上传指定变量的内存值作为object的内容  */ public function putObject($imgPath,$object) {  $content = file_get_contents($imgPath); // 把当前文件的内容获取到传入文件中  $options = ...

			
		

	





	

		

			

				
					
ie8本地图片上传预览示例代码

				
			

			

				

					12-03
				

			

		

		

			
				
代码如下: imgpath= getRealPath(fileId)； document.getElementById(“divSBTP”).style.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’,sizingMethod=’scale’,src=\””+ ...

			
		

	





	

		

			

				
					
asp.net图片上传生成缩略图的注意事项

				
			

			

				

					01-02
				

			

		

		

			
				
bitmap.Save(imgPath,ImageFormat.Jpeg); //这是保存缩略图的一段代码，其中的ImageFormat.Jpeg一定不能省略，即使你保存的文件本来就是jpg格式的，也不能去掉。因为如果去掉的话，生成的缩略图比原始图片还要大！ ...

			
		

	





	

		

			

				
					
asp.net(c#)实现从sqlserver存取二进制图片的代码

				
			

			

				

					01-01
				

			

		

		

			
				
下面说说主要实现思路： 1、存取图片 （1）、将图片文件转换为二进制并直接存进sql server 代码如下: //UploadHelper.cs /// <summary> /// 将图片转化为长二进制 /// </summary> /// ”photopath”></param> /// ...

			
		

	





	

		

			

				
					
js查找某元素中的所有图片地址的方法

				
			

			

				

					01-21
				

			

		

		

			
				
代码如下: function findImg() { var charImg ... i++) { var imgPath = getImgPath(charImg[i].src); var imgNames=getImgNames(imgPath); if (imgNames!= “vt2.png”) { imgURLs += imgNames; //如果用document.getE

			
		

	





	

		

			

				
					
JavaScript、jquery实现上传图片（图片存到服务器，路径存到数据库字段中）一

				
			

			

				

					iilegend的博客
				

				

					08-25
					
					1万+
					
				

			

		

		

			
				
首先第一步就是界面。样式什么的就不设置了，先实现功能就行。
<form id="form2" method="post" enctype="multipart/form-data">    <input type="file" id="imageUpLoad" name="imageUpLoad" class="form-control required" style="float: left; w

			
		

	





	

		

			

				
					
Jquery 上传图片预览，等比例缩放

				
			

			

				

					yongbosong的专栏
				

				

					06-22
					
					1113
					
				

			

		

		

			
				
function fixImage(maxWidth,maxHeight)
{
 var imgWidth = $("#img2").width();
 var imgHeight = $("#img2").height(); 
 var imgWH = imgWidth/imgHeight;
 var maxWH = maxWidth/maxHeight;
 if(imgWidth >= imgHeight)
 {
  if(imgWH = maxWH)
  {
   var mh =

			
		

	





	

		

			

				
					
Asp.Net中解决图片绝对路径问题

				
			

			

				

					Awen_Q的专栏
				

				

					04-12
					
					7606
					
				

			

		

		

			
				
Asp.Net在页面设计上如果用的Master模板最怕的就是图片的路径，不同深度引用总会出现图片消失等问题！一些控件的使用也会出现同等的问题。于是想来想去，终于想到了一个方法。对于图片，我们可以在后台定义一个路径，路径的格式为"~/image/test.jpg"然后前台引用。注意：“~”只可以在服务端使用。例如：text.aspx.cs里面public string imgpa

			
		

	





	

		

			

				
					
ajax上传图片添加数据到数据库以及数据及图片回显

				
			

			

				

					royal1235的博客
				

				

					10-31
					
					6642
					
				

			

		

		

			
				
1.效果图（将数据和图片一起保存到数据库，查询数据时图片进行展示）



2.springboot+easyui写的，将图片上传到resources下面的upload123文件夹中，所以首先应该新建一个文件夹

3.html


&lt;div id="win" class="easyui-dialog" title="班级信息添加"  style="width: 400px; padding: ...

			
		

	





	

		

			

				
					
图片读取：Image.open(ImgPath)

					
热门推荐

				
			

			

				

					weixin_43723625的博客
				

				

					08-21
					
					8万+
					
				

			

		

		

			
				
from PIL import Image

利用 img = Image.open(ImgPath)  打开的图片是PIL类型的，它自带resize函数。由于pytorch的顺序是(batch,c,h,w)，所以需要进行PIL类型到numpy类型转换，tensorflow，numpy的顺序是(batch,h,w,c)：
  # Load Image
  img_fn = os.path.join(self.input_path, filenames)
  img = Image.open(img_fn).

			
		

	





	

		

			

				
					
帮我写一个layui+ssm上传图片保存到文件夹然后记录存到数据库的代码

					
最新发布

				
			

			

				

					05-10
				

			

		

		

			
				
好的，我可以为您提供一个简单的 layui+ssm 上传图片保存到文件夹并记录到数据库的代码示例。  前端页面代码：  ```html   上传图片      <p id="uploadText"></p>    ```  其中，`layui-upload` 是 layui 自带的...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值