移动

happyzgm

happyzgm|鼠标左右移动,图片也跟着移动

发布于 23 分钟前 浏览:12 类型:原创 - 随笔 分类:HTML/CSS 举报

效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值html代码效果预览<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><style>body{margin:0;}#wrap{widt ...

13611606223

13611606223|阻止移动端页面滚动

发布于 前天 17:32 浏览:223 类型:原创 - 随笔 分类:手机移动 举报

方法一:javascript代码效果预览$(document).on('touchmove',function(e){e.preventDefault();})方法二:css代码效果预览position:fixed;top:0;left:0; ...

mnblue

mnblue|CSS3之transform

发布于 3 天前 浏览:116 类型:原创 - 随笔 分类:HTML/CSS 举报

1.transform2D变换1.rotate旋转(单位deg)html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no"/><title>Document</title><styletype="text/css">#box{width:100px;height:100px;border:1px ...

WebMaster

WebMaster|推销自己的前端技术书籍

发布于 4 天前 浏览:1186 类型:原创 - 教程 分类:JavaScript 举报

今天主要自我推销两本前端技术书籍!《JavaScript半知半解》《Web开发实战》如果链接失效,可复制这里:《JavaScript半知半解》http://www.kancloud.cn/dennis/tgjavascript《Web开发实战》http://www.kancloud.cn/dennis/javascriptmethod一、《JavaScript半知半解》为什么写这本书?因为之前作者在博客上洋 ...

推销自己的前端技术书籍
springalsky

springalsky|JavaScript移动端地址选择器

发布于 4 天前 浏览:151 类型:原创 - 随笔 分类:JavaScript 举报

大家好,在这里推荐一个自己写的picker组件,可拓展多级选择,如日期选择等。项目带有JavaScript移动端地址/城市选择器demo。如果有需要可以使用,经过测试主流的一些手机,如果有什么疑问,可以帮忙提issue。我会尽快答复大家。可以去我的github下载源码。相关说明在readme中。github地址:https://github.com/springals ...

JavaScript移动端地址选择器

最近,结合自己的工作和平时看到的,总结了移动端页面重构布局的一些方法和心得,如下图:制图工具大家应该都知道吧,叫XMind(思维导图),不知道的百度一下就知道了。 ...

一张图让你秒懂移动端页面重构布局(Layout)
彭玉婷

彭玉婷|移动端基础事件总结与应用

发布于 4 天前 浏览:1069 类型:原创 - 随笔 分类:手机移动 举报

触摸事件touch,设备加速度事件devicemotion,设备方向事件deviceorientation,手势事件gesture四个部分的总结和应用,以下demo需要用实体机测试。1.触摸事件touchtouchstart手指放在屏幕上触发touchmove手指在屏幕上移动,连续触发 ...

移动端基础事件总结与应用
mnblue

mnblue|移动端之事件

发布于 4 天前 浏览:116 类型:原创 - 随笔 分类:手机移动 举报

1、移动端事件移动端的三大事件:手指按下:ontouchstart ...

mnblue

mnblue|移动端之响应式

发布于 4 天前 浏览:138 类型:原创 - 随笔 分类:手机移动 举报

1.mediamin-width:当屏幕大小大于等于某个值的时候识别&nbs ...

lauhee

lauhee|移动端常用的函数(less/sass)

发布于 5 天前 浏览:120 类型:原创 - 随笔 分类:HTML/CSS 举报

