css3挂历翻页效果

翻页效果显示当前时间

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/test.css" />

        <script type="text/javascript" src="js/jquery.min.js">
        </script>
        <!--设置默认字符25px-->
        <script type="text/javascript" src="js/common.js">
        </script>
    </head>

    <body>
        <div id="wrapbox">
            <!--hours-->
            <div id="my3dspace-h">
                <div id="pagegroup-h">
                    <div class="page" id="pageh1">ready</div>
                    <div class="page" id="pageh2">go</div>

                </div>
            </div>
            <!--minutes-->
            <div id="my3dspace-m">
                <div id="pagegroup-m">
                    <div class="page" id="pagem1">ready</div>
                    <div class="page" id="pagem2">go</div>

                </div>
            </div>
            <!--seconds-->
            <div id="my3dspace">
                <div id="pagegroup">
                    <div class="page" id="page1">ready</div>
                    <div class="page" id="page2">go</div>

                </div>
            </div>
        </div>

        <script>
            var curIndex = 1;
            //向后翻页
            function next() {

                var curPage = document.getElementById(‘page‘ + curIndex);
                curPage.style.webkitTransform = "rotateX(-90deg)";

                curIndex++;
                var nextPage = document.getElementById(‘page‘ + curIndex);
                nextPage.style.webkitTransform = "rotateX(0deg)";
            }
            //翻页分
            var curIndexm = 1;

            function nextm() {
                var curPagem = document.getElementById(‘pagem‘ + curIndexm);
                //                console.log(curPagem)
                curPagem.style.webkitTransform = "rotateX(-90deg)";

                curIndexm++;
                var nextPagem = document.getElementById(‘pagem‘ + curIndexm);
                nextPagem.style.webkitTransform = "rotateX(0deg)";
            }
            //翻页小时
            var curIndexh = 1;

            function nexth() {
                var curPageh = document.getElementById(‘pageh‘ + curIndexh);

                curPageh.style.webkitTransform = "rotateX(-90deg)";

                curIndexh++;
                var nextPageh = document.getElementById(‘pageh‘ + curIndexh);
                nextPageh.style.webkitTransform = "rotateX(0deg)";
            }
        </script>
        <script type="text/javascript">
            $(function() {
                var num = 3;
                var numm = 3;
                var numh = 3;

                var s;
                var m;
                var h;
                //                设置时间
                setInterval(function() {
                    var myDate = new Date();
                    s = myDate.getSeconds();
                    m = myDate.getMinutes();
                    h = myDate.getHours();

                }, 1000);
                //生成页面
                clearInterval();
                var timer = setInterval(function() {
                    var newDiv = ‘<div class="page" id="page‘ + num + ‘">‘ + s + ‘</div>‘;
                    $(‘#pagegroup‘).append(newDiv);

                    //                    分
                    var newDivm = ‘<div class="page" id="pagem‘ + numm + ‘">‘ + m + ‘</div>‘;
                    $(‘#pagegroup-m‘).append(newDivm);
                    //                    时
                    var newDivh = ‘<div class="page" id="pageh‘ + numh + ‘">‘ + h + ‘</div>‘;
                    $(‘#pagegroup-h‘).append(newDivh);
                    numh++;
                    numm++;
                    num++;
                }, 1000);
                //翻页
                clearInterval();
                setInterval(function() {
                    next();
                    nextm()
                    nexth();

                }, 1000);

            })
        </script>

    </body>

</html>

css

#wrapbox {
  width: 100%;
  padding-left: 0.4rem;
}
#wrapbox div {
  display: inline-block;
  float: left;
  margin: 0.2rem;
}
/*hours*/
#my3dspace-h {
  -webkit-perspective: 400;
  -webkit-perspective-origin: 50% 50%;
  overflow: hidden;
}
#pagegroup-h {
  width: 200px;
  height: 200px;
  /*margin: 0 auto;*/
  -webkit-transform-style: preserve-3d;
  position: relative;
}
/*minutes*/
#my3dspace-m {
  -webkit-perspective: 400;
  -webkit-perspective-origin: 50% 50%;
  overflow: hidden;
}
#pagegroup-m {
  width: 200px;
  height: 200px;
  /*margin: 0 auto;*/
  -webkit-transform-style: preserve-3d;
  position: relative;
}
/*seconds*/
#my3dspace {
  -webkit-perspective: 400;
  /*-webkit-perspective-origin: 50% 50%;*/
  overflow: hidden;
}
#pagegroup {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  position: relative;
}
.page {
  width: 200px;
  height: 200px;
  /*padding: 10px;*/
  background-color: #0070CD;
  color: #fff;
  font-size: 100px;
  font-weight: bold;
  line-height: 200px;
  text-align: center;
  position: absolute;
  -webkit-transform-origin: bottom;
  -webkit-transition: -webkit-transform 1s linear;
  -webkit-transform: rotateX(90deg);
}
#page1 {
  -webkit-transform-origin: bottom;
  -webkit-transition: -webkit-transform 1s linear;
}
时间: 2024-11-05 21:56:08

