2017年10月_Tank_in_the_street

原创在AngularJs中解决[$compile:multidir]错误和[$compile:tplrt]错误

首先先贴这两种错误情况的图：第一种情况表明的是多指令编译错误，出现这个错误的原因是directive里的第一个参数的名字和所替换的模板的名字发生冲突，解决的办法是改个名字。如我在主页面要引入的模板是这样的：ng-controller="leftmenu"> 模板的文件名是leftNav.html，而配置模板的js文件是这样写的

2017-10-24 20:50:34 5022

原创 ie6下如何使得广告窗口不会因为滚动条的滚动而移动

在现实中，网站为了赚钱肯定会有广告，这些广告无论你的滚动条怎么移动都不会移出你的可视区，你总是可以看见这些广告。其背后的原理是通过position的fixed来进行定位的，这种办法除了广告栏，一些导航栏也这样子使用。但是，如果万恶的客户或者老板叫你兼容ie6的情况下，要如何实现呢？首先要提的是，在ie6下，fixed就变没用了，即使你定好了top和left，它都依然在左上角，并

2017-10-16 16:52:15 434

转载 userAgent大全

一、基础知识篇：HttpHeader之User-AgentUserAgent中文名为用户代理，是Http协议中的一部分，属于头域的组成部分，UserAgent也简称UA。它是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标识，用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计；例如用手机访问谷歌和

2017-10-16 16:40:47 6284

原创 JavaScript中documentElement和body的区别及jQuery中实现兼容的原理

