工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 综合应用 > 正文

目前写过最复杂的div弹出遮罩层结构

发布时间:2018-08-27 00:18:03作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

如果你只想了解div弹出遮罩层结构的实现原理,请直接访问文章“点击弹出div层页面不可操作”,如果想深入了解更复杂div弹出遮罩层结构请接着看下文。

如果你没有足够的时间,请直接关闭本文,一目十行是作为学习者的损失也是对作者的不尊重。何以用“最复杂的”来形容这个div弹出遮罩层结构呢?


如图所示,流程是在页面中点击签到弹出擦一擦和遮罩层,点击戒指显示签到成功,点击下面的“x”关闭弹出层和遮罩层。

客户的要求是:手指、擦一擦和星星都要动,星星要闪烁效果,当客户告诉我星星要闪烁效果时我是直接回绝了的,因为我觉得根本不可能实现。一开始我只写了个手指上下晃动的效果就把源码发给客户了,客户也只付了我一部分钱,奔着学习和拿剩下的钱的想法,我开始想如何实现客户想要的所有效果,本文就是对实现这一效果的经验总结。

html代码关于代码是什么意思我已经在代码里详细注明,下面的jQuery代码同样):
  1. <!--遮罩层--> 
  2.   <div id="zzc"></div> 
  3.   <!--cyc用来使square居中--> 
  4.   <div id="cyc"> 
  5.     <!--大圆角正方形--> 
  6.     <div class="square"> 
  7.       <!--小圆角正方形--> 
  8.       <div class="smallsquare"> 
  9.         <!--戒指--> 
  10.         <p><img src="images/jiezhi2.png"></p> 
  11.         <p>点击钻石</p> 
  12. <!--手指--> 
  13.         <p><img src="images/shouzhi.png"></p> 
  14. <!--签到成功四个字是非正常字体,只能用图片--> 
  15.         <p><img src="images/textqdcg.png"></p> 
  16.       </div> 
  17.       <!--关闭按钮--> 
  18.       <img src="images/close.png" class="close">  
  19.       <!--标题框--> 
  20.       <img src="images/cyctitle.png" class="cyctitle"> 
  21.       <!--三个星星,放在div里是为了保证星星在发生大小变化时始终位于中心点--> 
  22.       <div class="xx1"><img src="images/xx1.png"></div> 
  23.       <div class="xx2"><img src="images/xx2.png"></div> 
  24.       <div class="xx3"><img src="images/xx3.png"></div> 
  25.       <!--标题框里面的擦一擦,textcyc用于里面图片的动画效果,就是定位加宽度变化加隐藏益出来实现擦一擦不断展开的效果--> 
  26.       <div class="textcyc"><img src="images/textcyc.png"></div> 
  27.     </div> 
  28.   </div> 
jQuery代码:
<script> 
    $(document).ready(function () {//点击签到弹出遮罩层和div层 
        $(".clickqd").click(function () { 
            $("#zzc").css("display", "block"); 
            $("#cyc").css("display", "block"); 
        }) 
        $(".smallsquare p:nth-child(1)").click(function () { 
            $(".smallsquare p:nth-child(2)").text('恭喜您获得5积分');//点击戒指变“点击钻石”为“恭喜您获得5积分” 
            $(".smallsquare p:nth-child(3) img").css("display", "none");//隐藏手指 
            $(this).css("display", "none");//隐藏戒指,为什么不用attr()来替换图片路径,因为两张图片的位置不一样 
            $(".smallsquare p:nth-child(4)").css("display", "block");//签到成功图片出现 
        }) 
        $(".close").click(function () { 
            $("#zzc").css("display", "none");//关闭遮罩层 
            $("#cyc").css("display", "none");//关闭弹出层 
        }) 
    }) 
</script> 
css代码太多就不贴了,下面有完整demo链接,我的代码结构并不是最优的,这点我知道,毕竟第一次写这样的,所以,不要@我说你还可以这么写,你这样写不科学之类的话,下面我会给你们看一个我认为写的最科学的div弹出遮罩层结构。

css代码里面最重要的就是定位,关于定位在这里我还是要说一下的,很多教程比如菜鸟教程对定位的解释是比较生硬的,很难理解,下面我制作了一张图来解释什么是定位。


