![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发移动端
MetaLuo
啦啦啦我是愉快的小布丁
展开
-
城市选择二级联动、三级联动的思路
今天为了做项目写了个城市选择二级联动的插件,首先放上效果图如图所示。实现的效果是选择左边的省份后,右边点击后会出现相应省份的所有城市。 这里我采用了ajax引入json的方法。关于ajax和json我将会在之后写。 首先,我从网上找了一份包含所有省份和城市的json文件。由于不知道怎么上传我就单独发了一篇博客,把json文件的代码贴出来了,具体可以看city.json。 其实这个json文件并原创 2015-12-28 16:51:47 · 3875 阅读 · 0 评论 -
好看的移动端H5应用效果及样式借鉴
支付宝页面切换采用从下往上滑动,而且不是从底部滑上来,而是距离顶部大概200px的位置快速滑上来,感觉很自然。缓冲的效果,就是一个圆圈不停转动的效果,作为一个遮罩层,等内容加载完,遮罩层隐去,内容浮现。回到顶部按钮。一滚动页面右下方就出现回到顶部按钮。一回到顶部按钮消失。导航栏在幻灯片下面。一开始滚动页面的时候导航栏随之移动,当导航栏触碰到顶部的时候导航栏就不动了。有一个新的css3属性可以原创 2016-05-19 16:02:47 · 4616 阅读 · 0 评论 -
div永远垂直居中的方法
如果div大小和父级元素大小已定,那垂直居中的方法就很多,今天来讨论下如果子元素大小和父级元素大小都不确定,要保持一个div永远垂直居中的方法。用CSS3来实现如果使用css3的话就有挺多的方法。teansform:translate.parent{ position:relative; }.child{ position:absolute; top:50%; left:5原创 2016-02-25 09:04:42 · 1587 阅读 · 0 评论 -
fixed在移动端失效的问题
其实在安卓机上fixed的适应性要远远比ios上好,真是接地气啊哈哈。之前第一次遇到这个问题的时候非常惊讶,那时候在用sui mobile的组件库,里面就有底部导航栏,用了fixed。但是随着屏幕向上滚动,超过一定距离,这个底部导航栏竟然也跟着上去了。并且在我的安卓机上是没多大影响,但是在ios上就这样了。不过我同事的安卓机竟然比在ios上还夸张。什么原因导致的?经过我多方调研,其实移动端在早些年以原创 2016-03-04 14:16:00 · 5980 阅读 · 0 评论 -
js计算时间间隔
记录一下: 可以用到getTime()方法,具体的以后再说,直接贴代码:var startTime=new Date(Date.parse(start.replace(/-/g, "/"))).getTime(); var endTime = new Date(Date.parse(end.replace(/-/g, "/"))).getTime();原创 2016-01-05 16:19:09 · 415 阅读 · 0 评论 -
移动端前端开发注意点
移动端前端开发注意点第一次接触移动端开发,发现web端和移动端的差别还是很大的,我主要记录移动端的一些内容:移动端与web端在网页设计与交互方面的差别移动端注意点一些小技巧移动端的一些问题及解决方法移动端与web端在网页设计与交互方面的差别纯粹是个人看法。 在web端是尽可能地展示丰富的功能,并且较为复杂,一个页面可以包含很多的内容。当然在交互方面也是相对复杂些,一般不是直接把“下一步”原创 2015-12-03 17:03:47 · 7815 阅读 · 0 评论 -
简易富文本编辑器
效果图如下:思路:首先选择用iframe来承载这个富文本编辑器,因为iframe有一个属性contentEditable,让内容可编辑。然后它的execCommand方法又可以实现多种效果。最早出现这些方法和属性的是IE浏览器,后来其他浏览器也纷纷支持了。 现在的富文本编辑器的适用范围越来越广,但我看到的网上的插件啊资源啊基本只有百度一家有,而且很多网站也直接用了百度的插件。 但是如果我们要自己原创 2016-01-18 15:12:49 · 2611 阅读 · 0 评论 -
网页上制作动画效果的方法及优势劣势
css3animatejs运用css3实现动画效果css3有两种动画效果,一种是trasition,一种是animation。 其中的animation更加灵活,transition更为便捷。 transition的内容可以参照:transition详解。 animation的内容可以参照:animation详解。 本人也是比较喜欢使用css3的,也喜欢用css3做点小东西。 比如:原创 2015-12-30 14:38:42 · 754 阅读 · 0 评论 -
点击input输入法不弹出
首先说明我这个只是在安卓端的测试,下次试下ios的。问题这是个很令人头疼的问题,比如我用了一个时间选择控件,或者是地址选择控件等,并不想让输入法弹出来,不然太烦了。所有我就想了一些解决方法。解决方法disabled直接治本。不仅输入法不弹起,而且都不能点击了,如果要使用需要在上面覆盖一个div,然后将点击事件监听到这个div上。readonly这个方法不错,可以点击,但无法输入,所有输入法不会弹起。原创 2015-12-28 17:05:13 · 6260 阅读 · 0 评论 -
兼容移动端和pc端的弹性盒模flexbox
现在主流浏览器都支持flex布局,ie是支持到ie10的,不过一些移动端的支持性和pc端不同。如何适应各个版本的浏览器各个设备呢?新版与旧版弹性盒模型混用:.box{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box;原创 2016-08-09 14:29:49 · 4217 阅读 · 0 评论