css3挂历翻页效果的相关文章

CSS3-----图片翻页效果的展示

在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般指向一个URL地址,也可以调用javascript,如href="javascript:xxx();",但是文档中推荐这样写<a href="http://www.111cn.net/zhongxing/U880/ javascript:void(0)" oncl

HTML5翻页效果文字特效怎么实现呢

HTML5翻页效果文字特效怎么实现呢,之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴.Y轴.Z轴进行翻转,先看一下效果截图. 看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转. 接下来我们来看一下源码.首先是HTML代码,非常简单,列出我们需要渲染的文字: <div class=&qu

前端实现类似于iBooks的图书翻页效果的网络阅读软件(一)

昨天晚上在群里交流各种脑动大开的题目,我顺手也提了一个问题: JS如何做“字符分页“ 原意是源于我4年前公司项目,我负责开发1年的样子,后来各种原因就没有然后了… http://reader.appcarrier.com/     以上图片是手机上的截图,Metro风格当前可是风靡一时,软件本身是类似现在的”追书神器” 通过书名,在网络上搜索到对应的内容,之后保存到本地数据库.在通过JS获取数据再处理 自己装好测了下,貌似下载服务器已经挂了~ 程序采用PhoneGap打包的,数据采集是用底层完成

简单做出HTML5翻页效果文字特效

之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴.Y轴.Z轴进行翻转,先看一下效果截图. 看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转.        DEMO演示效果 接下来我们来看一下源码.首先是HTML代码,非常简单,列出我们需要渲染的文字: <div class="

android开发教程:android手势翻页效果

听麦子学院android开发老师说要实现手势翻页效果,主要用到ViewFlipper和GestureDetector.  ViewFlipper变化当前显示内容,GestureDetector监听手势.  用于多页的展示非常酷.  现在我就给大家简单说明下,  首先创建工程:TestFlip,创建主Activity:TestFlip.  在res/layout/main.xml中添加flipper信息,如下:  Java代码   1. <?xml version="1.0" en

turn.js 图书翻页效果

今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 两个地方要改动: 1.后台查出地址 注意的地方:1.地址要完全的 2.js要用json格式的数据 $more = M('File')->where(array('id'=>$id))->find(); $more1 = json_decode($more['more'],true); foreach($more1 as $k => $v){ /

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外) html: <!DOCTYPE html> <html> <head> <title></title> <meta name=&qu

微信翻页效果

今天闲得蛋疼,重构了之前写的微信翻页效果. 先上地址,觉得可以给颗星星,觉得有问题请大力吐槽. github:https://github.com/skyweaver213/slide 3个demo地址:http://skyweaver213.github.io/slide/widget/slide1/slide.htmlhttp://skyweaver213.github.io/slide/widget/slide2/slide.htmlhttp://skyweaver213.github.i

子数涵数&#183;PS ——翻页效果

一.首先在网络上下载一张图片,作为素材.这是我下载的素材,至于为什么选择这张照片呢,当然不是因为自己的一些羞羞的念头啦. 二.打开Photoshop,我使用的版本是CS3(因为CS3所占的磁盘空间较小,CS4与其就有天壤之别) 三.进入PS之后,打开之前下载好的素材,图如下: 四.复制一个图层,快捷键为Ctrl+J(在每次P图之前复制一个图层是一个好习惯) 五.然后将“背景”图层的可视取消(就是点击一下“背景”图层左边的那个小眼睛) 六.使用矩形选框工具,快捷键为M,在你所想要实现翻页效果的地方