JS仿3D效果

最新推荐文章于 2025-09-16 10:18:26 发布

最新推荐文章于 2025-09-16 10:18:26 发布 · 450 阅读

文章标签：

#JS仿3D效果 #JS拖动

个人代码专栏收录该内容

13 篇文章

订阅专栏

在苹果网上看到的效果，自已写JS练习了下。图片用的原网站上的图片。有什么错误的地方，各位提示下，共同进步。

用鼠标拖拽，实现3D转圈效果。

图片效果如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>360苹果</title>
</head>

<body>
<div class="showMain">
	<img id="pic" src="images/pic_1.jpg"/>
    <span class="actiont start">Start</span>
    <span class="actiont stop">Stop</span>
</div>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-apple360.js"></script>
</body>
</html>

.showMain{
	width:640px;
	height:378px;
	padding:100px;
	background:#e8e8e8;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	position:relative;
	}
.showMain .actiont{
	position:absolute;
	width:80px;
	height:30px;
	line-height:30px;
	bottom:40px;
	border:1px solid #336699;
	font-size:14px;
	cursor:pointer;
	}
.showMain .actiont:hover{
	border:1px solid #f90;
	}
.start{
	left:330px;
	}
.stop{
	right:330px;
	}

/*
 * apple变量
 * picCon : 图片展现所用容器
 * begin_number : 默认开始编号
 * end_number : 默认停止编号
 * now_number : 默认当前编号
 * min_number : 图片最小值
 * max_number : 图片最大值
 * start : 开始自动旋转
 * stop : 停止自动旋转
 * state : 当前是否自动旋转
 * clockwise : 是否为顺时针方向
 * det_time : 默认滚动速度
 * time : 手动滚动速度
 * dragging : 标记拖曳状态
*/
var apple = {
	picCon : "#pic", 
	begin_number : 1,
	end_number : 72, 
	now_number : 1,
	min_number :1,
	max_number :72,
	start : ".start",
	stop : ".stop",
	state : true,
	clockwise : true,
	det_time : 100,
	time : 100,
	dragging : false
	}

var baukh = {
	init : function(){
	//初始化加载	
	
		$(apple.start).click(function(){
			apple.time = apple.det_time; //恢复默认滚动速度
			if(apple.clockwise && apple.state && apple.now_number != apple.end_number){
			//顺时针转动 状态进行时 ，不处理转动事件
				return false;
				}
			if(!apple.clockwise && apple.state && apple.now_number != apple.end_number){
			//逆时针转动 状态进行时 ，不处理转动事件
				return false;
				}
			//增加开启旋转事件
			apple.state = true;
			if(apple.clockwise){
				apple.end_number = apple.max_number;
				}else{
					apple.end_number = apple.min_number;
					}
			baukh.auto(); 
			});
		$(apple.stop).click(function(){
			//增加关闭旋转事件
			apple.state = false;
			baukh.auto(); 
			});
			
		baukh.auto();  //页面载入时，进行一次旋转动画
		baukh.sliding();//加载拖动事件
		
		},
	sliding : function(){
	//滑动事件处理
		var down,up,sum;
		$(apple.picCon).mousedown(function(event){
		//鼠标按下时激活拖拽事件
			apple.dragging = true;
			down = event.clientX;
			return false;
			});
		$(apple.picCon).mousemove(function(event){
		//鼠标拖拽时的操作
			if(apple.dragging){
				}
			return false;	
			});
		$(apple.picCon).mouseup(function(event){
		//鼠标弹起时冻结拖拽事件
			apple.dragging = false;
			apple.state = true;
			up = event.clientX;	
			if(down<up){
			//向右滑动时
				sum = Math.round((up-down)/10);
				apple.end_number = apple.now_number - sum;			
				if(apple.end_number < apple.min_number){
					apple.end_number = apple.min_number;
					}
					
				apple.clockwise = false;
				}else if(down>up){
				//向左滑动时	
					sum = Math.round((down-up)/10);
					apple.end_number = apple.now_number + sum;					
					if(apple.end_number > apple.max_number){
						apple.end_number = apple.max_number;
						}
						
					apple.clockwise = true;
					}
			
			apple.time = Math.floor(apple.det_time/sum);
			if(apple.time<50){
				apple.time=50;
				}
			baukh.auto();
			return false;
			});
		
		},
	auto : function(){
	//更换图片处理
		if(!apple.state){
		//当前旋转状态为停止时
			return false;
			}	
		if(apple.clockwise &&  apple.now_number >=apple.end_number){
		//顺时针转动 当前值大于等于目标值 ，不处理转动事件
			return false;
			}
		if(!apple.clockwise &&  apple.now_number <= apple.end_number){
		//逆时针转动 当前值小于等于目标值 ，不处理转动事件
			return false;
			}
		if(apple.clockwise){
			apple.now_number++;
			}else{
				apple.now_number--;
				}
		$(apple.picCon).attr("src","images/pic_"+(apple.now_number)+".jpg");
		window.setTimeout(function(){
			baukh.auto();
			},apple.time)
		}
	}
	
	
$(function(){
	baukh.init();
	})

基本效果就是通过鼠标拖拽实现转动效果。图片太多，效果不实用，纯属为了好玩。