欢迎使用CSDN-markdown编辑器

无敌手Greeny

于 2015-05-12 14:38:37 发布

阅读量211

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/u012437705/article/details/45669307

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

   在公司前端实习已经有3个多月了，一直是学习+做项目同时进行，虽然进步得很快，但同时很快就遇到瓶颈了，现在就是处于一种没有目标、迷茫，不知道要往哪个方向走的状态，要是来项目了就做，一直重复同样的自己只会的那点东西，感觉这样很不好。还是做自己喜欢的热情会更持久一些。
   这次做的是一个基于css3动画和jquery的小特效--开关灯，操作就是简单的点击灯泡。我是在做项目的时候联想到这个特效的，在网上查了一下，发现有这个已经做出来了，但是是网页版的，原文链接如下:[开关灯效果](http://www.h-ui.net/ext/1401180822.shtml)，我用的是他的图片，写的与他不一样，效果也不一样，而且针对的是手机端。
   这不是教程，所以直接贴代码。后面还会接着添加功能--添加拉线，拖动拉线控制开关灯，这就要涉及到移动端触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel。啊终于可以学这些了。以前都是直接用前辈给的代码，看得懂知道怎么用，但就是没有认真研究过。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <!-- iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览 -->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <!-- iphone的私有标签，它指定的iphone中safari顶端的状态条的样式 -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <!-- iphone的私有标签，忽略将页面中的数字识别为电话号码 -->
    <meta content="telephone=no" name="format-detection" />
    <!-- 禁止Android自动识别页面中的邮件地址   -->
    <meta content="email=no" name="format-detection" />
    <title>开关灯效果</title>
    <style>
        .Wall{ width:100%;height:100%;background-color: #000;position: absolute;left:0;top:0;}
        .Light-wrap{width:150px;height:150px;margin:30px auto;position: relative;}
        .w{display: block;width:150px;height:150px;background: url("lightbulb.png") no-repeat;position: absolute;top:0;left:0}
        .close{ background-position: right 0;}
        .open{ background-position: 0 0;opacity:0;z-index:1;}
        .zindex{z-index:11;}
        .light-on{-webkit-animation:light-on 0.6s ease;}
        @-webkit-keyframes light-on{
            0%{opacity: 0;}
            100%{opacity: 1;}
        }
        .light-off{-webkit-animation:light-off 0.6s ease;}
        @-webkit-keyframes light-off{
            0%{opacity: 1;}
            100%{opacity: 0;}
        }
        .wall-on{-webkit-animation:wall-on 0.8s ease;}
        @-webkit-keyframes wall-on{
            0%{background-color: #000;}
            100%{background-color: #F2EDB7;}
        }
        .wall-off{-webkit-animation:wall-off 0.8s  ease;}
        @-webkit-keyframes wall-off{
            0%{background-color: #F2EDB7;}
            100%{background-color:#000;}
        }
    </style>
</head>
<body>
       <div class="Wall">
           <div class="Light-wrap">
               <span class="close w zindex" id="close"></span>
               <span class="open w" id="open"></span>
           </div>
       </div>
<script src="zepto.min.js" type="text/javascript"></script>
<script>
      $("#close").bind("touchend",function(){
          if($(this).hasClass("zindex")){
              $(this).removeClass("zindex");
              $(".open").removeClass("light-off").addClass("light-on").css("opacity","1");
              $(".Wall").removeClass("wall-off").addClass("wall-on").css("background-color","#F2EDB7");
          }
      });
      $("#open").bind("touchend",function(){
              $("#close").addClass("zindex");
              $(".open").removeClass("light-on").addClass("light-off").css("opacity","0");
              $(".Wall").removeClass("wall-on").addClass("wall-off").css("background-color","#000");
      });
</script>
</body>
</html>