在浏览器里documentElement是一个只读属性，返回的是document节点下的子节点，一般是html。而document.body返回的是body。这两个东西在用到获取浏览器的scrollTop等应用时会发现一些不同，下面代码放到有滚动条的页面运行，当你滚动滚动条的时候，看看火狐、谷歌和ie浏览器到底得出什么样的结果。如：console.log(document.document

2017-10-16 11:20:14 2054

原创对拖拽的高级应用，实现自定义滚动条

下面的自定义滚动条实现了三个功能，一个是对鼠标滚动的监听，一个是对鼠标拖动的监听，最后一个是对鼠标点击的监听，基本上实现了现代浏览器的滚动条功能。 #parent{ width: 15px; height: 500px; background: #ccc; position: relative; margin: 10p

2017-10-15 17:06:53 775

转载 js禁止拷贝等方法

禁止鼠标右键：oncontextmenu="return false"；禁止选择：onselectstart="return false"；禁止拖放：ondragstart="return false"；禁止拷贝：oncopy=document.selection.empty() 。禁止复制：oncopy = "return false"；禁止保

2017-10-14 16:30:27 1109

原创对拖拽的高级应用，实现带框拖拽

本文将对我上篇JavaScript拖拽进行添加特效，实现类似windows7系统那样带框的拖拽。如果有疑问的话先看我上一篇文章JavaScript实现拖拽。本文主要细讲如下实现这特效的细节。在JavaScript中我们要实现一个带框的拖拽的话，其实这个框本身也是一个div元素，而这个div元素是我们动态生成的。要想让这个框会动，首先我们对它的定位动手，在css中新设一个id，让

2017-10-14 14:14:37 606

原创 JavaScript中，四种事件绑定方法及attachEvent与addEventListener的区别

我们在对事件进行绑定的时候，除了常用的对元素对象后面通过点加属性来事件绑定，如：a.onclick = function(){ //code} 我们还能通过attachEvent和addEventListener来进行事件绑定，这两个方法是有区别的，前者的这个方法是用在ie6到8的浏览器那里，而后者的方法是用在除了ie6到8的其他浏览器里。这两个方法对于浏览器的兼容来说

2017-10-14 12:15:38 1119

一般来说，实现拖拽的话，拖拽的基本功能是你对某个想要移动的元素进行点击，点击后按住不放进行移动，该元素就会跟着你的鼠标移动，当你把鼠标一松开，则该元素就会定格在那里。一般的实现这个功能要注意两个地方，一是该元素必须是绝对定位，因为绝对定位脱离了文档流，才能够随意的移动；二是如何能够很好的获取移动的坐标，我们获取的坐标是鼠标移动的坐标减去鼠标在该元素距离边框的坐标，比如说我们点击了该元素的中心位置，

2017-10-12 16:59:23 2958

原创 js的element中，属性以scroll、client和offset为前缀的属性的区别

下面提的Height和Width是基于W3C标准的。首先提的是clientHeight和clientWidth属性，这个属性返回的值是该属性作用的元素的高度+上下内边距-滚动条宽度或者宽度+左右内边距-滚动条宽度，不包括边框、外边距和滚动条。但是在ie5却不是这个结果。ie5的clientHeight和clientWidth等于该元素的高度减上下边框减滚动条宽度或者宽度减左

2017-10-11 20:41:40 598

原创 JavaScript类型转换

在JavaScript中，类型转换是无时无刻的存在的，下面先从简单开始，然后深入探讨这个问题。首先是其他类型转换成布尔类型。在JavaScript中，如果一个变量的值为false、undefined、null、0、0.0、NaN和字符串长度为0的时候，转换成布尔值时得到的是false，如果是其他对象的话转换的是true。如：var a,b,c,d,e,f,g,h,i

2017-10-07 16:24:58 546

原创浅谈js里的attributes和与之相关的一些属性

在前端里，想要对静态的HTML变得更加的动态，就必须要对HTML的dom进行操作，dom犹如一个树，树的最底层是文档节点，这个节点顺着上来就到了html节点，也就是根节点。这个根节点有两个分支，一个是body，另一个是head。head里面有很多个子节点，必须要有的是title节点，其他常见的有meta、style、link等，而body里面也有无数个节点。就拿body里面的p节点来讲，里面就有文

2017-10-07 12:16:29 8302

原创 innerHTML、innerText和outerHTML的区别

在JavaScript里，innerHTML和innerText的主要区别是innerHTML能够把作用元素内的所有内容包括标签都能输出来，而innerText只能输出文本内容，不能输出标签。举个例子，下面的这个例子div标签下有一个文本，这两个方法都能输出haha，但是如果div标签里多一个p标签的话，那么会体现出他们的不同： haha var a = document.getEle

2017-10-07 11:33:48 505

原创在浏览器上画图（canvas的基本用法）

在HTML5里，我们可以通过canvas标签来在浏览器里进行画图，但是这个标签并不是能画图的，画图还是要通过JavaScript，这个标签只是一个载体。在canvas这个标签里，默认的width是300,、height是150，想要设置canvas的长宽的话需要在canvas的width属性和height属性那里设置，这个width和height不属于style里的，搞清楚这一点很重要，所以当你在

2017-10-05 13:41:32 3825

原创如何让ie8及之前的浏览器兼容HTML5新标签和自己设定的新标签

在所有的浏览器里，如果遇到不能识别的未知元素时，就会把这个元素当做行内元素来处理。这个时候，若是一些不支持HTML5语义化标签的浏览器（IE另讲）或者我们新设了一些新的元素（如），我们可以通过在css中，定义它的样式。如语义化标签：header, section, footer, aside, nav, main, article, figure { display: block;

2017-10-05 11:13:36 665

原创浅谈h5的新属性（data-*属性）

HTML5和上一个版本HTML4.01的最大最本质的一个区别点就在于，HTML4.01是基于SGML的，所以标签需要声明引用DTD，DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。而HTML5是不基于SGML的，所以不需要引用DTD。在HTML4.01中，DTD有三种声明方法，分别是Strict、Transitional和Frameset。与它们三个相对应的如下：

2017-10-05 10:04:35 9003

原创用弹性布局实现色子

关于css3的弹性布局，已经用很多大牛讲过关于这个东西了，所以在这里我就不讲弹性布局的原理，想了解的话可以翻看下面的文章：阮一峰弹性布局教程 mdn弹性布局教程 IBM弹性布局教程。下面有一个关于弹性布局被各浏览器接受情况，ie10是能接受弹性布局布局的，只不过是接受老版的弹性布局，在display里需要这样“-ms-flexbox”来声明弹性布局。支持弹性布局的浏览器。下面在讲如何实现色子之前

2017-10-03 09:47:14 2286

Tank_in_the_street的博客