您现在的位置是：网站首页>JS经典实例JS经典实例

jQuery特效-一款可拖拽旋转的炫酷图片墙特效

程大白2023-07-03【JS经典实例】人已围观

简介个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。


呈现一款令人瞩目的jQuery 3D图片墙特效，该特效通过创新的拖拽与旋转功能，将图片巧妙编排成一个璀璨夺目的圆形阵列。每张图片不仅环绕成圈，更被赋予了迷人的发光与倒影效果，营造出一种梦幻般的视觉盛宴。这款特效以其独特的展示方式，将图片之美提升至全新高度，成为网页设计中一道亮丽的风景线，让人过目难忘。



下面是修正后的版本：




	html复制代码



	

		
			

				
					

						 

						
				
					<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> 
			

			

				
					

						 

						
				
					<script type="text/javascript"> 
			

			

				
					

						 

						
				
					$(function(){ 
			

			

				
					

						 

						
				
					var imgL = $(".pic img").length; // 使用.length而不是.size()，.size()在jQuery 1.8后被废弃 
			

			

				
					

						 

						
				
					var deg = 360 / imgL; 
			

			

				
					

						 

						
				
					var roY = 0, roX = -10; 
			

			

				
					

						 

						
				
					var xN = 0, yN = 0; 
			

			

				
					

						 

						
				
					var playInterval = null; // 明确命名变量 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					$(".pic img").each(function(i){ 
			

			

				
					

						 

						
				
					$(this).css({ 
			

			

				
					

						 

						
				
					"transform": "rotateY(" + i * deg + "deg) translateZ(300px)" 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					// 阻止图片拖拽 
			

			

				
					

						 

						
				
					$(this).attr('ondragstart', 'return false;'); 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					var isDragging = false; // 用来标记是否正在拖动 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					$(document).mousedown(function(ev){ 
			

			

				
					

						 

						
				
					isDragging = true; 
			

			

				
					

						 

						
				
					var x_ = ev.clientX; 
			

			

				
					

						 

						
				
					var y_ = ev.clientY; 
			

			

				
					

						 

						
				
					clearInterval(playInterval); 
			

			

				
					

						 

						
				
					console.log('我按下了'); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					$(document).mousemove(function(ev){ 
			

			

				
					

						 

						
				
					if (isDragging) { 
			

			

				
					

						 

						
				
					var x = ev.clientX; 
			

			

				
					

						 

						
				
					var y = ev.clientY; 
			

			

				
					

						 

						
				
					xN = x - x_; 
			

			

				
					

						 

						
				
					yN = y - y_; 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					roY += xN * 0.2; 
			

			

				
					

						 

						
				
					roX -= yN * 0.1; 
			

			

				
					

						 

						
				
					console.log('移动'); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					$('.pic').css({ 
			

			

				
					

						 

						
				
					transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)' 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					x_ = ev.clientX; 
			

			

				
					

						 

						
				
					y_ = ev.clientY; 
			

			

				
					

						 

						
				
					} 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					}).mouseup(function(){ 
			

			

				
					

						 

						
				
					isDragging = false; 
			

			

				
					

						 

						
				
					$(document).off('mousemove'); // 移除mousemove事件监听器 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					playInterval = setInterval(function(){ 
			

			

				
					

						 

						
				
					xN *= 0.95; 
			

			

				
					

						 

						
				
					yN *= 0.95; 
			

			

				
					

						 

						
				
					if (Math.abs(xN) < 1 && Math.abs(yN) < 1) { 
			

			

				
					

						 

						
				
					clearInterval(playInterval); 
			

			

				
					

						 

						
				
					} 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					roY += xN * 0.2; 
			

			

				
					

						 

						
				
					roX -= yN * 0.1; 
			

			

				
					

						 

						
				
					$('.pic').css({ 
			

			

				
					

						 

						
				
					transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)' 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					}, 30); 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					$(document).mouseleave(function() { 
			

			

				
					

						 

						
				
					isDragging = false; 
			

			

				
					

						 

						
				
					$(document).off('mousemove'); 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					}); 
			

			

				
					

						 

						
				
					</script>
			

		
	





	主要修改点：


    
	
  1. 
		变量命名：play 变量被重命名为 playInterval 以提高代码的可读性。
    2. 
	
  2. 
		使用 .length：替代了已废弃的 .size() 方法来获取图片数量。
    3. 
	
  3. 
		拖动状态：引入了一个 isDragging 变量来标记是否正在拖动图片墙。这有助于在鼠标离开文档时停止移动事件。
    4. 
	
  4. 
		事件绑定和解绑：使用 .on() 和 .off() 方法来绑定和解绑 mousemove 事件，以提高代码的可维护性和效率。
    5. 
	
  5. 
		HTML注释：移除了错误的HTML注释语法（<!-- -->），并使用了JavaScript的单行注释（//）。
    6. 
	
  6. 
		鼠标离开处理：添加了 mouseleave 事件处理来确保当鼠标离开文档时，不再处理移动事件。
    7. 




	这些修改将使代码更加健壮、易于理解和维护。



	在线预览


                     
        
        
很赞哦！ (74)

        

          
上一篇：上一篇：jQuery特效-鼠标悬停图片上下滚动效果 

          
下一篇：下一篇：jQuery特效-图片堆叠布局点击弹出幻灯片效果 

        

      

      
            
      
  
      
    

    

      
相关文章

      
    


    

      
文章评论

      
    
      

    

  

  
  

    

      
点击排行

      
6条网页设计配色原则,让你秒变配色高手

      
    

    

      
本栏推荐

      
6条网页设计配色原则,让你秒变配色高手

      
    

    

      
    
        
      

    

    

      
标签云

      
    

    

      
猜你喜欢

      
    

    

      
    
        
      

    

    

      
站点信息

      
    
        
  • 建站时间：2018-10-24
    • 
        
  • 网站程序：cms
    • 
        
  • 主题模板：杨青青的《今夕何夕》
    • 
        
  • 文章统计：299条
    • 
        
  • 文章评论：490条
    • 
        
  • 统计数据：百度统计
    • 
        
  • 微信公众号：扫描二维码，关注我们
    •