炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡群,很容易达到吸人眼球的效果. 花时间谷歌了一下,发现实现方法是真的不少,你可以用inline-block加上no-wrap,也可以用rotate将整个页面或者div旋转(不过我对这个是真的苦手,看不懂).看了那么多,尝试总结一下

项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json 配置项可通过 { "disableScroll":true }   来禁用页面下拉滚动 不可在全局配置 app.json中配置 disableScroll 设置为 true 则页面整体不能上下滚动:只在 page.json 中有效,无法在 app.json 中设置该项   至此问题解决,

恍惚间,好久没有在外面写过随笔了.在阿里的那两年,学到了许多,也成长了许多,认识了很多可爱的人,也明白了很多社会的事.最后种种艰难抉择,我来到了美团成都,一个贫穷落后但更自由开放弹性的地方.已经误以为不打卡是对程序猿的保护,现在发现打卡上下班才是最好的保护,且不深谈~ 新的环境开始配置新的电脑,本来把之前电脑上的一些重要配置都有弄成一个文件准备带过来的,好像上传个人钉盘被和谐掉了,只好自己再弄一次. 1.打开电脑,联网,登录 icould,itunes,etc 2.升级电脑系统(反正迟早是要升级

你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Inspiration,挖掘了其他很多有关 CSS 阴影的点子,是之前的文章没有覆盖到的新内容,而且有一些很有意思,遂打算再起一篇. 本文的题目是 CSS 阴影技巧与细节.CSS 阴影,却不一定是 box-shadow 与 filter:drop-shadow,为

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

11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.line-开头的属性才可以继承    2.a标签的文字颜色和下划线是不能继承别人的    3.h标签的文字大小是不能继承别人的,会改变,但是会在原来字体大小的基础上改变    ps:打开浏览器审查元素可以看到一些inherited from...的属性3.应用场景:    通常基于继承性统一设置网页的

何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. 通常而言,滚动视差在前端需要辅助 Javascript 才能实现.当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力.下面就让我们来见识一二: 认识 background-attachment background-attachment 算是一个比较生僻的属性,基本上平时写业务样式都用不到这个

滚动行为 使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个功能只在支持 history.pushState 的浏览器中可用. 当创建一个Router实例,你可以提供一个scrollBehavior方法 const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedP

1.何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术.效果如图: 一般而言,滚动视差在前端需要辅助 Javascript 才能实现.当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力. 2.认识 background-attachment background-attachment:如果指定了 background-image ,那么 back

  何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. 通常而言,滚动视差在前端需要辅助 Javascript 才能实现.当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力.下面就让我们来见识一二: 认识 background-attachment background-attachment 算是一个比较生僻的属性,基本上平时写业务样式都用不到

路由是根据不同的 url 地址展示不同的内容或页面,早期的路由都是后端直接根据 url 来 reload 页面实现的,即后端控制路由. 后来页面越来越复杂,服务器压力越来越大,随着AJAX(异步刷新技术) 的出现,页面实现非 reload 就能刷新数据,让前端也可以控制 url 自行管理,前端路由因此而生. 如果直接使用AJAX加载页面片段是可以实现单页效果的,但这样会破坏浏览器的前进与后退功能,使用Hjax或Pjax技术后即可以实现单页无刷新效果又不会影响前进与后退功能. 示例: <!DOCT

一.缘起 在自己给别家公司做兼职外包的时候,已经明确知道外包的活不是那么好干的,一般在经历了初期热血澎湃的激情后,逐渐冷淡,愤怒,再冷淡,再愤怒…,听上去好像高潮迭起,但令人尴尬的是,这高潮迭起我们都不想要,以至于最后都想草草结束,一走了之.但当我们把Android移动应用委托第三方开发后,还是未能料到产品会如此粗糙,在不能确定这产品要到何时才能与观众见面时,我们果断终止了恋爱. 于是接下来可选的方案有限,初期采用好评如潮的phonegap开发后,其界面的流畅速度,尤其以下滑滚动速度最让人不能接

  一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. 效果连接http://lko2o.com/ 首页http://lko2o.com/moon 案例 二.手机后台效果 三.电脑前端 四.电脑后端  

在APP中我们经常会在页面下拉时看到一些动效,例如下拉图片跟随放大.下拉刷新出现loading动画等,这个交互细节在各个主流APP以及手机原生系统中随处可见,能为APP增添个性亮点. 一.背景 在我们的日常项目中,也会遇到这样的需求,在当前环境下,此类效果大多是靠原生来实现的,但是用原生实现有不少缺陷,原因如下: 原生实现周期长; 跨平台实现成本高; 解决方案通用性差; 运用到现有项目改造成本高; 那么我们的H5页面能否实现呢?下面和大家一起来探索. 首先,我们先来实现下拉banner图放大的动

Sprint3总结 一.类名:软件工程-第三阶段 二.时间:至12.18 三.选题内容:web版-餐厅到店点餐系统 四.(1)团队博客地址: http://www.cnblogs.com/queenjuan (2)团队GITHUB地址: https://github.com/Taolu1234/Taolu1234 五.队员信息 姓名 学号 个人博客链接 个人GITHUB链接 丘娟 http://www.cnblogs.com/queenjuan/ https://github.com/Queen

Sprint3第三阶段 1.类名:软件工程-第三阶段 2.时间:至12.18 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/queenjuan 团队GITHUB地址: https://github.com/Taolu1234/Taolu1234 5.队员信息 姓名            学号                    个人博客链接                  个人GITHUB链接 丘娟 201406114101  h

一改变页面title的值   在开发时常常需要在切换到不同页面时改变浏览器的title值,那么我们就可以在定义路由的时候通过配置 meta 属性 来改变title值. import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import UserInfo from ".././userInfo.vue"; import ChangeCommunity from ".././ChangeComm

基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p&g

下面简单介绍facebook-wda库--API的学习 import wda # debug模式,会在run运行时控制台生成消息 wda.DEBUG = False # False 关闭,True开启 # 如果连接本地地址失败,通常会运行1分钟才弹超时信息,在这可以设置超时10s就提示信息 wda.HTTP_TIMEOUT = 10.0 # 默认 60.0 seconds # 连接IOS测试机 c = wda.Client('http://localhost:8100') # 解锁屏幕并启动fa

1.小程序都报wxss编译错误 解决方法: 在控制台输入openVendor() ,清除里面的wcsc wcsc.exe 然后重启工具 2.微信小程序wx:for警告 Now you can provide attr "wx:key" for a "wx:for" to improve performance. 上文为警告,不处理不影响程序运行. 在wx:for后面添加wx:key="key" 可消除警告. 3.引入外部字体 先外部字体准备好. 

vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫 全局前置守卫 const router = new VueRouter({ ... }) router.beforeEach((to,