切换风格

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

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

QQ登录

只需一步,快速开始

返回列表 发新帖

[练习与作业] css3微场景滑动练习13

[复制链接]
     
  • TA的每日心情
    开心
    4 小时前
  • 签到天数: 1523 天

    [LV.Master]伴坛终老

    65

    主题

    1965

    帖子

    7万

    积分

    博士

    Rank: 8Rank: 8

    积分
    74388
    活动推广币
    10 个
    后盾币
    74388 个
    注册时间
    2011-5-11
    在线时间
    962 小时
    帖子
    1965
    发表于 2017-7-11 21:35:59 |显示全部楼层 | 阅读模式
    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" style="background-color: dodgerblue;">第1屏</div>
    12.                 <div class="box" style="background-color: orangered;">第2屏</div>
    13.                 <div class="box" style="background-color: greenyellow;">第3屏</div>
    14.         </div>
    15. </body>
    16. <link rel="stylesheet" type="text/css" href="css1/animate.min.css">
    17. <style type="text/css">
    18.         *{
    19.                 margin:0;
    20.                 padding:0;
    21.         }
    22.         html,body{
    23.                 width:100%;
    24.                 height:100%;
    25.         overflow:hidden;
    26.         }
    27.         #contain{
    28.                 width:100%;
    29.                 height:100%;
    30.                 transition:all 1s;
    31.                 position: relative;
    32.                
    33.         }
    34.         #contain>.box{
    35.         width:100%;
    36.         height:100%;
    37.         }
    38. </style>
    39. <script type="text/javascript" src="js/zepto.min.js"></script>
    40. <script type="text/javascript" src="js/touch.js"></script>
    41. <script type="text/javascript">

    42.     //大总管变量
    43.     var c=0;
    44.     //get screen height
    45.     var screen_height=$(window).height();
    46.         $('body').swipeUp(function(){
    47.                 c++;
    48.                 //count screen up height
    49.                 var t=c*-screen_height;
    50.         $('#contain').css('margin-top',t);
    51.         })
    52.         //screen down
    53.         $('body').swipeDown(function(){
    54.                 c--;
    55.                 var t=c*-screen_height;
    56.                 $('#contain').css('margin-top',t);
    57.         })
    58. </script>
    59. </html>
    复制代码
    欢迎大家一起来自学css3,小菜鸟编程群:230998551,一起自学css3交流、讨论。
         
  • TA的每日心情
    开心
    2017-9-27 09:23
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    0

    主题

    132

    帖子

    1084

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1084
    活动推广币
    0 个
    后盾币
    1084 个
    注册时间
    2017-7-8
    在线时间
    12 小时
    帖子
    132
    发表于 2017-7-12 21:42:49 |显示全部楼层

    发表回复

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

    本版积分规则

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