[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及以下浏览器.效果图如下 : ...
随机推荐
- S 导员工信息
EXCEL模板 [Public] ConnectString=host="siebel://10.10.1.174:2321/SBA_NR_DEV/SMObjMgr_chs ConnectU ...
- 第6章 数组、指针与字符串（一）基于范围的for循环
- git 常见报错
1. refusing to merge unrelated histories : 拒绝合并无关的历史 teminal中输入 git pull origin master --allow-unrel ...
- 运行Junit单测时遇到的问题
现在有两个办法解决: 1.junit版本降到4.10 2.导入hamcrest-core-1.3.jar 官网:JUnit now uses the latest version of Hamcres ...
- setitemdata 32位 or 64位
我用SetItemData 和GetItemData把数据库一条数据导入到CListctrl 32位下 程序都可以跑 GetItemData能得到自定义类数据 可以64位得不到?
- Chrome 强制刷新缓存的方法
https://jingyan.baidu.com/article/11c17a2c2a9e27f446e39d98.html
- webform版部分视图与请求拦截
.主控前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...
- oracle 分页其实一个子查询就好了,没理解的自然只能见样学样
.首先rownum是一个查询缓存级别的东西,所以以下写法是错误的 ; 因为rn其实不是student表的内容,看做一个缓存编号就好 但是有些人不服了,加个a.rn<= ;结果还是不行,这下相信了 ...
- Tomcat8 配置APR模式
首先说明下tomcat connector运行的3中模式及区别: 1)bio 默认的模式,同步阻塞,性能非常低下,没有经过任何优化处理和支持. 2)nio 同步非阻塞,利用java的异步io护理技术 ...
- 解决windows搭建jenkins执行selenium无法启动浏览器问题
因为jenkins是用windows installer 安装成windows的服务了,那么jenkins是一个后台服务,所以跑selium cases 的时候不显示浏览器 Step 1. Contr ...