transform—切割轮播图
效果演示:
1、结构分析
第一步:在一个div里面有显示图片的ul标签(1个)和左右切换的a标签(2个);
第二步:ul标签中有5个li标签,li标签浮动,每个li标签的宽度占ul宽度的五分之一,高度为100%,每一个li标签都有4个span标签,span和li的宽高相等,span标签代表li标签的上下前后4个面,设置每一个span的背景图片,每个span标签都显示图片的五分之一。
每一个li的样式:
5个li标签浮动组成的样式(我只画了一个右边完全的li标签样式):
第三步:给a标签设置宽高并且定位到合适的位置,
第四步:js注册给a标签注册点击事件:先在点击事件外设置索引值,例如:index=0;
然后在点击事件里面,通过jQuery插件,获取li标签$('ul li'),给li标签添加过渡效果{'transition':'all 1s'};其中all代表:{'transform':'rotateX( '+ angel +'deg)'},并且调用each(function(i,e){})函数,设置从左到右的每一个li标签的过渡效果延时0.5 * i s。
each(function(i,e){
var delay = 0.5 * i;
$(this).css({'transition':delay + 's'});
});
2、代码实现
第一步,创建标签
<div class="box">
<ul>
<li><span></span><span></span><span></span><span></span></li>
<li><span></span><span></span><span></span><span></span></li>
<li><span></span><span></span><span></span><span></span></li>
<li><span></span><span></span><span></span><span></span></li>
<li><span></span><span></span><span></span><span></span></li>
</ul>
<a href="javascript:;" class="prev"> < </a>
<a href="javascript:;" class="next"> > </a>
</div>
第二步,设置CSS样式
<style>
// 设置盒子居中,并且定位
.box {
margin: 100px auto;
width: 600px;
height: 380px;
position: relative;
}
// 清除ul,li默认值
ul,li {
margin: 0;
padding: 0;
}
// 设置ul绝对定位
.box ul {
position: absolute;
width: 100%;
height: 100%;
}
// 设置li标签的宽高,浮动标签在一行上显示,设置转换为立体效果transform-style: preserve-3d;
.box ul li {
float: left;
list-style: none;
width: 120px;
height: 100%;
position: relative;
transform-style: preserve-3d;
}
// 设置左右a标签的样式,并且定位和合适位置
.box>a {
width: 30px;
height: 50px;
line-height: 50px;
display: block;
color: aliceblue;
font-size: 30px;
text-align: center;
text-decoration: none;
position: absolute;
top: 160px;
background-color: rgba(0, 0, 0, 0.6);
}
.box>a.prev {
left: 0;
}
.box>a.next {
right: 0;
}
// 设置每一个li标签里的span的大小和li标签一样大,
.box li span {
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0px;
background-repeat: no-repeat;
}
// 设置每一列span的背景图片的显示位置(每一个span占图片大小的五分之一,在每一列显示图片的不同位置,从而达到显示完整图片的作用)
.box ul li:nth-child(1) span {
background-position: 0 0;
}
.box ul li:nth-child(2) span {
background-position: -120PX 0;
}
.box ul li:nth-child(3) span {
background-position: -240px 0;
}
.box ul li:nth-child(4) span {
background-position: -360px 0;
}
.box ul li:nth-child(5) span {
background-position: -480px 0;
}
// 设置每一个li的第几个span为相同的背景图片
// 注意:背景图片的尺寸必须和.box盒子一样大
.box li span:nth-child(1) {
background-image: url('./images/A.jpg');
transform: rotateZ(190px);
}
.box li span:nth-child(2) {
background-image: url('./images/N.jpg');
transform: rotateX(90deg) translateZ(190px);
}
.box li span:nth-child(3) {
background-image: url('./images/Q.jpg');
transform: rotateX(180deg) translateZ(190px);
}
.box li span:nth-child(4) {
background-image: url('./images/S.jpg');
transform: rotateX(-90deg) translateZ(190px);
}
</style>
第三步:JS代码实现
<script>
// 自定义索引【轮播图的核心】
var index = 0;
// 设置锁,防止频繁点击出现轮播混乱
var flag = true;
$('.prev').on('click',function(){
// 如果为false,中止程序执行
if(!flag) return;
// 如果为true把锁锁住,变成false
flag = false;
// 索引减一
index--;
// 点击一下设置旋转90度
var angel = -index * 90;
// 设置旋转的css样式
// each:回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。
$('ul li').css({'transition':'all 1s'}).css({'transform':'rotateX( '+ angel +'deg)'}).each(function(i,e){ // 设置每一个li的延迟时间
var delay = 0.5 * i;
$(this).css({'transition':delay + 's'});
});
});
$('.next').on('click',function(){
if(!flag) return;
flag = false;
index++;
var angel = -index * 90;
$('ul li').css({'transition':'all 1s'}).css({'transform':'rotateX( '+ angel +'deg)'}).each(function(i,e){
var delay = 0.5 * i;
$(this).css({'transition':delay + 's'});
});
});
// 执行完一次轮播把锁打开
$('ul li:last').on('transitionend', function () {
/*开锁*/
flag = true;
});
</script>
transform—切割轮播图的更多相关文章
- CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
- 带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- 3D切割轮播图
预览图: 实现原理:将图片切割构建一个和ul(电脑屏幕)同一个轴的立方体,利用延时旋转实现切割效果 知识点:transform-style属性(必须搭配transform属性使用) 值 描述 flat ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- C3属性的轮播图(持续更新)
天气好冷,都不想写代码.就先写个没有焦点的轮播图,过两天在补全. 用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX() 只做了轮播和 鼠标进入停止轮播 ...
- 最最最简单的轮播图(JQuery)
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
随机推荐
- 034、Java中自增之++在前面的写法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Codeforces Forethought Future Cup Elimination Round 选做
1146C Tree Diameter 题意 交互题.有一棵 \(n(n\le 100)\) 个点的树,你可以进行不超过 \(9\) 次询问,每次询问两个点集中两个不在同一点集的点的最大距离.求树的直 ...
- 吴裕雄--天生自然java开发常用类库学习笔记:Iterator接口
import java.util.List ; import java.util.ArrayList ; import java.util.Iterator ; public class Iterat ...
- 读取多张MNIST图片与利用BaseEstimator基类创建分类器
读取多张MNIST图片 在读取多张MNIST图片之前,我们先来看下读取单张图片如何实现 每张数字图片大小都为28 * 28的,需要将数据reshape成28 * 28的,采用最近邻插值,如下 def ...
- dedecms 标签使用 runphp=php 获取文章静态地址
[field:id runphp='yes'] $url=GetOneArchive(@me); @me=$url['arcurl']; [/field:id]
- asp.net mvc3用file上传文件大小限制问题
在Windows2008下,如果上传比较大的文件,可能会出现404错误,(请求筛选模块被配置为拒绝超过请求内容长度的请求). 可通过如下方法解决: 打开URTracker根目录下的web.config ...
- node - 获取当前时间并格式化
1,安装 moment模块 cnpm i moment --save 2,引入 var moment = require('moment'); 3,获取当前时间并格式化 var current_tim ...
- javascript 创建私有变的三个方法
//方法一 function m() { //这是私有变量 let p = 10; //这是私有方法 function pr() { return false; } //读取或者设置 私有变量和方法 ...
- 六十五、SAP中通过BREAK-POINT下断点,进行调试
一.代码如下,有2个断点的按钮,可以可以写入BREAK-POINT人工断点 二.运行之后,程序会被断下来, 四个执行按钮,意思分别为:单步进入子程序,单步不进入子程序,返回外面,执行到断点处 三.我们 ...
- mencoder及ffmpeg的基本命令
前段时间想在ubuntu下对视频进行格式转换,多方查找之后,接触了mencoder与ffmpeg. mencoder mencoder 是一款命令行方式的视频处理软件,是Mplayer自带的编码工具, ...