css3+js打造炫酷图片展示
<!DOCTYPE html>
<html onselectstart="return false">
<!-- onselectstart="return false" 禁止页面复制-->
<head lang="en">
/*onselectstart="return false"*/
<meta charset="UTF-8">
<title>document</title>
<!--一共用的就是40到50个单词记住即可-->
<!-- div.pic 是创建一个盒子-->
<style>
*{
margin: ;
padding: ;
}
body{
background-color: #;
}
div.pic{
width: 120px;
height: 180px; /* 133:200 约等于 4:6 */
/*border: 1px dotted #f00;*/
margin: 200px auto ;/*上---左右---下 */
position: relative;
transform-style: preserve-3d;
transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
}
div.pic img{
position: absolute;
width: %;
height: %;
border-radius: 5px; /*加上圆角*/
box-shadow: 0px 0px 10px #fff;/*box-shadow 属性向框添加一个或多个阴影*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(,,,) %,rgba(,,,0.5) %); /*box-reflect倒影属性练习*/
/*-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1) , 这是一个渐变*/
}
div.pic p{
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center,600px 600px,rgba(,,,0.3),rgba(,,,));
left: %;top: %;
margin-top: -50px;
margin-left: -600px;
transform: rotateX(90deg);
border-radius: 600px;
}
</style>
</head>
<body>
<!--div 长方型的区域-->
<div class="pic">
<img src="img/1.jpg" alt="1.jpg"/>
<img src="img/2.jpg" alt="2.jpg"/>
<img src="img/3.jpg" alt="3.jpg"/>
<img src="img/4.jpg" alt="4.jpg"/>
<img src="img/5.jpg" alt="5.jpg"/>
<img src="img/6.jpg" alt="6.jpg"/>
<img src="img/7.jpg" alt="7.jpg"/>
<img src="img/8.jpg" alt="8.jpg"/>
<img src="img/9.jpg" alt="9.jpg"/>
<img src="img/10.jpg" alt="10.jpg"/>
<img src="img/11.jpg" alt="11.jpg"/>
<p></p>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
//设定初始变化值
var translate=;
//文档添加鼠标滚轮事件，demo没写兼容，不支持火狐
document.addEventListener("mousewheel",function(e){ //缩放
var distance= //每次滚轮缩放变化值
if(e.wheelDelta>){ //方向
clearInterval(play)
translate+=distance //perspective值变化
$("div.pic").css({
transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)'
}); //css3变化 }else if(e.wheelDelta<){
clearInterval(play)
translate-=distance
$("div.pic").css({
transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)'
});
}
})
var imgL = $("div.pic img").size(); //img数量
// alert(imgL);
var deg = / imgL; //角度
var toY = , toX = -;
var xN = ,yN = ;
var play = null; $("div.pic img").each(function(i){
$(this).css({
'transform':'rotateY('+i*deg+'deg) translateZ(350px)' //css设置，分别设定变化角度，同样的z轴变化，形成一个圆
});
$(this).attr("ondragstart","return false");
/*浏览器禁止拖拽功能*/
});
$(document).mousedown(function(ev){
/*console.log("shu biao an xia le !");*/
var x_ = ev.clientX;
var y_ = ev.clientY;
clearInterval(play);
$(this).bind("mousemove",(function(ev){
/* console.log('yi dong !');*/
var x = ev.clientX;
var y = ev.clientY;
xN = x - x_;
yN = y - y_;
toY += xN*0.2;
toX -= yN*0.1; //$("body").append('<div style="width:5px;height:5px;background:#f00;position:absolute;top:"+y+"px;left:"+x+"px;"></div>')/*打点计数器*/
$("div.pic").css({
transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)'
});
x_ = ev.clientX;
y_ = ev.clientY;
}));
}).mouseup(function(){
$(this).unbind("mousemove");
var play = setInterval(function(){
xN *= 0.95;
yN *= 0.95;
if ( Math.abs(xN) < && Math.abs(yN) < )/*Math绝对值*/clearInterval(play);
toY += xN*0.2;
toX -= yN*0.1;
$("div.pic").css({
transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)'
});
},);
//return play
});
});
</script>
</body>
</html>
借用的网络分享的一个demo，在上面添加了鼠标滚轮放大缩小（没有写兼容，火狐不支持）效果。
有几个知识点记录下：
1.鼠标滚轮事件
在jquery中没有滚轮事件，所以需要我们自己去码
其中ie，chorme，safri中事件为mouseWheel，火狐为DOMMouseScroll，判断滚动方向也不一样，前4者为wheelDelta，后者为detail.detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120。
2.perspective
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。
3.rotateY
rotateX()、rotateY()和rotateZ()分别为沿X，Y，Z方向旋转。
css3+js打造炫酷图片展示的更多相关文章
- GJM ：JS + CSS3 打造炫酷3D相册 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- 9种CSS3炫酷图片展开预览展示动画特效
详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...
- JS打造的跟随鼠标移动的酷炫拓扑图案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JParticles 2.0 发布，打造炫酷的粒子特效
JParticles 2.0 发布,打造炫酷的粒子特效.不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,不然...还是不啰嗦了,我们进入正题吧 简单介绍一下 JParticles 2 ...
- 你要是还学不会，请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床 经过前面两弹的介绍,相信大家对图床都不陌生了吧, 但是小魔童觉得这样做法还是不方便,使用 ...
- Android ViewPager 打造炫酷欢迎页
Android ViewPager 打造炫酷欢迎页 ViewPager是Android扩展v4包中的类,这个类可以让用户切换当前的View.对于这个类的应用场景,稍加修改就可以应用到多个环境下.比如: ...
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的！
关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用
- Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
1.概述 哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过 TabPageIndicator,并且很多知名APP都使用过这个 ...
- java+js实现完整的图片展示本地目录demo
java+js实现完整的图片展示本地目录demo 最近的项目满足需要,实现通过一个前端button点击事件,流行音乐浏览下的全部图片: 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径 ...
随机推荐
- MyEclipse 关闭鼠标悬停提示
preference --> MyEclipse -->Files and Editors--> Common Editor Preference --> Hovers 把里面 ...
- Go1.7改善了编译速度并且会生成更快的代码
Go1.7的开发周期正在接近它的下一个里程碑,Go的提交者Dave Cheney报告了子即将发布的版本中,团队成员在语言工具链上的努力. Cheney称,基于当前的开发状态,Go1.7将会很容易就成为 ...
- Oracle 【IT实验室】数据库备份与恢复之：如何对Oracle数据库文件进行恢复与备份
任何数据库在长期使用过程中,都会存在一定的安全隐患.对于数据库管理员来说不能仅寄希望于计算机操作系统的安全运行,而是要建立一整套的数据库备份与恢复机制.当数据库发生故障后,希望能重新建立一个完整的数据 ...
- 关于ICE
转自:http://wenda.chinabaike.com/b/38322/2013/1103/614756.html 一.ICE产生的背景 基于信令协议的多媒体传输是一个两段式传输.首先,通过信令 ...
- OpenMesh 读写网格控制（读取写入纹理坐标，法向等）
OpenMesh读取网格默认是不自动读取obj网格中的法向,纹理坐标等信息的,写入网格同样也是.所以要读取(或写入)这些信息需要修改默认的选项. 先看一下其读写网格的函数 template<cl ...
- 用C#基于WCF创建TCP的Service供Client端调用
本文将详细讲解用C#基于WCF创建TCP的Service供Client端调用的详细过程 1):首先创建一个Windows Service的工程 2):生成的代码工程结构如下所示 3):我们将Servi ...
- oracle本机登录不上dba的权限不足错误
说明:因遇到“sqlplus / as sysdba”登录oracle时遇到权限不足(ora-01031)错误:百度到以下资料,原文链接: http://www.xifenfei.com/2011/1 ...
- 智能车学习（八）——菜单的实现
一.代码分享 1.头文件 #ifndef __MENU_H #define __MENU_H /***********宏定义************/ //页面声明 typedef enum Menu ...
- TOMCAT配置外部应用
原来我们都是把项目放到webapps目录下,但其实是可以把项目放到其他文件夹下的,如果把项目放到其他目录下同时也希望tomcat可以运行它,有两种方法: 第一种方法: conf/server.xm ...
- Redis 的 5 个常见使用场景
2015-07-22 23:31:46 本文由 伯乐在线 - 刘晓鹏 翻译,黄利民 校稿.未经许可,禁止转载!英文出处:Joe Engel.欢迎加入翻译组. 在这篇文章中,我们将阐述 Redis 最常 ...