[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及以下浏览器.效果图如下 : ...
随机推荐
- JS是面向过程、面向对象还是基于对象？面向对象的代码体现
一.问题 javascript是面向对象的,还是面向过程的?基于对象是什么意思? 对象: 指的是对某一类事物进行抽象,抽象出这一类事物共同的特征以及行为(也就是属性和方法),那些拥有这一共同属性和方法 ...
- HDU 2044 一只小蜜蜂...(递推，Fibonacci)
题意:中文题. 析:首先要想到达第 n 个蜂房,那么必须经 第 n-1 或第 n-2 个蜂房,那么从第 n-1 或第 n-2 个蜂房到达第 n 个,都各自有一条路线, 所以答案就是第 n-1 + 第 ...
- 安装及运行 RabbitMQ 服务器 （linux） 失败！ 安装erlang 失败，无法继续
文档 http://www.rabbitmq.com/install-rpm.html 安装前置条件 Before installing RabbitMQ, you must install Erla ...
- redis cluster 使用中出现的问题
问题一 redis.clients.jedis.exceptions.JedisClusterMaxRedirectionsException: Too many Cluster redirectio ...
- UIWebview与js交互[转]
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- Max Sum -- hdu -- 1003
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1003 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- 《全民无双》锁链刀光程序生成算法，即U3D——刀光轨迹插件的改进
<全民无双>手游12月17日上线登录APPSTore付费榜前十,首先特别恭喜还在<全民无双>坚持奋战的老同事们,顺便技术分享一下以前参与项目时的工作 锁链刀软武器刀光轨迹 之前 ...
- Android-Sqlite3的使用
Sqlite3的使用: adb remount --> 挂载上 adb devices -->查看设备 adb shell -->进入Android文件系统 cd /data/dat ...
- Android-有序广播明确指定接收者
在上一篇博客,Android-有序广播是可以中断的,介绍了 有序广播是可以中断的,但还有一种例外情况:明确指定接收者的有序广播是无法中断的,一定会发送到指定的接收者 AndroidManifest.x ...
- TortoiseSVN本地版本控制管理
TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端.下载地址:https://tortoisesvn.net/downloads.html. 安装好TortoiseSV ...