iTakeo

JS控制多行文字超出省略号。

单行文字超出省略号很简单，只要通过css就可以了，如下：

  1. overflow: hidden;  
  2. white-space: nowrap;  
  3. text-overflow: ellipsis;  
单行文字超出省略号，单行文字超出省略号

多行文字超出省略号，也可以通过css来设置，但是只有webkit内核的才支持，Firefox和IE基本跪了。

（更多…）

2015/10/16 0 /
前端
/
标签:  暂无标签

改变attachEvent的this指向，导致无法detachEvent的解决方法。

改变attachEvent的this指向，导致无法detachEvent的解决方法。

我们在给dom元素绑定事件的时候，通常使用下面的方法：

  1. //绑定  
  2. function bind(obj,name,fn){  
  3.     if(obj.addEventListener){  
  4.         obj.addEventListener(name,fn,false);  
  5.     }else if(obj.attachEvent){  
  6.         obj.attachEvent(‘on’+name,fn);  
  7.     };  
  8. };  
  9. //移除  
  10. function unbind(obj,name,fn){  
  11.     if(obj.removeEventListener){  
  12.         obj.removeEventListener(name,fn);  
  13.     }else if(obj.detachEvent){  
  14.         obj.detachEvent(‘on’+name,fn);  
  15.     };  
  16. };  

看似完美，其实在IE8以下中有bug，当在用attachEvent给元素添加事件的时候，默认的this指向是window，而不是元素自身。可以点击下面的div查看。在IE8及以下，this指的是window对象。

（更多…）

2015/10/15 0 /
前端
/
标签:  暂无标签

选择城市组件2

又是一个城市选择组件，之前有个模拟京东的(点击这里查看)。

同样支持无限级，只需在地区json里面添加数据即可，兼容IE7，另外针对移动端也做了一点兼容。

  1. //调用，回调函数返回的是选择的地区  
  2. chooseMap(function(str){  
  3.     alert(str)  
  4. });  

html结构没有写进js里面。需要写入页面中，复制如下代码：

  1. <div class=“choosebg”></div>  
  2. <div class=“pop_location”>  
  3.     <h1><em id=“back”> &lt; </em><span id=“mapName”>选择城市</span> </h1>  
  4.     <div class=“location_lsit” id=“mapWrap”>  
  5.            
  6.     </div>  
  7.     <div class=“btns”>  
  8.         <a href=“javascript:;” class=“cacle”>取消</a>  
  9.         <a href=“javascript:;” class=“choose” id=“choose”>确定</a>  
  10.     </div>  
  11. </div>  

（更多…）

2015/10/13 0 /
前端
/
标签:  暂无标签

随手记：获取url参数

  1. function getUrl(name) {  
  2.     var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);  
  3.     var r = window.location.search.substr(1).match(reg);  
  4.     if (r != null) return unescape(r[2]); return null;  
  5. };  
2015/10/12 1 /
随手记
/
标签:  暂无标签

随手记：旋转按钮。

绕圆心旋转：

  1. ;(function(){  
  2.     var dot = document.querySelector(‘.dot’);  
  3.     var debug = document.querySelector(‘.debug’)  
  4.     var parent =dot.parentNode;  
  5.     var _event = ‘ontouchstart’ in document.documentElement;  
  6.     var start =_event ? ‘touchstart’ : ‘mousedown’;  
  7.     var move = _event ? ‘touchmove’ : ‘mousemove’;  
  8.     var end = _event ? ‘touchend’ : ‘mouseup’;  
  9.     dot.addEventListener(start, eventDown);  
  10.     var angle,delta_y,delta_x;  
  11.     function eventDown(e){  
  12.         mousedown = true;  
  13.         (_event ? dot : document).addEventListener(move, eventMove);  
  14.         (_event ? dot : document).addEventListener(end,eventUp );  
  15.         return;  
  16.     };  
  17.     function eventMove(e){  
  18.         if(mousedown){  
  19.             if(e.changedTouches){  
  20.                 e = e.touches[0];  
  21.             };  
  22.             var st = document.documentElement.scrollTop || document.body.scrollTop;  
  23.             document.title = parent.getBoundingClientRect().top+st  
  24.             delta_x = (parent.offsetWidth / 2 +  parent.getBoundingClientRect().left) – e.pageX ;  
  25.             delta_y = (parent.offsetHeight / 2 + parent.getBoundingClientRect().top)+st – e.pageY;  
  26.             angle = Math.atan2(delta_y, delta_x) * (180 / Math.PI);  
  27.             angle –= 90;  
  28.             if(angle < 0){  
  29.                 angle = 360 + angle;  
  30.             };  
  31.             angle = Math.round(angle);  
  32.             dot.style.transform = ‘rotate(‘ + angle + ‘deg)’;  
  33.             debug.innerHTML = angle + ‘deg’;  
  34.         };  
  35.     };  
  36.     function eventUp(e){  
  37.         (_event ? dot : document).removeEventListener(move, eventMove);  
  38.         (_event ? dot : document).removeEventListener(end,eventUp );  
  39.         mousedown=false;  
  40.     };  
  41. })();  

