单行文本溢出显示省略号 我是单行文本溢出显示省略号的效果咧 .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, 4499阅, 0评 ]
大话主席的TouchSlide插件短小精悍,各种效果也比较实用,非常适合用于移动端的项目。但是在基于angularjs的项目中,轮播的数据是从服务端获取的,需要从服务端拿到数据之后才能执行TouchSlide的方法,而且TouchSlide对于ng-repeat出来的数据极不友好,所以我偏不使用ng-repeat而直接append添加到DOM中,虽说有悖于angularjs的一些初衷,但是问题确实快速的解决了,哈哈,特此贴下代码记录一番,后期再逐渐优化更新。 效果预览:angularjs基于TouchSlide的触屏轮播 TouchSlide各种效果配置信息及下载详见...
text-align:justify实现单行文本两端对齐
[ 2017/11/07, 4329阅, 0评 ]
我们知道text-align:justify不会处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以想办法给它增加一行,再把增加的这行隐藏掉即可。比如添加<span><i><em>等行内空标签,然后设置相应的css,但是加入HTML元素违反了结构表现分离的原则,因此我们可以使用after、before伪元素的方式来派生出新行,这样就不需要额外处理html代码,然后再将派生出的新行隐藏即可。 效果如下 .test{width...
QRCode.js:使用javaScript生成二维码
[ 2017/11/06, 3224阅, 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, 6658阅, 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, 4398阅, 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...
PC和移动端常用轮播或滑动组件整理
[ 2017/09/09, 7162阅, 0评 ]
1.SuperSlide(PC)/TouchSlide(移动端) SuperSlide基于jQuery插件,致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!还可以多个SuperSlide组合创造更多效果,兼容包括ie6的绝大部分浏览器。 TouchSlide是纯javascript打造的触屏滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 SuperSlide/TouchSlide官网 2...
angularJS分页功能的简单实现
[ 2017/08/25, 4607阅, 0评 ]
思路:触发页码切换时发送对应请求到服务器,成功后替换原来的数据。适合PC端使用。 无限滚动加载:angularJS插件:ngInfiniteScroll无限滚动加载数据(自动分页) 1、controller myApp.controller("pageNaviCtrl",['$scope','$http','pageNavi',function($scope,$http,pageNavi){ $scope.pageCur = 1; $scope.pageAll = 0; $scope.pages = []; $scope.showPageNavi = fa...
屏蔽右键 document.oncontextmenu = function() { return false; }; 屏蔽f12等按键 //禁止f12(谷歌,ie有效,但仍可以从其他方式进入开发者模式) document.onkeydown=function(e){ var currKey=0,evt=e||window.event; currKey=evt.keyCode||evt.which||evt.charCode; if(currKey == 123){ window.event.cancelBubble = true; wi...