微信大转盘源码及指针忽隐忽现问题

2015-11-27 15:44:34 作者:瀚海沙 大转盘, 源码, 层级问题, 微信

        今天在调试微信大转盘的活动页面时发现一个问题,就是在PC端预览页面时,指针都在最上面,是正常显示,而在手机端进行浏览时,指针一下在转盘页面下面,一下在转盘页面上面。看到这个现象第一个想到的可能原因就是z-index的问题。于是,设置了指针z-index为999,转盘的z-index为0,但是仍然不起作用。

        经过查证资料发现在使用CSS3做动画时 层级会被默认提高,保证在可见层级上。 如遇到不作动画的元素需要覆盖在上面 我经常都是加个-webkit-transform:translateZ(0)

        首先,看下原来页面的html代码,我们可以看到很简单,就是img为指针,canvas为转盘的描绘。

<div class="banner">
 <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%; ">
 <img class="pointer" src="images/turnplate-pointer.png"/>
 <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
 </div>
</div>     

        因为canvas部分为动画描述部分,所以在img也就是指针这里需要添加一段代码:style="-webkit-transform:translateZ(0); postion:absolute; z-index:9999;"然后在canvas这里添加style=" z-index:0;"。

        于是这个代码就变成了下面这个样子。

<div class="banner">
 <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%; ">
 <img class="pointer" src="images/turnplate-pointer.png" style="-webkit-transform:translateZ(0); postion:absolute; z-index:9999;"/>
 <canvas class="item" id="wheelcanvas" width="422px" height="422px" style=" z-index:0;"></canvas>
 </div>
</div>

        手机里测试后,指针忽闪忽现的问题没了,这个问题就解决了。

        大转盘源码下载:http://hanhaisha.com/file/2015/11/27/20151127161028952.rar

© hanhaisha.com. All Rights Reserved

梦里不知岁月匆、梦醒不知韶华过