[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及以下浏览器.效果图如下 : ...
随机推荐
- vector中resize()和reserve()的区别
先看看<C++ Primer>中对resize()函数两种用法的介绍: 1.resize(n) 调整容器的长度大小,使其能容纳n个元素. 如果n小于容器的当前的size,则删除多出来的元素 ...
- react native 触摸Touchable***的区别（TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback）
一.问题背景: react native的跨平台开发没有button的概念,而是使用touchable系列实现点击触发效果. 而touchable系列就有四个之多,而且相互之间仍有较大差别,这就给我们 ...
- mybatis sql语句等日志打印
加settings <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE configuration ...
- 启动memcached
/usr/local/bin/memcached -d -c -m -u root
- [Selenium]等待元素出现之后再消失，界面上的loading icon都属于这种类型，之前的方法总是卡死，换这种方法目前还好用的
等待元素出现之后再消失,界面上的loading icon都属于这种类型,之前的方法总是卡死,换这种方法目前还好用的 /** * Check if the element present with cu ...
- UVa 12186 Another Crisis （DP）
题意:有一个老板和n个员工,除了老板每个员工都有唯一的上司,老板编号为0,员工们为1-n,工人(没有下属的员工),要交一份请愿书, 但是不能跨级,当一个不是工人的员工接受到直系下属不少于T%的签字时, ...
- string 转换为枚举对应的值
public static Object Parse(Type enumType,string value) 例如:(Colors)Enum.Parse(typeof(Colors), "R ...
- 23 DesignPatterns学习笔记：C++语言实现 --- 2.4 Composite
23 DesignPatterns学习笔记:C++语言实现 --- 2.4 Composite 2016-07-22 (www.cnblogs.com/icmzn) 模式理解
- B-spline Curves 学习之B样条曲线性质（5）
B-spline Curves: Important Properties 本博客转自前人的博客的翻译版本,前几章节是原来博主的翻译内容,但是后续章节博主不在提供翻译,后续章节我在完成相关的翻译学习. ...
- [label][JavaScript扩展] JavaSCript扩展
http://www.idangero.us/sliders/swiper/ ,swipper for mobile terminal.