jQuery animate()小结 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>
使用CSS3的Flex属性让元素居中 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ display: flex; justify-cont
CSS3 图片旋转特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片旋转特效</title> <style type="text/
原生JS 图片变换特效 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片切换特效</title><style>#images{position:relative;width:100%;height: 500px;overflow:h
CSS3图片放大和翻转 a:hover .div{ transform: scale(0.8,-1); }图片翻转0-1 缩小图片1以上 放大负值 翻转第一个参数 X轴方向 第二个 Y轴方向文章中是缩小至80% 同时上下翻转
JS 放大镜特效 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title><style type="text/css"> #div1{
使用伪元素制作一个带三角的气泡框 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .div01{ border: 1px solid #f00; wid
JQ做的一个焦点图特效 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery焦点图</title><style type="text/css">.box{ margin-top: 300px; width: 1
CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式 原文地址:http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.htmlCSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSe...
使用伪元素解决浮动子元素造成的父元素塌陷问题 .nav::after{ content:""; clear:both;/*清除浮动*/ display:block;/*确保该元素是一个块级元素*/}使用伪元素的好处是避免清除浮动时添加多余的标签 是逼格比较高的一种写法可惜兼容性比较差如果要兼容性更好 建议在浮动元素后面添加一个DIV并添加 clear:both 属性...
嵌套关系的DIV布局margin塌陷及解决 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div01{ width: 300px; height: 30
JS typeof失效的2种情况 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> </title></head><body> <script type="
面试中可以用到的2种数组排序方法 做面试题时 常常会考数组排序的问题我个人认为并没有必要掌握全部的方法 掌握2种常用的即可 var arr = [1,2,3,4,5,1,2,3,4,5,'1','1',2,'2','2']; var quickSort = function(arr){ if(arr.length <=1 ){return arr;} var pivotIndex = Math.floo...
ES6 let 命令 不存在变量提升var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。死区只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响var tmp = 123;...
MVC MVP和MVVM MVC是三个单词的首字母缩写,它们是Model(模型)、View(视图)和Controller(控制)。这个模式认为,程序不论简单或复杂,从结构上看,都可以分成三层。1)最上面的一层,是直接面向最终用户的"视图层"(View)。它是提供给用户的操作界面,是程序的外壳。2)最底下的一层,是核心的"数据层"(Model),也就是程序需要操作的数据或信息。3)中间的一层,就是"控制层"(Controll...
面试题:如何解析当前页面网址 并转为字符串储存 <script type="text/javascript"> // 将js中的对象、数组,转化 var str1 = JSON.stringify(location.href); console.log(str1);
CSS优化(转载) 提高CSS代码性能主要有两个点: 1、提高页面的加载性能 提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存 2、提高CSS代码性能 不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的提高CSS性能的手段 首先说说如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要总结有下面几点: ...
对象如何深度克隆 <script type="text/javascript">function clone(obj) { //判断是对象,就进行循环复制 if (typeof obj === 'object' && typeof obj !== 'null') { // 区分是数组还是对象,创建空的数组或对象 var o = Object.prototype.toStr...
JS预编译面试题 其一 <script> var x = 1, y = z = 0; function add(n) { n = n+1; } y = add(x); //2 function add(n) { n = n + 3; } z = add(x); // //问执行完毕后 x, ...
使用flex属性做一个粘性页脚 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>粘性页脚测试</title> <style> .Site { display: flex;