[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及以下浏览器.效果图如下 : ...
随机推荐
- WebService之SOAP
SOAP(Simple Object Access Protocol),它是一种标准消息传递协议,通常是Web Service的事实标准.SOAP是以XML为基础,SOAP消息格式是由XML Sche ...
- 解题报告-Perfect Squares
Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...
- DNS开源服务器BIND最小配置详解
一,简介 相对于存储和大数据领域,CDN是一个相对小的领域,但行行出状元,BIND就是CDN领域的蝉联N届的状元郎.BIND是一款非常常用的DNS开源服务器,全球有90%的DNS用BIND实现.值得一 ...
- socket的protocal参数
Documentation for socket() on Linux is split between various manpages including ip(7) that specifies ...
- 复利计算--web版--总结--软件工程
复利计算项目 估计用时 实际用时 时间(小时) 5.5小时 6.5小时 总共代码行 500 550 功能包含 单利/复利计算,本金计算,求投资年限,求投资项目利率估计 (计算利息和,计算时间,计算 ...
- smarty if
<{if data}> <input type="submit" value="修改" /> <{else}> <in ...
- C语言条件编译及编译预处理阶段（转）
一.C语言由源代码生成的各阶段如下: C源程序->编译预处理->编译->优化程序->汇编程序->链接程序->可执行文件 其中 编译预处理阶段,读取c源程序,对其中的 ...
- 使用windows server2012时FileZilla客户端连接时报150 Opening data channel for directory listing of "/" 响应:425 Can't open data connection
425 Can't open data connection 和 读取目录列表失败 问题解决 这个问题主要是由于使用Passive Mode模式造成的,解决这个问题很简单: 1.在ftp服务软件中设置 ...
- Android 上传文件到XP
Android部分: AsyncHttpClient client = new AsyncHttpClient(); RequestParams requestParams = new Request ...
- openstack网络管理命令
1.获取网络列表 [root@cc ~(keystone_admin)]# neutron net-list +--------------------------------------+----- ...