在苹果网上看到的效果，自已写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();
})
基本效果就是通过鼠标拖拽实现转动效果。图片太多，效果不实用，纯属为了好玩。
相关推荐
在JavaScript（JS）中模拟3D效果是一种常见的前端技术，它可以为网页增添丰富的视觉体验。本文将深入探讨如何使用JS来实现3D效果，并通过分析标题、描述以及提供的文件名，我们将聚焦于一个具体的实例：鼠标移动触发...
【标题】"仿淘宝3D效果jq"是一个关于使用JavaScript库jQuery实现类似淘宝首页的3D展示效果的技术主题。在电商网站中，这种3D效果常用于商品展示，以增加用户体验，使用户能够以更直观的方式浏览产品。下面将详细探讨...
总的来说，这个"jQuery仿3D效果三联切换旋转木马插件"是一个巧妙利用现有技术来创造视觉冲击力强的交互体验的实例，它结合了jQuery的便利性和CSS的样式表现力，为网页设计带来了创新和趣味。开发者可以通过研究这个...
《jQuery仿3D效果三联切换旋转木马插件源码解析》 在现代网页设计中，为了提升用户体验，各种动态效果和交互设计被广泛应用。其中，旋转木马（Carousel）插件是一种常见且吸引人的元素，它允许用户在有限的空间内...
"js"文件夹内的JavaScript代码是实现3D效果的核心。这里可能包括了WebGL库，如Three.js或Babylon.js，这些库简化了WebGL的使用，提供了丰富的3D对象、光照、材质、相机控制等功能。开发者通过调用这些库的API，可以...
Three.js是目前最流行的JavaScript 3D库，它简化了WebGL的使用，使开发者能够创建复杂的3D场景。在这个项目中，Three.js很可能被用来创建汽车模型、光照、纹理、相机视角以及场景的交互性。 1. **Three.js基础**：...
CSS3的transform属性是关键，它允许我们对元素进行旋转（rotateX, rotateY, rotateZ）、缩放(scale)、平移(translate)等操作，从而创造出3D效果。 在压缩包中，`index.html`是主页面文件，包含了插件的实例代码和...
"Web前端Vue+Threejs 3D实时温度气流仿真效果"是这样的一个项目，它结合了Vue.js框架和Three.js库，实现了3D场景中的动态温度气流模拟。这种技术常用于模拟空调设备的运行效果，为用户提供直观、互动的视觉体验。 ...
西班牙人用js写的3d圣诞树。让我们情何以堪啊
- `js`：很可能是一个JavaScript文件或文件夹，包含实现3D切换效果的代码。 综合以上信息，这个项目的核心技术点包括： 1. CSS3 3D变换：通过CSS3的transform属性实现图片的3D旋转和平移，创造出立体感。 2. ...
1. Three.js简介：Three.js是基于WebGL的开源JavaScript库，它封装了WebGL接口，简化了3D对象的创建和操作，使得开发者无需深入理解复杂的图形编程，就能实现丰富的3D效果。 2. 主要组成部分：Three.js包含场景...
在本项目中，我们主要探讨如何使用Three.js、原生JavaScript和jQuery来创建一个3D机房模拟系统。这个系统不仅展示了一个逼真的3D环境，还具备实用的功能，如设备管理、告警处理和机柜布局调整。下面将详细阐述这些...
这种3D效果可以增强用户的互动感，使得选择过程更加生动。不仅如此，该插件还支持最多三级联动的选择效果，这意味着用户可以在三个不同的层次上进行选择，每个层次的选择都会影响其他层次的选项显示，这种联动性在...
在三维图形领域，Three.js是一个非常流行的JavaScript库，它使得WebGL编程变得简单易行，为开发者提供了丰富的功能，用于创建交互式的3D场景。在本案例中，我们关注的主题是如何利用Three.js来实现“仿人行走的动画...
为了实现3D效果，CSS3还引入了`perspective`属性，它定义了观察者到元素3D空间的距离，从而影响3D元素的透视效果。通过调整`perspective`值，可以改变观看者的视点，影响3D效果的呈现。 此外，压缩包中的文件结构...
- 3D效果是指在滚动过程中，选中的项会突出显示，周围的项则呈现出一种立体旋转的效果，增强了视觉体验。 2. **实现原理**： - 在Android中，可以使用自定义View或者RecyclerView等组件来实现3D滚轮选择器。 - ...
Three.js是基于WebGL的JavaScript库，专门用于在浏览器中创建3D图形，无需用户安装任何插件。这个项目展示了如何将HTML5与Three.js结合，以实现引人入胜的视觉效果。 首先，`index.html`是网页的主文件，它包含了...