A如果写样式position: fixed; top: 5px; right:5px; 那么A就是绝对定位。B如果写样式position: fixed; bottom: 5px; left:0; 那么B就是绝对定位。如果C写样式position: relative; D写样式position: absolute; left:10px; top:10px; 那么D相对于C定位,C为相对对象,D为相对主体,这样解释是不是大家就很容易明白了,只要明白了我的css代码就很容易理解了。position: static; 用来清除定位,媒体查询写响应式时经常会用到。

demo地址(移动页面):https://www.weiyiqi.net/lookdoc/xm3laofengxiang/qiandao.html(应客户要求页面部分已隐藏)

因为客户后来不要这个了,所以我只写了三个星星的动画,效果看起来并不是很好,如果星星比较多效果还是不错的。下面就来说星星闪烁效果是怎么实现的

刚开始客户要星星闪烁效果我是懵逼的,因为我把星星闪烁理解成了视频,后来想想,星星闪烁无非就是忽大忽小、不同角度看到的效果不一样、每个星星闪烁的速度和频率都不一样,根据这三个特点我来“对症下药”:

1.忽大忽小:把星星做成一个png图片,放在一个div里,给div定位来固定星星的位置。可能会有人疑问为何不给图片直接定位,因为图片的宽高是不断变化的,div用来保证星星不管何时多大都位于中心点,否则写出来的效果看着很怪异。

这里要用到animatio和@keyframes。

2.不同角度看到的效果不一样:利用css3的旋转即transform: rotate();

3.每个星星闪烁的速度和频率都不一样:这个可以通过延迟动画执行animation-delay和增加动画运动时长来实现。

要使总体效果看起来自然,除了多写几个星星的动效,还要合理控制延迟执行的时间和动画运动的时长以及旋转的度数,这个需要一点一点去调整。

可能你觉得我的方法很麻烦,但是我是用纯css实现的。


当我把这一切做完让客户看时,客户说他们那边要调整,唉,单干赚钱就是这么不容易。最后改成了下面这样:

demo(移动页面):https://www.weiyiqi.net/lookdoc/xm3laofengxiang/qiandao2.html(应客户要求页面部分已隐藏)

如果上面的例子你觉得我写的代码不科学那么来看看这个:

html代码:
<!--遮罩层--> 
  <div class="zzc"></div> 
  <!--cycw为了保证里面三个div层都居中--> 
  <div class="cycw">  
    <!--擦一擦(第一个div层)--> 
    <div class="cycn"><img src="images/cyc2.png">  
      <!--两个点击按钮定位--> 
      <div class="zuanshi"></div> 
      <div class="cyctext"></div> 
    </div> 
    <!--签到成功2(第二个div层)--> 
    <div class="qdcg2"><img src="images/qdcg2.png">  
      <!--四个可变化元素定位--> 
      <div class="already">您已签到 <a>1</a> 天</div> 
      <div class="Continuity">连续签到 <a>7</a> 天</div> 
      <div class="get">即可获得 <a>5</a> 积分</div> 
      <div class="known"></div> 
    </div> 
    <!--签到成功1(第三个div层)--> 
    <div class="qdcg1"><img src="images/qdcg1.png">  
      <!--三个可变化元素定位--> 
      <div class="hd">连续七天签到获得</div> 
      <div class="fs">5</div> 
      <div class="determine"></div> 
    </div> 
  </div> 
每一个div都是必须存在的,有些按钮不再是切成图去做,而是一整张图,写div块去定位来实现精确点击,缩短了工期,我觉得这就是我在做了一个之后的进步。

总结一下经验:再难的页面拿到不要惧怕,切勿拿来上手就写,那样会做很多无用功,要先分析页面结构,想一下页面的每一个部分该怎么写,如果有没把握的,先百度,做下技术储备,这样的话脑子里面有大纲写起来就很快了,效率才是你赚更多钱的前提。

本文标签html架构和css思维 ,您可以阅读与「html架构和css思维 」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:搜索模块取消百度和推荐搜索,效果改悬停为点击下一篇:写了一个多功能悬浮窗插件,分享给大家

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包

工作室注册登录标签云赞助光荣榜

最新会员
  • jwmm
  • weiyiqi