jquery+css3实现3D拖拽相册
<html onselectstart='return false'>
<!-- onselectstart='return false'禁用整个页面的选中作用 -->
设置3d效果
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
rotateX(-10deg) （屏幕内外，-10deg为向外10度偏转）
rotateY(0deg); 左右
变成圆角
border-radius:5px;
倒影（很多浏览器不兼容）
box-shadow:0px 0px 10px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,.5)100%);（从实物50%的地方开始往下面到100%）
（页面）document树加载完成后触发,jquary可以添加document树的组件，操作文档
$(function()
计时器函数
setInterval(function(){});
下面是代码：（文件打包已经上传，需要图片）
<!DOCTYPE html>
<html onselectstart='return false'>
<head>
<meta charset="UTF-8">
<title>3D拖拽相册</title>
<!-- 层叠样式表,化妆师 -->
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
background:#000000;
}
div.pic{
width:120px;
height:180px;
margin:150px auto 0;
position:relative;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
}
div.pic img{
position :absolute;
width:100%;
height:100%;
border-radius:5px;
box-shadow:0px 0px 10px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,.5)100%);
}
div.pic p{
width:1200px;
height:1200px;
background:-webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.3),rgba(0,0,0,0));
position:absolute;
left:50%;
top:100%;
margin-top:-600px;
margin-left:-600px;
transform: rotateX(90deg);
border-radius:600px;
}
</style>
</head>
<body>
<div class="pic">
<img src='1.jpg'/>
<img src='2.jpg'/>
<img src='3.jpg'/>
<img src='4.jpg'/>
<img src='5.jpg'/>
<img src='6.jpg'/>
<img src='7.jpg'/>
<img src='8.jpg'/>
<img src='9.jpg'/>
<img src='10.jpg'/>
<img src='11.jpg'/>
<p></p>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//页面加载完成后直接执行
$(function(){
var imgL= $('.pic img').size();
var deg=360/imgL;
var roY=0;
var roX=-10;
var xN=0;
var yN=0;
$('.pic img').each(function(i){
$(this).css({
'transform':'rotateY('+i*deg+'deg)translateZ(350px);'
});
$(this).attr('ondragstart','return false');
});
$(document).mousedown(function(ev){
var x_=ev.clientX;
var y_=ev.clientY;
// console.log('鼠标按下！');
$(this).bind('mousemove',function(ev){
// console.log("鼠标在移动");
var x=ev.clientX;
var y=ev.clientY;
xN=x-x_;
yN=y-y_;
roY+=xN*0.2;
roX-=yN*0.1;
//用鼠标画出div格子，drag，利用格子的间距模仿快慢
// $('body').append('<div style="width:5px;height:5px;background:#f00;position:absolute;top:'+y+'px;left:'+x+'px;"></div>')
$('div.pic').css({
transform:'perspective(800px) rotateY('+roY+'deg) rotateX('+roX+'deg)'
});
x_=ev.clientX;
y_=ev.clientY;
});
}).mouseup(function(){
//console.log('鼠标抬起');
$(this).unbind('mousemove');
var play=setInterval(function(){
xN*=0.95;
yN*=0.95
if(Math.abs(xN)<1&&Math.abs(yN)<1)
//停止这个函数
clearInterval(play);
roY+=xN*0.2;
roX-=yN*0.1;
$('div.pic').css({
transform:'perspective(800px) rotateY('+roY+'deg) rotateX('+roX+'deg)'
});
console.log(xN);
},30);
});
});
</script>
</body>
</html>
相关推荐
在本示例中，我们将探讨如何使用jQuery和CSS3创建一个3D拖拽相册效果。这个效果允许用户通过鼠标拖动来旋转相册，展示3D视角下的不同照片。以下是如何实现这一功能的关键知识点： 1. **CSS3 3D Transform**： CSS3...
总结，这个项目不仅展示了jQuery和CSS3在前端开发中的应用，还涵盖了互动相册拼图的实现原理。对于前端开发者来说，这是一个极好的学习和实践案例，能够提升对动态效果和用户交互的理解与技能。
**jQuery + CSS 图片墙相册拖动效果详解** 在网页设计中，视觉效果和用户体验是至关重要的元素。"jQuery + CSS 图片墙相册拖随意拖动效果" 是一种创新且互动性强的设计手法，它允许用户在网页上自由拖动图片墙，...
总结，通过结合jQuery UI的拖放功能、CSS样式和Ajax通信，我们可以实现拖拽图片并交换它们在页面上的位置。在拖放过程中，用户可以直观地调整图片顺序，同时后台（如数据库）也能同步更新这些变化。这种交互方式提高...
6. **3D图片旋转**：利用CSS3的3D变换，可以实现图片的立体旋转，增强视觉冲击力。例如，`rotateX`、`rotateY`和`perspective`属性的应用。 7. **缩放和拖拽**：JavaScript可以提供图片的拖拽功能，通过监听鼠标...
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
满屏烟花3D相册 <link rel="stylesheet" href="css/style.css"/> <!--播放器css--> <link rel="stylesheet" href="css/common.css"/> <!--相册css--> <link type="text/css" href="css/photo.css" rel=...
107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery...
107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery...
jQuery图片特效smooth-rotatable-images-css3-jquery jQuery图片特效tz-todoapp jQuery图片特效youtube-player jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide jQuery大气banner带时间线自动播放的焦点图轮番切换...
jquery+css3时钟效果 jquery+css3曲线特效图： jquery仿wp动画悬浮标签云插件 jquery倒计时广告 jquery右侧悬浮在线客服代码 jquery坐标图片框裁剪 jquery多功能树插件 jquery实现html5图片上传 jquery小火箭返回...
"jQuery 3D万花筒相册旋转效果"是一个巧妙地结合了3D视觉和jQuery技术的图片展示方案，它通过鼠标拖动实现相册的3D旋转，为用户带来独特的视觉享受。这个效果是基于jQuery 1.11.0.min.js库构建的，下面我们将深入...
3. 兼容性处理：考虑到老旧浏览器可能不支持CSS3的3D变换，可以使用jQuery的动画功能实现2D翻页效果作为备选方案。 总结，使用jQuery实现3D立体翻书效果的电子书相册是一种创新且吸引人的网页设计手法。通过理解...
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿...
实现效果： jQuery CSS3流畅相册特效，适用于个人网站，例如博客之类的，可以在网页中加上此特效，让网页更加酷炫，相册的图片是可以拖动的，php中文网推荐下载！
这通常通过修改CSS样式（如设置元素的宽度和高度）来实现，或者使用canvas元素进行画布上的图像操作。 3. **图像上传**：当用户释放鼠标后，将截取区域的坐标发送到服务器。可以使用jQuery的AJAX方法，如$.ajax或$....
在QQ相册的场景中，我们可以使用CSS来实现相册的网格布局，使图片以整齐的方式排列。CSS3的 Flexbox 或 Grid 布局可以很好地完成这项任务。此外，我们还可以使用CSS实现图片的预加载效果，确保图片在用户滚动时能够...
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿...