body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴 我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPropagation(),手机网站上面还是不可以. 解决方案 我经过反复测试,发现滚动轴滚到底部的时候,会触发body

最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 现在客户用一个需求是这样的 图一                                                                                  图2                                                  

在手机端浏览商品列表,开发人员懂得设计图片做正好的尺寸,那样浏览很好,但有人天生泛懒图片都是随手上传不管大小合适不合适,要求还是响应式的.今天就用jquery检测宽度,并赋值给高度来实现错位问题 <style> * { margin: 0; padding: 0; } body { font: 14px/22px "Microsoft YaHei", arial, serif; } .menu-one li{ width:33.33333333%; float: left;

感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题, 于是决定写一个插件,专门对付手机网页的弹窗. 弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动. 几处认为需要留意的知识点或困难点: 1.事件冒泡: e.prev

本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:https://github.com/zhaogaojian/JGUI 效果觉得好的给个star,谢谢! 源码未压缩,请右键查看网页源码,相关文件有accordion.js,accordion.css,index.html 隐藏滚动条可以通过设置margin隐藏滚动条方式实现,css3支持直接隐藏滚动条

转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" id="preview"/><img id="theImg"/> var oBtn = document.getElementByIdx_x_x('preview');    var oImg = document.getElementByIdx_

轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中使用,同时兼容pc端和触屏端. 轮播图的样式也分很多种,淡入淡出的轮播图很容易实现,只需要把图片全都叠在一起,让相应的图片轮流显示就行了,但是滚动能的轮播图就要复杂很多.这里介绍的是滚动的轮播图: 原理: 实现的原理就是将所有的图片横向的排列起来,排成一个长方形,让这个长方形的总体不断平移,从而使图

项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17px; display: inline-block; border-radius: 5px; height: 18px; line-height: 18px; margin-top: 15px; max-height: 18px; max-width: 90%; white-space:nowrap;

手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) 以750px的收集设计稿,采用36px的基础单位 html{ font-size: calc(36 * (100vw) / 750);}rem就可以使用了

一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use

一:click事件的封装 手机端的click事件不是太好用, 1.点击会有延迟, 2.会出现一个灰色区域 就想到了用touch事件代替. touch事件有touchstart,touchmove,touchend. 在使用的时候会有这样的一种情况. 现在我想在一个元素上使用touch实现单击. 意思就是当我的手点下去,在抬起来后触发事件. 如果我绑定touchstart肯定是不行的:手还没抬起,就触发了事件. 如果绑定touchend.会有一些不友好的体验. 比如:我的手在元素上滑动,然后抬起,

js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说直接上代码: js部分:   <script> $(function () { var urlinfo = window.location.href; var UserName = urlinfo.split("_")[1]; //查看用户是否设置手势密码,如果设置调用add,

今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面.地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来代替,有些图标不多的时候就自己单个的切出来控制了. 看了下携程的手机端的网站这些图标是用了雪碧图来合并的,因为一直以来手机端的屏幕大小不一,所以通常都会把设计图等比例缩放的形式展现,百分比的方式来布局,达到自适应. 下面我们就来说说这个携程手机端的案例吧: 首先这个雪碧图的原理与PC端的是一样的,只

我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签: 一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Conten

html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去除所有元素的内外边距*/ *{ margin:; padding:; } /*去除所有ul里li的小圆点*/ ul{ list-style-type: none; } /*去除所有a的下划线*/ a{ text-decoration: none; } /*将图片转换成区块,将图片最大宽度设置成100%,使图片

一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use

我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签:一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content

手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/annie211/p/8118733.html 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) <script>!function(e){functio

1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如果为 fix 布局,会影响弹框中  input输入框的输入位置 4.h5中  没有hover 只能通过 touchstart touchend 事件来失效某些效果, 并且这些事件和click 是重叠触发的... -------                   手机端事件总结 touchstart

一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use

前言:刚刚接触css3的盒模型,感觉对于解决水平垂直居中.固定宽度/高度和可变宽度/高度同时存在这样的问题很有效.但是最近在看一个腾讯手机端框架(Frozen UI )的时候发现一个很神奇的多行文字截断的样式,感觉:我靠,怎么那么神奇,如下图 框了一下它的css,如下图: 我一看这貌似是盒模型的用法吧,但是不是说现在最新版本的都用display:flex吗,为啥还有display:-webkit-box的用法呢,而且之前也见ionic里面也是老的用法,那么问题来了,1.盒模型现在用的多不,兼容性