常用函数/*伸缩布局容器*/.db(){display:-webkit-flex;display:-webkit-box;display:-ms-flexbox;display:flex;}/*伸缩性*/.fx1(@num:1){-webkit-box-flex:@num;-webkit-flex:@num;-ms-flex:@num;flex:@num;}/*伸缩方向为垂直方向*/.v(){-webkit-box-orient:vertical; ...

lauhee

lauhee|初识weex(一)

发布于 5 天前 浏览:107 类型:原创 - 随笔 分类:手机移动 举报

1.Weex基本信息官方支持iOS、Android、HTML5.WriteOnce,RunEverywhere。一次编写可生成三平台代码。DSL模板学习超简单,直接写HTML、CSS、JS。这意味着可以直接用现有编辑器和IDE的代码补全、提示、检查等功能。轻量级、可扩展、高性能。集成花样多,可在HTML5页面嵌入,也可嵌在原生UI中。2.Weex的由来We ...

mnblue

mnblue|弹性盒模型

发布于 5 天前 浏览:110 类型:原创 - 随笔 分类:手机移动 举报

1.弹性盒模型(新版)使用时父级元素需添加display:flex;(老版)使用时父级元素需添加display:-webkit-box;2.关于主轴主轴是影响弹性盒模型元素排列的方向(默认是水平方向,从左往右)侧轴是与主轴垂直的方向(默认是垂直方向,从上到下)html代码效果预览/*新版弹性盒模型*//*display:flex;*//*设置 ...

mnblue

mnblue|移动端基础之适配

发布于 6 天前 浏览:206 类型:原创 - 随笔 分类:手机移动 举报

1.百分比适配弊端:height无法设置2.viewport适配原理:就是用js把所有设备的viewport设置成一样的html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript ...

mnblue

mnblue|移动端开发基础之常见问题

发布于 6 天前 浏览:198 类型:原创 - 随笔 分类:手机移动 举报

一、移动端基本环境chrome模拟器360浏览器模拟器(内核也是chrome)本地服务器xampp使用手机连接相同的wifi二、移动端常见问题1、viewport(可视区窗口)& ...

kayun

kayun|一些移动端笔记

发布于 2017-01-03 11:42:42 浏览:356 类型:原创 - 随笔 分类:手机移动 举报

Touch1.touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指。2.touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动。3.touchend:当手指离开屏幕时触发。4.touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面 ...

zhuoyuansheng

zhuoyuansheng|移动端布局计算宽度 动态设置html font-size:

发布于 2016-12-31 10:42:40 浏览:334 类型:原创 - 随笔 分类:手机移动 举报

vardeviceWidth=document.documentElement.clientWidth;if(deviceWidth<=640){document.documentElement.style.fontSize=100*deviceWidth/320+'px';}有的浏览器最小字体12px,这里以320px为基准font-size: ...

Lookforto

Lookforto|touch和click带来的问题

发布于 2016-12-27 10:19:58 浏览:291 类型:原创 - 随笔 分类:手机移动 举报

1.touch事件--移动端--需要绑定以下是四种touch事件touchstart://手指放到屏幕上时触发touchmove://手指在屏幕上滑动式触发touchend://手指离开屏幕时触发touchcancel://系统取消touch事件的时候触发,这个好像比较少 ...

a673383636

a673383636|前端开发笔记1 。

发布于 2016-12-27 09:17:45 浏览:202 类型:原创 - 随笔 分类:手机移动 举报

1:rem适配html代码效果预览vardocElement=document.documentElement,Event="onorientationchange"inwindow?"orientationchange":"resize",timer;functionfn(){setRemSize();}functionfnInit(){setRemSize(true);}functionsetRemSize(ini){if(ini){varsize ...

前端开发笔记1 。
lemon小芯

lemon小芯|【转】禁止body滚动允许div滚动防微信露底

发布于 2016-12-26 17:10:00 浏览:259 类型:原创 - 教程 分类:手机移动 举报

转载注明出处:https://blog.ghostry.cn/program/702.html最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动。正常来讲加上body{height:100%;overflow:hidden;}应该就阻止页面滚动了。可是很悲催的是手机端并不能很好的执行,而且还有弹性效果。所以只能对默认的滚动进行干涉。首先禁止bodydocu ...

Angelialee

Angelialee|移动端的滑屏

发布于 2016-12-26 15:29:26 浏览:405 类型:原创 - 随笔 分类:手机移动 举报

接到一个奇葩的任务,在一个既不是手机也不是iPad的移动端上做一个滑屏事件(非常非常大的安卓机上),原本是可以考虑使用swiper或者其他的插件来完成的,而需求是在第二屏的时候有个超长的内容需要自带滚动条滚动,当滚动到最低的时候再往上滑出现第三屏,滚动到最顶的时候再向下滑出现第一屏。想了想就放弃了使用插件,改 ...