切换风格

后盾网PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

  • 咨询热线: 400-682-3231
  • QQ咨询: 联系在线客服老师 联系在线客服老师 联系在线客服老师

QQ登录

只需一步,快速开始

返回列表 发新帖

[练习与作业] css3微场景第一屏滑动练习14

[复制链接]
     
  • TA的每日心情
    奋斗
    昨天 08:32
  • 签到天数: 1469 天

    [LV.10]以坛为家III

    65

    主题

    1891

    帖子

    7万

    积分

    博士

    Rank: 8Rank: 8

    积分
    73360
    活动推广币
    10 个
    后盾币
    73360 个
    注册时间
    2011-5-11
    在线时间
    931 小时
    帖子
    1891
    发表于 2017-7-13 21:09:04 |显示全部楼层 | 阅读模式
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
    5. user-scalable=0;" name="viewport" />
    6.         <meta charset="UTF-8">
    7.         <title>css3第一屏滑动练习</title>
    8. </head>
    9. <body>
    10.         <div id="contain">
    11.                 <div class="box one" style="background-color: dodgerblue;">第1屏
    12.             <h1 class="animated zoomInLeft">欢迎进行css3的练习</h1>
    13.                 </div>
    14.                 <div class="box" style="background-color: orangered;">第2屏</div>
    15.                 <div class="box" style="background-color: greenyellow;">第3屏</div>
    16.         </div>
    17. </body>
    18. <link rel="stylesheet" type="text/css" href="css1/animate.min.css">
    19. <style type="text/css">
    20.         *{
    21.                 margin:0;
    22.                 padding:0;
    23.         }
    24.         html,body{
    25.                 /* 必须要定义总的百分比 */
    26.                 width:100%;
    27.                 height:100%;
    28.         overflow:hidden;
    29.         }
    30.         #contain{
    31.                 width:100%;
    32.                 height:100%;
    33.                 transition:all 1s;
    34.                 position: relative;
    35.                
    36.         }
    37.         #contain>.box{
    38.         width:100%;
    39.         height:100%;
    40.         }
    41.         #contain .box.one{
    42.                 position:relative;
    43.         }
    44.         #contain .box.one h1{
    45.                 width:60%;
    46.                 color:white;
    47.                 background:greenyellow;
    48.                 position:absolute;
    49.                 /* 距离左边一般 如使用子级h1 margin定位,父级.box.one外边框的位置会下移,
    50.                 因父级无边框或内边距。 */
    51.                 left:50%;
    52.                 top:5%;
    53.                 /* 相对于自身宽度运行的一半 */
    54.                 transform:translateX(-50%);
    55.                 line-height:1.5em;
    56.                 font-size:4vw;
    57.                 text-align:center;
    58.             /* 运动延迟 */
    59.                 animation-delay:2s;
    60.                 /* 动画整体效果运动的时间 */
    61.                 animation-duration:2s;

    62.         }
    63. </style>
    64. <script type="text/javascript" src="js/zepto.min.js"></script>
    65. <script type="text/javascript" src="js/touch.js"></script>
    66. <script type="text/javascript">

    67.     //大总管变量
    68.     var c=0;
    69.     //get screen height
    70.     var screen_height=$(window).height();
    71.         $('body').swipeUp(function(){
    72.                 c++;
    73.                 //count screen up height
    74.                 var t=c*-screen_height;
    75.         $('#contain').css('margin-top',t);
    76.         })
    77.         //screen down
    78.         $('body').swipeDown(function(){
    79.                 c--;
    80.                 var t=c*-screen_height;
    81.                 $('#contain').css('margin-top',t);
    82.         })
    83. </script>
    84. </html>
    复制代码
    欢迎大家一起来自学css3,小菜鸟编程群:230998551,一起自学css3交流、讨论。

    发表回复

    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    快速回复 返回顶部 返回列表