（更多…）

2015/09/25 1 /
前端
/
标签:  暂无标签

轻量级模拟滚动条插件。

轻量级模拟滚动条小插件，该插件不支持移动端（移动端滚动条插件点击这里），支持IE8以上，自适应（理论上应该支持IE6，只需要将querySelector修改下就可以了）。目前只支持Y轴滚动，X轴后续添加。

  1. //调用  
  2. simpleScroll(‘.div’).init();  
  3.   
  4. //提供两个方法  
  5. simpleScroll(‘.simpleScrollwrap’).init({  
  6.     top : function(){},  //顶部触发  
  7.     bottom : function(){} //底部触发  
  8. });  
  1. //最外层是容器，内层是滚动的元素，需要设置position定位。  
  2. <div class=“wrap”>  
  3.     <div class=“item”>  
  4.         //内容  
  5.     </div>  
  6. </div>  

（更多…）

2015/09/21 0 /
前端
/
标签:  暂无标签

背景随鼠标视差偏移。

不知道叫啥名字，之前挺流行这种效果，鼠标在页面内移动，背景会跟着鼠标反方向偏移，看起来有种视差的感觉，但感觉又不像。

大概如下效果吧。

（更多…）

2015/09/20 1 /
前端
/
标签:  暂无标签

移动端滑动判断。

移动端滑动判断。PC端浏览器也支持，封装了基本的移动操作。

调用

  1. swiperTouch(‘.swiperTouch’).init({  
  2.     touchMove : function(e){  
  3.         //移动的时候触发  
  4.         //有以下几个属性  
  5.         //this为当前的对象  
  6.         //this.type为当前滑动发方向  
  7.         //e.x当前x轴的偏移量  
  8.         //e.y当前y轴的偏移量  
  9.         //e.siteX 当前translate X轴的偏移量  
  10.         //e.siteY 当前translate Y轴的偏移量  
  11.         //以下用法相同  
  12.     },  
  13.     touchStart : function(){  
  14.         //按下触发  
  15.     },  
  16.     touchEnd : function(){  
  17.         //抬起触发  
  18.     },  
  19.     click : function(){  
  20.         //点击触发  
  21.     },  
  22.     left : function(){  
  23.         //只有向左滑动的时候才走这里  
  24.     },  
  25.     right : function(){  
  26.         //只有向左滑动的时候才走这里  
  27.     },  
  28.     up : function(){  
  29.         //只有向上滑动的时候才走这里  
  30.     },  
  31.     down : function(){  
  32.         //只有向下滑动的时候才走这里  
  33.     },  
  34.     tips : function(){  
  35.         //每次滑动只执行一次  
  36.     },  
  37.     scale: function(n){  
  38.         //缩放  
  39.         //有一个参数，参数为true的时候，为放大，false的时候为缩小  
  40.     }  
  41. });  

（更多…）

2015/09/18 0 /
前端
/
标签:  暂无标签

css各种水平垂直居中

css各种水平垂直居中，网上查了一下，总结以下几种

line-height垂直居中
缺点，仅限于单行文字

  1. .item{  
  2.     text-align: center;  
  3.     height: 100px;   
  4.     line-height: 100px;   
  5. }  
水平垂直居中

padding垂直居中
缺点，内容不确定时，高度不好固定

（更多…）

2015/09/17 3 /
前端
/
标签:  暂无标签

模拟移动端滚动条。

移动端模拟滚动条，粗糙的封装了一下，只测试了IOS和安卓4.3，其他未知待测试。

支持X轴和Y轴滚动，默认Y轴，如果需要X轴，需要加上data-type=“x”。下面是调用方法

  1. //调用  
  2. scroll(‘.scroll’).init(）  

另外提供两个方法：

  1. scroll(‘.scroll-wrap’).init({  
  2.     scrollTop  : function () {  
  3.         //顶部触发  
  4.     },  
  5.     scrollEnd  : function () {  
  6.         //底部触发  
  7.     }  
  8. });  

下面是HTML结构。

  1. <div class=“scroll”>  
  2.     <div class=“scrollDom”>  
  3.         //内容  
  4.     </div>  
  5. </div>  

（更多…）

2015/09/16 0 /
前端
/
标签:  暂无标签
7/10
首页
 
上一页
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
下一页
 
末页
 

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部