用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效果展示)的更多相关文章

  1. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  2. 3D版翻页公告效果

    代码地址如下:http://www.demodashi.com/demo/12830.html 前言: 在逛小程序蘑菇街的时候,看到一个2D版滚动的翻页公告效果.其实看到这个效果的时候,一点都不觉得稀 ...

  3. jquery 实现智能炫酷的翻页相册效果

    jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离​1. [代码]jquery ...

  4. Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

    经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...

  5. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  6. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  7. 49.CSS--- 特殊css3效果展示

    1.设置多行文本超出显示省略号<div class="caption"> <p>显示超过两行就显示省略号,其余隐藏,隐藏不了的情况下给这个模块添加一个高度和 ...

  8. 桌面浏览器实现滑动翻页效果(Swiper)

    还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...

  9. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

随机推荐

  1. javascript --- 再谈词法分析

    javascript代码是如何执行的呢,分为六个步骤(就像把大象装进冰箱总共分几步?): 第一步:载入第一个js代码段(注:script标签对内的代码或是引用js代码,这也说明js并不是一行一行(单纯 ...

  2. javascript宿主对象之window.screen、window.close()/open()、window.moveTo、window.resizeTo

    window.screen属性所提供的是浏览器以外的信息.这里只简单的概述一下: screen.availWidth - 可用的屏幕宽度 (除去操作系统菜单) screen.availHeight - ...

  3. javamail 发送邮件demo

    package com.suntray.test; import javax.mail.BodyPart; import javax.mail.Message; import javax.mail.M ...

  4. Configure SSL for SharePoint 2013

    http://blogs.msdn.com/b/fabdulwahab/archive/2013/01/21/configure-ssl-for-sharepoint-2013.aspx In thi ...

  5. GridView总结二:GridView自带编辑删除更新

    GridView自带编辑删除更新逻辑很简单:操作完,重新绑定.总结总结,防止忘记... 效果图: 前台代码: <%@ Page Language="C#" AutoEvent ...

  6. Android屏蔽HOME键

    public static final int FLAG_HOMEKEY_DISPATCHED = 0x80000000; @Override protected void onCreate(Bund ...

  7. 【转】从viewController讲到强制横屏,附IOS5强制横屏的有效办法

    文字罗嗦,篇幅较长,只需营养可直接看红字部分. 一个viewController的初始化大概涉及到如下几个方法的调用: initWithNibName:bundle: viewDidLoad view ...

  8. iOS闹钟实现

    UILocalNotification *notification=[[UILocalNotification alloc] init];         if (notification!=nil) ...

  9. iOS edgesForExtendedLayout、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets属性详解

    edgesForExtendedLayout: 在IOS7以后 ViewController 开始使用全屏布局的,而且是默认的行为通常涉及到布局,就离不开这个属性 edgesForExtendedLa ...

  10. windows 7 下,如何统计某文件夹下 视频总时长

    由于项目需要,我需要给系统加权限,这真是一个让人头疼的问题,如果要每个业务方法都加上权限判断逻辑,那真的不敢想象是多么大的工作量,日后有变动的话,我会不会发疯? 所以我必须利用之前学到的AOP编程,在 ...