angularJS之$location服务
[ 2017/11/20, 3378阅, 0评 ]
The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar. The $locati...
移动端手势库hammerJS
[ 2017/11/18, 2954阅, 0评 ]
hammerJS是一个优秀的、轻量级的触屏设备手势库,他可以完美的实现在移端开发的大多数事件,如:点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架,并且整个框架非常小,使用也非常简单。 浏览器/终端的支持 无须担心你的浏览器或系统不在下方的列表上,Harmmer可以运行在除了IE8-的任何地方。浏览器若对触摸行为(touch-action)提供原生支持,那么对比那些不支持的浏览器,会有更好的体验。 相关文档资料 Hammer.JS官网 HammerJS.GitHub 移动端手势库hammerJ...
css常用水平或垂直居中方法总结
[ 2017/11/16, 2612阅, 0评 ]
1.margin:0 auto水平居中 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。 2.text-align:center水平居中 只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个浏览器中,它是能对任何元素进行水平居中的。 3.height和line-height让单行文字垂直居中 把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。 4....
单行文本溢出显示省略号 我是单行文本溢出显示省略号的效果咧 .test1{ /*示例css*/ background:#e5e5e5; width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本溢出显示省略号-webkit-line-clamp -webkit-line-clamp是一个不规范的属性,它没有出现在 CSS 规范草案中。它用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:...
angularJS基于TouchSlide的触屏轮播实现
[ 2017/11/11, 3964阅, 0评 ]
大话主席的TouchSlide插件短小精悍,各种效果也比较实用,非常适合用于移动端的项目。但是在基于angularjs的项目中,轮播的数据是从服务端获取的,需要从服务端拿到数据之后才能执行TouchSlide的方法,而且TouchSlide对于ng-repeat出来的数据极不友好,所以我偏不使用ng-repeat而直接append添加到DOM中,虽说有悖于angularjs的一些初衷,但是问题确实快速的解决了,哈哈,特此贴下代码记录一番,后期再逐渐优化更新。 效果预览:angularjs基于TouchSlide的触屏轮播 TouchSlide各种效果配置信息及下载详见...
text-align:justify实现单行文本两端对齐
[ 2017/11/07, 3783阅, 0评 ]
我们知道text-align:justify不会处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以想办法给它增加一行,再把增加的这行隐藏掉即可。比如添加<span><i><em>等行内空标签,然后设置相应的css,但是加入HTML元素违反了结构表现分离的原则,因此我们可以使用after、before伪元素的方式来派生出新行,这样就不需要额外处理html代码,然后再将派生出的新行隐藏即可。 效果如下 .test{width...
QRCode.js:使用javaScript生成二维码
[ 2017/11/06, 2883阅, 0评 ]
QRCode.js是一个用于生成二维码的JavaScript库。主要是通过获取DOM的标签,再通过HTML5 Canvas绘制而成,不依赖任何库。 1.基本用法 <div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "https://www.eqifei.net"); // 设置要生成二维码的链接 </script> 或者使用一些可选参数设置: var qrcode = ...
laydate.js加载laydate.css路径错误问题
[ 2017/10/27, 6282阅, 0评 ]
laydate.js经过贤心大大的重写之后功能越来越强大,用起来也愈渐灵活了,但是在一个基于angular+ocLazyLoad的项目中出了点问题。laydate.js是通过ocLazyLoad异步加载引入的,结果始终加载不出来laydate.css文件,看了下路径错误,于是扒开代码发现是这样写的: getPath:function(){ var e=document.scripts, t=e[e.length-1], n=t.src; if(!t.getAttribute("merge")) return n.substring(0,n.lastIndexOf(...
基于jquery的移动端下拉刷新功能
[ 2017/09/23, 3991阅, 0评 ]
附件俩个: js代码如下: var pullrefresh = { init : function() { var pos = {}; var status = false; var divobj = null; var contentobj = null; var reloadflag = false; $('body').on('touchstart', function(e) { e = mygetnativeevent(e); pos.startx = e.touches[0].pageX; pos.s...