Eason 发布的文章
-
安卓微信下video最顶层
问题：页面video在安卓微信下最顶层 一般我们做页面视频时，都是点击视频按钮弹出一个遮罩层再播放视频。然而当页面本身有一个视频video时，再点击另外的按钮弹层的时候又是怎样的状况？原先页面如下图： 点击下面的 往期视频按钮 后是弹层播放视频，然而在安卓微信下的打开是这样的。 打开方式错了吧？跟想象不一样哦，页面上的视频在遮罩层上面。。。那么我们第一反应应该是页面上video层级太高了吧，但是发现遮罩层的层级z-index:9999;已经是最高了。what? 但在自带浏览器以及苹果机能够正常显示（页面video在遮罩层下面）。 页面体验链接： https://test.n......
-
uc浏览器某元素消失了
先对比上面两张图，显而易见，第一张图 预约按钮上面的输入框不见了，但是在其他浏览器都正常显示。到底它在UC浏览器都经历了些什么，找来测试机子本地调试，但本地调试显示正常，这就尴尬了，给找出问题所在增加了阻碍。 嗯，那为什么我说在uc浏览器某元素消失了而不是说输入框消失了，可见uc玩消失的不是针对输入框，而是被某些属性或什么影响到了。 先看看在uc其他输入框能正常的页面，对比一下，少了value属性，type属性也不一样，那改成一样试试，结果不尽人意，接着就剩class类名不一样了，万万没想到真的是用名不慎。还是组长机智！ 怎么回事呢？这里是一个输入电话号码的输入框，类名便简单为p......
-
页面随鼠标位置而移动~
一个简单的交互，页面区块随鼠标移动而移动。 页面效果（第二屏）：http://test.nie.163.com/test_html/game.academy/open-day/201612/ 1.重温screenX、clientX、pageX 的区别 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 2.pageX 小d......
-
十月知识记录
最近做镇魔曲手游项目，对做项目及注重交互又有了深一层的了解。这里学习并记录几个技能点，方便以后开发。 一、水波纹交互效果 鼠标交互效果：鼠标滑上去时出现水波纹由内往外扩张并逐渐消失。那这个效果是怎么实现的呢。 <div class="skill-slide"> <a href="javascript:;"></a> </div> .skill-slide a{ width:70px; height:70px; border-radius: 50%; ......
-
safari几个小bug及番外
1、input 输入框的内容在 Safari 浏览器下光标的显示问题 输入内容后，光标靠上，未居中。在其他浏览器正常。 一般样式是这样写的： width：434px; height:54px; line-height:54px; text-align: center; 解决方案 把高度居中用padding设置 width:434px; height:24px; line-height: 24px; padding:15px 0; text-align: center; 2、一个按钮（a标签）在 safari 浏览器下不显示为“小手” 页面git》》 <a class......
-
css3滤镜总结
css3有一些滤镜挺有意思的，也很简单，遂学习一下，但一般会用得比较少，我们都直接切图了。 这些滤镜主要都是都图片效果的处理，样式属性值中一般使用一个数值或数值百分比作为参数。我们用两张照片做对比看滤镜的效果。 1、grayscale(灰度滤镜) 彩色图像转为灰度图像 <img src="1.jpg"> <img src="1.jpg" class="grayscale"> .grayscale{ filter:grayscale(100%); -webkit-filter......
-
结合小组里_animation.less的几个Loading效果
之前我们写一些css3动画,每个语句都要写5遍有木有,-webkit-,-moz-......虽然我们可以复制，但是代码量一下子蹭蹭蹭就上去了，看得头晕，不简洁。还好我们小组有一个已经封装好_animation.less。 以下是几个loading栗子。 效果预览戳我戳我 第一个效果 <div class="loader-inner ball-clip-rotate"> <div></div> </div> .ball-clip-rotate > div { background-col......
-
移动端一段小动画竟影响了苹果机文字无法复制？
昨天做了一项目，添加礼包，以及礼包弹窗，弹出序列号以供用户手动复制，而坑便在这深埋了，苹果机竟然无法复制，安卓机挺正常的。项目 git链接在此 ，效果如下图： 无奈，最后在组长与军爷合力排查完美解决了，再次献上我的膝盖(～ o ～) 解决过程：把样式全部去掉，发现页面是可以复制的，接着一步步添加样式，这个过程也挺心累的！最后定位在一段小动画上 一个下拉指示按钮的动画上 @-webkit-keyframes upDown2 { 0% { bottom: 0.4rem; } 100% { bottom: 0.6rem; ......
-
移动端300ms点击延迟和点击穿透问题
闲暇中get到一点小知识，整理一下与大伙分享。 一、移动端300ms点击延迟 一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。 原因 早些时候为了应对小屏幕浏览桌面端站点的问题，于是有了双击缩放，也是上述300 毫秒延迟的主要原因。 双击缩放与300ms延迟的联系： 假定这么一个场景。用户在移动端浏览器点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还......
-
新手学习新闻发布系统步骤版
刚进公司那会，第一个接触的技术便是新闻发布系统了，刚开始学还真觉得有些难，幸好有个温柔美丽的女神一直带着我，任劳任怨，无怨无悔的精神让我想娶了她，哈哈。女神带我做了两三个项目之后，慢慢理出了头绪，也明白了其中的逻辑。下面我便列出做新闻发布系统的步骤，以后刚进来的新手也可以来这里学习，也欢迎大神们来纠错补充。 一、认识模板 模板分为：索引模板、more模板、详情模板。 索引模板：简单的说，即进入详情页的入口（更多的解释我想到再作补充）。 more模板：即有分页的模块。（目前这个我还没做过，等做了再来写步骤）。 详情模板：可以理解为一篇详细的新闻介绍。 这里常见的是建立索引模板，对......
-
图片懒加载
Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src(也可以约定为其他属性名)属性的值，并赋予img的src，从而实现动态加载图片的机制。 这里需要注意的是： img在初始化的时候不要设置src属性，因为即使设置 src='' 浏览器也会尝试加载图片。 一个简单的图片懒加载共涉及两个方面: HTML 约定 给img元素添加class="m-lazyload",同时将img src赋值给data-src属性。 <img class="m-lazyload" data-src="imgUrl"......
