[JS] 四角度旋转特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0; }
#box{
width: 1000px;
height: 575px;
border: 3px solid #ff00ff;
margin: 150px auto;
}
#box ul li{
position: relative;
float: left;
margin-right: 32px;
margin-bottom: 32px;
list-style: none;
width: 216px;
height: 170px;
background: #999999;
overflow: hidden;
}
#box ul li a{
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#box ul li a span{
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.front-face{
background-image: url(img/pic1.jpg) ;
z-index: 2;
}
.back-face{
background-image: url(img/pic2.jpg) ;
z-index: 1;
}
/*从顶部*/
.from-top{
z-index: 3;
transform-origin: 0% 0%;
animation: from-top 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/
}
@-webkit-keyframes from-top{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(-90deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(0deg);
}
}
.to-top{
transform-origin: 0% 0%;
animation: to-top 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ }
@-webkit-keyframes to-top{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(0deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(-90deg);
}
} .from-bottom{
z-index: 3;
transform-origin: 100% 0%;
animation: from-bottom 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/
}
@-webkit-keyframes from-bottom{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(90deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(0deg);
}
} .to-bottom{
transform-origin: 100% 0%;
animation: to-bottom 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ }
@-webkit-keyframes to-bottom{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(0deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(90deg);
}
} .from-left{
z-index: 3;
transform-origin: 0% 100%;
animation: from-left 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/
}
@-webkit-keyframes from-left{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(90deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(0deg);
}
} .to-left{
transform-origin: 0% 100%;
animation: to-left 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ }
@-webkit-keyframes to-left{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(0deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(-90deg);
}
} .from-right{
z-index: 3;
transform-origin: 100% 100%;
animation: from-right 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/
}
@-webkit-keyframes from-right{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(90deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(0deg);
}
} .to-right{
transform-origin: 100% 100%;
animation: to-right 0.23s ease-out;/*css3自定义动画 动画名称 动画时间 动画方式*/ }
@-webkit-keyframes to-right{/*动画关键帧*/
from{/*一开始*/
z-index: 3;
transform: rotate(0deg);
}
to{/*结束*/
z-index: 3;
transform: rotate(90deg);
}
}
</style>
</head>
<body>
<div id="box">
<ul>
<!--
作者：871979853@qq.com
时间：2017-05-18
描述：
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>
<li>
<a href="#">
<span class="front-face"></span>
<span class="back-face"></span>
</a>
</li>-->
</ul>
</div>
</body>
</html>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var oUl = oBox.getElementsByTagName('ul')[0];
var aLi = oBox.getElementsByTagName('li');
var span1 = document.getElementsByClassName('front-face');
var span2 = document.getElementsByClassName('back-face');
var numX = 4;
var numY = 3;
var liW = oBox.clientWidth/numX;
var liH = oBox.clientHeight/numY;
for(var i=0;i<numX*numY;i++){
oUl.innerHTML += '<li>\
<a href="#">\
<span class="front-face"></span>\
<span class="back-face"></span>\
</a>\
</li>'; }
//背景图片位置计算
for (var i=0;i<span1.length;i++) {
i%=numX*numY;
var iX = i%4;
var iY = Math.floor(i/numX);
span1[i].style.backgroundPosition =''+ (-liW*iX)+'px ' +(-liH*iY)+'px';
span2[i].style.backgroundPosition =''+ (-liW*iX)+'px ' +(-liH*iY)+'px'; }
//鼠标滑入算法
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseenter = function(e){
e = e||event;
move.call(this,e,true);//call方法就是把this传入
} aLi[i].onmouseleave = function(e){
e = e||event;
move.call(this,e,false);
}
}
function move(e,boo){
e = e||event;
var x = e.pageX;
var y = e.pageY;
var top = this.offsetTop;
var bottom = top+this.clientHeight;
var left = this.offsetLeft;
var right = left + this.clientWidth; var sT = Math.abs(y-top);
var sB = Math.abs(y-bottom);
var sL = Math.abs(x-left);
var sR = Math.abs(x-right);
console.log(sT,sB,sL,sR);
var a = Math.min(sT,sB,sL,sR);
var target = this.children[0].children[1];
switch(a){
case sT:
boo?target.className = 'back-face from-top':target.className = 'back-face to-top';
break;
case sB:
boo?target.className = 'back-face from-bottom':target.className = 'back-face to-bottom';
break;
case sL:
boo?target.className = 'back-face from-left':target.className = 'back-face to-left';
break;
case sR:
boo?target.className = 'back-face from-right':target.className = 'back-face to-right';
break;
}
}
}
</script>
<!--
描述：影响加载速度 性能
1.减少http请求 可以用精灵图
2.减少体积（字节数）
3.js代码：能封装的封装 能用css实现的动画不要用js
4.模块化，可插拔式开发
-->
[JS] 四角度旋转特效的更多相关文章
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- Windows Store App 旋转特效
使用Projection类可以实现界面元素的三维效果,它可以使界面上的元素在三维空间中沿着X轴.Y轴或者Z轴旋转一定的角度,在透视转换中此类又称为元素的Projection属性,用于对元素使用3D特效 ...
- Delphi实现图像文本旋转特效完整代码
Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...
- unity2D以最小的角度旋转到目标方向（y方向为角色的主方向）
一.使用向量原理转换到目标方向 为了让角色的自身y转向目标方向,并且以最小角度旋转,要点是获得当前方向与目标方向的叉值,从而判断应该旋转的方向 float rotateSpeed; //相对目标位置运 ...
- 一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
随机推荐
- 在VMware Workstation中安装Ubuntu Server 16.04.5图解教程
最近要在Ubuntu中部署openstack,为了节省空间和内存,最终选择了Ubuntu服务器.看了很多前辈和大佬的安装教程,在这里记录一下我自己的Ubuntu Server 16.04.5的安装过程 ...
- ShaderForge打造自定义光照模型
[ShaderForge打造自定义光照模型] 1.Lambert逻辑图. 2.Blinn-Phong逻辑图. 参考:https://www.youtube.com/watch?v=EjCXwV0YYd ...
- python将url转换成二维码
准备环境 python生成二维码,需要依赖包qrcode和PIL(二维码的实质就是一个url.) python3安装PIL:pip install PIL python2安装PIL:pip insta ...
- MongoDB中使用的SCRAM-SHA1认证机制
摘要: 介绍 SCRAM是密码学中的一种认证机制,全称Salted Challenge Response Authentication Mechanism. SCRAM适用于使用基于『用户名:密码』这 ...
- windows 安装git
搭建环境:windo server 2012 方案: 服务器端:gitblit.下载地址:http://www.gitblit.com/ 客户端:git for windows.下载地址:https: ...
- C#重启IIS
using System.Diagnostics; using System.ServiceProcess; //ServiceController sc1 = new ServiceControll ...
- UX术语详解：任务流，用户流，流程图以及其它全新术语
以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 用户体验拥有一长串专业的术语和可交付内容.当在线查看UX相关职位描述时,所罗列的这类术语更是 ...
- java 控制反转和依赖注入的理解
开始好好学习java基础和思想~ 控制反转(IOC)是Spring框架的核心思想,用我自己的话说,就是你要做一件事,别自己可劲new了,你就说你要干啥,然后外包出去就好~ 依赖注入(DI) 在我浅薄的 ...
- 8-5 Navicat工具与pymysql模块
一 Navicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库 需要掌握的基本操作 ...
- ros kinect calibration
RGB camera Bring up the OpenNI driver: roslaunch openni_launch openni.launch Now follow the standard ...