利用translate封装移动端滑屏效果(缓冲动画/滚动条)

利用translate封装移动端滑屏效果(缓冲动画/滚动条)

具体滑屏布局,css样式可以查看此篇文章:http://menvscode.com/detail/5ace2f814f66b879b92af410js代码functionmScroll(init){if(!init.el){returnfalse; }var wrap =document.querySelector(init.el);var inner = wrap.chi
浏览:274 分类:插件/功能 标签: translate 移动端 滚动条
利用translate实现移动端滑屏效果(缓冲动画/滚动条)

利用translate实现移动端滑屏效果(缓冲动画/滚动条)

css代码body {margin:0; }body,html {height:100%;overflow: hidden;position: relative; }header {height:40px;font-size:20px;color:#fff;text-align: center;background:#000;line-height:40px; }footer
浏览:212 分类:移动开发 标签: 滚动条 translate 移动端
移动端事件对象-touches/targetTouches/changedTouches

移动端事件对象-touches/targetTouches/changedTouches

        当给某个元素加上了事件绑定函数之后,事件函数默认的第一个参数就是事件对象。        事件对象:当用户在浏览器下触发了某个行为,事件对象会记录用户操作时一些细节信息。         touches:当前位于*屏幕*上的所有手指的一个列表         targetTouches:位于当前DOM元素上的手指的一个列表         chan
浏览:357 分类:移动开发 标签: touches targetTouches changedTouches 移动端
移动端touch事件-ontouchstart/ontouchmove/ontouchend

移动端touch事件-ontouchstart/ontouchmove/ontouchend

        移动端的三大事件         手指按下:ontouchstart;手指移动:ontouchmove;手指抬起:ontouchend。       注意:在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式 (addEventListener)。 var div = document.getElementByI
浏览:419 分类:移动开发 标签: touch 移动端
移动端开发适配方式-百分比适配/rem适配/弹性盒模型

移动端开发适配方式-百分比适配/rem适配/弹性盒模型

1、百分比适配<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><metaname="viewport"content="width=device-width,user-scalable=no"><styletype="text/css">     body {marg
浏览:402 分类:移动开发 标签: 适配 移动端 rem
移动端开发去除默认css样式/overflow问题

移动端开发去除默认css样式/overflow问题

        清除点击阴影:-webkit-tap-highlight-colora,input,button{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}        清除按钮圆角 (ios上):-webkit-appearanceinput,button {-webkit-appearance: none;border
浏览:402 分类:移动开发 标签: 移动端 css
移动端开发viewport设置/常见的meta设置

移动端开发viewport设置/常见的meta设置

        viewport 视口(可视区窗口)<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1">        默认不设置 viewport 一般可视区宽度在移动端是980。width
浏览:427 分类:移动开发 标签: viewport 移动端 meta
关于移动端 rem 布局的一些总结

关于移动端 rem 布局的一些总结

        【资源一】基础知识恕不回顾        基础知识参考以下两篇博客:http://isux.tencent.com/web-app-rem.htmlhttp://www.w3cplus.com/css3/define-font-size-with-css3-rem        【资源二】淘宝m站首页的动态实现        学习http://m.t
浏览:617 分类:移动开发 标签: rem 移动端
移动端适配之rem

移动端适配之rem

        随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行。但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏幕呢?答案就是rem。        俗话说 “授人以鱼不如授人以渔”,但今天我就反其道而行,就是授人以鱼的。因为要跟你说什么设备像素比、css像素、ppi等东西
浏览:497 分类:移动开发 标签: rem 移动端
web移动端Fixed布局解决iOS下的Fixed+Input BUG现象

web移动端Fixed布局解决iOS下的Fixed+Input BUG现象

        移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的
浏览:547 分类:移动开发 标签: 移动端 fixed
移动端开发meta设置css重置样式等等设置

移动端开发meta设置css重置样式等等设置

1、完整的HTML模板<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="wi
浏览:355 分类:移动开发 标签: 移动端 meta
总结移动开发实践中遇到的坑

总结移动开发实践中遇到的坑

        做过很多移动端的项目,在开发调试过程中,一款好的调试工具会让效率大大提高。下面,就总结一下移动端遇见的坑。        1、input   placeholde
浏览:327 分类:移动开发 标签: 移动端

邮箱快速注册

忘记密码