切换风格

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

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

QQ登录

只需一步,快速开始

返回列表 发新帖

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

[复制链接]
     
  • TA的每日心情
    奋斗
    14 小时前
  • 签到天数: 1414 天

    [LV.10]以坛为家III

    65

    主题

    1822

    帖子

    7万

    积分

    博士

    Rank: 8Rank: 8

    积分
    71128
    活动推广币
    10 个
    后盾币
    71128 个
    注册时间
    2011-5-11
    在线时间
    889 小时
    帖子
    1822
    发表于 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的每日心情
    开心
    前天 23:24
  • 签到天数: 9 天

    [LV.3]偶尔看看II

    0

    主题

    117

    帖子

    579

    积分

    小学生

    Rank: 3Rank: 3

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

    发表回复

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

    本版积分规则

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