颗粒翻页(css3效果展示)
用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position;用来覆盖原来的一张图片(创建span的时候利用DOM操作,利用两个循环分别创建行和列,然后在循环中创建元素和设置元素css属性);然后在点击的时候添加事件,使用transform设置翻转效果,这里,我们可以设置逐个翻转和斜线翻转(斜线翻转利用的是span的行和列相加值相等原理);这里需要注意的是设置图片播放顺序,span上的图片永远比下面div的整张图片小一级,并且在更换图片的完成的时候瞬时间更换span和div的图片,使之继续符合上述的图片层级,这个时间差,人眼是无法识别的。
大体我的思路就是这样,写的不是很清楚,现在想来,做一个合格的优秀的程序员,语言表达确实是比较重要的,因为分享和学习才是一个人不断进步的基础。
话不多说,直接上代码,希望大家一起分享一起进步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颗粒翻转</title>
<style>
*{margin:0;padding:0;}
#box{width:700px;
height: 400px;
margin:50px auto;
position: relative;
}
#box span{
position: absolute;
width: 100%;
height: 100%;
transition:1s all ease;
transform:rotateY(0deg);
transform-style:preserve-3d;
}
#box span em{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#box .front{
background-image: url("img/0.jpg");
transform:translateZ(1px);
}
#box .back{
background-image: url("img/1.jpg");
transform:translateZ(-1px) scale(-1,1);
}
#box:active span{
/*transform:rotateY(180deg);*/
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var C = 7;
var R = 4;
for(var r = 0;r<R;r++){
for(var c = 0;c<C;c++){
var oSpan = document.createElement('span');
oSpan.style.width = oBox.offsetWidth/C +'px';
oSpan.style.height = oBox.offsetHeight/R +'px';
oSpan.style.left = oBox.offsetWidth/C*c+'px';
oSpan.style.top = oBox.offsetHeight/R*r+'px';
oSpan.innerHTML ='<em class="front"></em><em class="back"></em>';
oBox.appendChild(oSpan);
oSpan.children[0].style.backgroundPosition = -oSpan.offsetLeft+'px '+-oSpan.offsetTop+'px';
oSpan.children[1].style.backgroundPosition = -oSpan.offsetLeft+'px '+-oSpan.offsetTop+'px';
oSpan.r = r;
oSpan.c = c;
}
}
var iNow=0;
var bReady = true;
oBox.onclick = function(){
if(bReady==false){return;}
bReady = false;
iNow++;
var aSpan = oBox.children;
for(var i = 0;i<aSpan.length;i++){
aSpan[i].style.transition = '1s all ease '+100*(aSpan[i].r+aSpan[i].c)+'ms';
aSpan[i].style.transform ='rotateY(180deg)';
}
//换图
aSpan[aSpan.length-1].addEventListener('transitionend',function(){
bReady = true;
for(var i = 0;i<aSpan.length;i++){
aSpan[i].style.transition = 'none';
aSpan[i].style.transform ='rotateY(0deg)';
aSpan[i].children[0].style.backgroundImage ='url("img/'+(iNow%3)+'.jpg")';
aSpan[i].children[1].style.backgroundImage ='url("img/'+(iNow+1)%3+'.jpg")';
}
},false)
};
};
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
颗粒翻页(css3效果展示)的更多相关文章
- 创意HTML5文字特效 类似翻页的效果
原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...
- 3D版翻页公告效果
代码地址如下:http://www.demodashi.com/demo/12830.html 前言: 在逛小程序蘑菇街的时候,看到一个2D版滚动的翻页公告效果.其实看到这个效果的时候,一点都不觉得稀 ...
- jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离1. [代码]jquery ...
- Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录
经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
- 15个最佳jQuery的翻页书效果的例子
在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...
- 49.CSS--- 特殊css3效果展示
1.设置多行文本超出显示省略号<div class="caption"> <p>显示超过两行就显示省略号,其余隐藏,隐藏不了的情况下给这个模块添加一个高度和 ...
- 桌面浏览器实现滑动翻页效果(Swiper)
还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js 概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
随机推荐
- [C#]多线程下载
发现电脑里以前编写的下载程序... 做个记录,那时做的挺匆忙的,没用委托,通过公开出窗体来修改下载进度,做的比较乱... ==!! 程序具体功能(流程): 1.检测系统托盘图标内的进程名是否符合要求 ...
- win7 下配置Openssl
最近刚刚装了openssl,遇到了很多问题,于是记录了下来: 我的PC环境是:系统win7,32位,Microsoft Visual Studio 2010: 下面开始安装: 1.安装前的准备:首先下 ...
- 基于MATLAB实现的云模型计算隶属度
”云”或者’云滴‘是云模型的基本单元,所谓云是指在其论域上的一个分布,可以用联合概率的形式(x, u)来表示 云模型用三个数据来表示其特征 期望:云滴在论域空间分布的期望,一般用符号Εx表示. 熵:不 ...
- 2015年第11本:代码整洁之道Clean Code
前一段时间一直在看英文小说,在读到<Before I fall>这本书时,读了40%多实在看不下去了,受不了美国人啰啰嗦嗦的写作风格,还是读IT专业书吧. 从5月9日开始看<代码整洁 ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q22-Q24)
Question22You create a Feature.You need to remove the link to the Site Content Type page from the Si ...
- EdgesForExtendedLayout
在IOS7 之后viewController有一个新的属性叫做edgesForExtendedLayout,这个属性指定viewController的view边缘延伸的方向,默认情况下是UIRectE ...
- IOS UILabel 根据内容自适应高度
iOS Label 自适应高度 适配iOS7以后的版本 更多 self.contentLabelView = [[UILabel alloc] init]; self.contentLabelVie ...
- 初始block,关于定义的几个小题目
block的定义和C语言指针函数非常相似,就可以照着指针函数的方法去依葫芦画瓢就可以了 block中的^只是用来表示这是一个block对象,和函数指针中的*作用一样,只是一个标识符 下面有三个小例子来 ...
- IOS MenuController的部分操作
这里我们要实现的将是选择按钮的自定义 综合上一节的随笔,这里给出效果图. ViewController.m // // ViewController.m // CX-MenuController // ...
- iOS提醒用户进入设置界面进行重新授权通知定位等功能
iOS 8及以上版本最不为人知的一个特点是与应用设置的深层链接,用户可以根据APP的需要授权启用位置.通知.联系人.相机.日历以及健康等设置. 大多数应用程序仅仅是弹出一个包含操作指令的警示窗口,如“ ...