前端
文章平均质量分 67
辛丙亮
开拓视野,冲破艰险,看见世界,身临其境,贴近彼此,感受生活
展开
-
纯css满屏图像幻灯片制作
天天写Linux有点烦,换个口味。今天说一下使用css制作满屏幻灯片,我是看的来自淘宝工程师在w3cplus写的文章:纯CSS3制作满屏图像幻灯片。 作者写的很好,也是我经常逛的博客,推荐给大家,可能是作者可能觉得不言自明,很多细节问题作者并没有说明 ,我在这里仔细说明一下。 相关文件可以在w3cplus上找到。 HTML结构超级简单:原创 2016-01-11 11:56:20 · 1188 阅读 · 0 评论 -
javascript命令模式
javascript命令模式传统面向对象语言中的命令模式<body> <button id="button1">点击按钮1</button> <button id="button2">点击按钮2</button> <button id="button3">点击按钮3</button></body><script> var button1 = document.ge原创 2016-08-17 15:19:08 · 396 阅读 · 0 评论 -
javascript组合模式
javascript组合模式组合命令<script> var MacroCommand = function () { return { commandList: [], add: function (command) { this.commandList.push(command);原创 2016-08-17 16:27:40 · 442 阅读 · 0 评论 -
javascript模版模式
javascript模版模式模版模式:利用父类定义一些类似对象的公共方法和操作框架简单例子var Beverage = function () {};Beverage.prototype.boilWater = function () { console.log('把水煮沸');};Beverage.prototype.brew = function () { //原创 2016-08-17 17:25:47 · 460 阅读 · 0 评论 -
javascript享元模式和对象池技术
javascript享元模式享元模式:运用共享技术来有效支持大量细粒度的对象 内部状态:被一些对象共享,独立于具体场景,通常不变 外部状态:取决于具体的场景,并根据场景而变化文件上传的假设例子var id = 0;window.startUpload = function (uploadType, files) { //uploadType区分是控件还是flash for(var原创 2016-08-18 11:16:51 · 3211 阅读 · 0 评论 -
HTML5-Canvas
Canvas绘图绘制线段HTML结构<canvas id="diagonal" width="400px" height="400px"> 您的浏览器不支持!</canvas>原创 2016-08-08 16:48:28 · 557 阅读 · 0 评论 -
HTML5-音频和视频
音频和视频基本使用只有在浏览器使用video和audio就可以开始使用了<video src="video.webm" controls></video><audio src="audio.ogg" controls></audio>当浏览器不支持时可以在标签之间使用其他替代的媒体方案source使用source可以指定多个资源,但是video和audio都不支持跨域<audio control原创 2016-08-09 15:58:05 · 503 阅读 · 0 评论 -
HTML5-地理位置接口
HTML5地理位置接口简单来说这个接口的使用就是两个函数getCurrentPosition(successCallback, errorCallback, options) 一次更新位置watchPosition(successCallback, errorCallback, options) 重复更新位置 两者的区别在于,前者一次性获得,而后者是一个函数监听,位置发生变化就会调用函数,并返原创 2016-08-09 16:15:46 · 544 阅读 · 0 评论 -
javascript多态、封装和原型链
javascript多态、封装和原型链这些内容将是初级javascript coder迈向初高级的必由之路。多态多态指:同一操作作用在不同的对象上,可以产生不同的解释和不同的类。 var googleMap = { show: function () { console.log("展示谷歌地图"); }};var baiduMap = { show:原创 2016-08-15 11:17:58 · 516 阅读 · 0 评论 -
javascript中this指向问题
javascript中this指向问题在对象方法中调用在对象方法中this就是指该对象var obj = { name: 'xin', getName: function () { return this.name; }};console.log(obj.getName()); //xin作为普通函数调用作为普通函数调用时指向全局对象,被全局对象原创 2016-08-15 13:58:55 · 559 阅读 · 0 评论 -
javascript观察者模式
javascript观察者模式观察者模式:当一个对象的状态发生改变,所有依赖于它的对象都将得到通知通用发布订阅var event = { clientList:[], listen: function (key, fn) { if(!this.clientList[key]){ this.clientList[key] = [];原创 2016-08-17 11:00:26 · 1011 阅读 · 0 评论 -
javascript迭代器
javascript迭代器迭代器:提供一种顺序访问聚合对象各个元素方法,并不暴露该对象jQuery迭代器$.each([1, 2, 3, 4], function (i, n) { console.log(i +'---'+ n);})自定义迭代器var each = function (ary, callback) { for (var i = 0, l = ary.lengt原创 2016-08-16 17:04:22 · 422 阅读 · 0 评论 -
javascript代理模式
javascript代理模式代理模式:为一个对象提供一个替代品或占位符,以便控制对它的访问var Flower = function () { this.name = "玫瑰";};var xiaoming = { senfFlower: function (target) { var flower = new Flower(); target.re原创 2016-08-16 16:05:49 · 414 阅读 · 0 评论 -
css3 中的filter使用
filter的作用就是像对图像和视频产生各种各样的效果,这个仅仅只有webkit内核的浏览器支持。 html结构img{ margin-left: 10px;} 效果一:grayscale灰度,值的范围0~1 .change{ -webkit-filter:grayscale(1); }原创 2016-01-13 13:04:57 · 337 阅读 · 0 评论 -
3.css制作面包屑
面包屑常用来显示标签之间的层级关系,我们过去经常使用图片来配合制作,现在我们通过css3写三角形也可以用来完成这样的一个目标。 HTML结构 Home Level #1 Level #1-1 Level #1-1-1 Current Level 基础样式/* 基本样式的重置原创 2016-01-13 22:12:44 · 618 阅读 · 0 评论 -
4.动画加载效果
这个简单的动画加载是由中间向两边扩展的效果,比较简单。这部分内容是参看的W3CPLUS上的文章。 小志博客- 小志的照片- 《css那些事》- 添翼地带- linxz's lab- CSS小工具- >原创 2016-01-14 15:05:11 · 296 阅读 · 0 评论 -
5.less常见使用
less和sass就是使用其他工具将某种格式的文本重新编译成css文件,好处在于方便工程管理、避免写大量的重复内容和利于维护。我们常常使用的方式是:写好less后在本地编译后使用编译后的css文件,虽然sass和less能做到请求时进行编译,但是会带来额外的开销,所以我们一般会本地进行编译,以下内容能让你在两个小时内迅速掌握less的使用。 设置less的字符编码方式@charset原创 2016-02-17 17:11:13 · 419 阅读 · 0 评论 -
javascript中原型链理解
javascript对象问题原型链问题var obj= {name: 'seven'};var A = function(){};A.prototype = obj;var a = new A();console.log(a.__proto__ === A.prototype);console.log(a.name);以上代码的对象指向问题: 当对象继承查找发生时,新对象隐藏的属性p原创 2016-08-03 15:14:16 · 305 阅读 · 0 评论 -
javascript闭包
javascript闭包闭包生存周期<body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></body><script> var nodes = document.getElementsByTagName('div'); for (var i=0, l =原创 2016-08-15 15:59:06 · 316 阅读 · 0 评论 -
javascript单例
javascript单例单例模式是指,一个类仅有一个实例,并提供一个访问它的全局访问点。一般单例写法var Singleton = function (name) { this.name = name; this.instance = null;};Singleton.prototype.getName= function(){ console.log(this.name)原创 2016-08-16 11:32:00 · 388 阅读 · 0 评论 -
jquery选择器
parent > child 父元素下的子元素,不包括孙元素prev + next 紧接在prev元素后的next元素:first 第一个元素:last() 最后一个:not 除了某元素:even 偶数:odd 奇数:eq 从零开始的第几个:gt() 比从零开始的索引值大的:lt() 小:header h1~h6:animated 怎在执行的动画:focus 获得焦点的元素原创 2016-08-04 16:40:40 · 212 阅读 · 0 评论 -
jquery-Ajax
$.ajax().ajax(url[,setting])该方法一般不会使用到,有大量的可以设置的参数[.ajax(url[, setting]) 该方法一般不会使用到,有大量的可以设置的参数[.ajax的参数](http://jquery.cuishifeng.cn/jQuery.Ajax.html) $.ajax({ type: "POST", url: "som原创 2016-08-04 16:41:47 · 268 阅读 · 0 评论 -
jquery操作属性
attr(name|pro|key,val|fn)设置或返回被选元素的属性值$("img").attr({ src: "test.jpg", alt: "Test Image" });$("img").attr("title", function() { return this.src });emoveAttr(name)每一个匹配的元素中删除属性$("img").removeAttr("src原创 2016-08-04 17:00:47 · 527 阅读 · 0 评论