Canvas使用教程——图形变换(Transformations)

评论(0)浏览(104)分类:Canvas/VML/SVG
Canvas使用教程——图形变换(Transformations)来源:https://developer.mozilla.org/en/Canvas_tutorial%3aTransformationsSaving and restoring stateBefore we look at the transformation methods, I'll introduce two other methods which are indispensable once you start generating ever more complex drawings.save()restore()The canvas save and restore methods are used to sav..

Canvas使用教程——样式与颜色应用(Applying styles and colors)

评论(0)浏览(79)分类:Canvas/VML/SVG
Canvas使用教程——样式与颜色应用(Applying styles and colors)原文:https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colorsIn the chapter about drawing shapes I used only the default line and fill styles. In this chapter we will explore all the canvas options we have at our disposal to make our drawings a little more attractive.ColorsUp until now we've only se..

Canvas使用教程——几何图形绘制(Drawing shapes)

评论(0)浏览(238)分类:Canvas/VML/SVG
Canvas使用教程——几何图形绘制(Drawing shapes)原文:http://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapesThe grid在我们开始绘制图形前,我们先探讨一下canvas中的网格及坐标空间。在前一篇教程中,我们定义了一个150*150的canvas区域,并在该区域绘制了一个图形。在canvas区域中,以左上角为坐标原点(0,0),坐标最小单位为1px。区域内所有元素相对与原点定位。不过在以后的实例..

Canvas使用教程——图片应用(Using images)

评论(0)浏览(116)分类:Canvas/VML/SVG
Canvas使用教程——图片应用(Using images)原文:https://developer.mozilla.org/en/Canvas_tutorial/Using_imagesCanvas另一大运用就是可以对图片进行二次创作或修改。貌似这个是目前唯一一个办法可以动态的往图片上加字的方法^o^。图片的格式可以是任意一种Gecko浏览器支持的格式,并且在同一页面上的其他canvas竟然也可以作为源来引用。Importing images图片的导入需要2个步骤:首先,..

Canvas使用教程——基本语法(Basic usage)

评论(0)浏览(151)分类:Canvas/VML/SVG
Canvas使用教程——基本语法(Basic usage)原文:http://developer.mozilla.org/en/Canvas_tutorial/Basic_usage好,现在开始我们的canvas探究之旅……canvas id="tutorial" width="150" height="150"/canvas乍看上去,该标签类似于img,不过它不支持src和alt属性,canvas标签仅仅支持2个属性:width和height。当宽度和高度没有指定时,他们的默认值为300px和150px。该元素可以象任何普通..

Canvas使用教程——开题(Canvas tutorial)

评论(0)浏览(115)分类:Canvas/VML/SVG
Canvas使用教程——开题(Canvas tutorial)原文:http://developer.mozilla.org/En/Canvas_tutorialcanvas是一个可以用JS脚本来作画的HTML标记,用它来可以做些简单的绘图、图片变换或者动画等等。canvas标记最早是被Mac OS X Dashboard及其后的Safari浏览器引入,如今,基于Geoko 1.8内核的浏览器,比如FireFox 1.5等也开始支持这个新的标签,并且是已制定的HTML5标准的标记之一。在以下..

【actionscript】字符串处理函数

评论(0)浏览(138)分类:flash/flex/fcs/AIR
【actionscript】字符串处理函数  字符串主要用来处理文本,也常常运用到变量名的变换中。目前最重要的运用应该是处理XML文本了。例如,XML文本中常常包含着一些不必要的空格,需要去掉。这就要用到trim去空格函数。 如,替换某段文字中的骂人话为其他的字 ,就要用到字符串替换函数 replace了。 如,查找用户提交的某段文字是否与以前重复,那么用beginWith就是一个高效的好..

在线编辑器的基本实现原理

评论(0)浏览(116)分类:JavaScript/Ajax开发技巧
在线编辑器的基本实现原理如今网站开发越来越提倡用户体验,为用户提供便利的工具也越来越多,而在线的HTML内容编辑器应该算是其中比较“古老”的一个了。功能简单的可以为用户提供文本的样式控制,例如文字的颜色、字体大小等;而功能复杂的甚至可以提供类似Word一样的强大功能。虽然现在各种开源的编辑器非常多,但是真正好用的并不多,所以它们改进工作也一直在进行中..

Javascript跨域和Ajax跨域解决方案

评论(0)浏览(189)分类:JavaScript/Ajax开发技巧
Javascript跨域和Ajax跨域解决方案最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题,但是放到二级域和其他域下浏览器直接就弹出提示框:“该页正在访问其控制范围之外的数据,这有些危险,是否继续"1.什么引起了ajax跨域不能的问题ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。2.有..

如何解决ajax跨域的问题

评论(0)浏览(179)分类:JavaScript/Ajax开发技巧
如何解决ajax跨域的问题解决ajax跨域的问题 ajax跨域调用的解决办法有很多种,我这里只说两种:假设s.cnblogs.com是一个评论系统,只提供javascript方式的调用。news.cnblogs.com是一个新闻系统,这个系统将评论功能委托给s.cnblogs.com。这时news.cnblogs.com发表评论的代码可能是:function sendData(data,callback){var xmlHttp=createXmlHttpRequest();xmlHttp.ope..

JavaScript操作XML (四)

评论(0)浏览(110)分类:JavaScript/Ajax开发技巧
JavaScript操作XML (四)上一篇介绍了JavaScript主要是通过什么方法来访问节点的。这一篇介绍JavaScript是如何操作节点的(包括增、删、改、查)。通过前面的介绍,我们知道XML文档中,主要是元素节点、属性节点和文本节点。下面详细介绍JavaScript是如何操作它们的。元素节点:查找:上一篇已介绍。主要是通过方法getElementsByTagName来查找定位。例子://输出所有的tit..

JavaScript操作XML(三)

评论(0)浏览(138)分类:JavaScript/Ajax开发技巧
JavaScript操作XML(三)上一篇介绍了XML如何加载到JavaScript解析器。这一篇介绍加载到解析器后,JavaScript是如何访问节点的。在详细介绍如何使用上面的方法前,我们先来了解下节点的主要属性。documentElement 属性:XML 文档的根节点。nodeName 属性:节点的名称(只读)。nodeValue 属性:节点的值。nodeType 属性:节点的类型。childNodes 属性:返回子节点集合。pa..

JavaScript操作XML(二)

评论(0)浏览(114)分类:JavaScript/Ajax开发技巧
JavaScript操作XML(二)上一篇介绍了XML的结构以及节点之间的关系这一篇介绍浏览器内建的XML解析器以及JavaScript是如何加载XML的。大多数浏览器都有读取和操作 XML 的内建 XML 解析器。解析器(XML Parser)把 XML 转换为 JavaScript 可访问的对象。解析器把 XML 载入内存,然后把它转换为可通过 JavaScript 访问的 XML DOM 对象。微软的 XML 解析器与其他浏览器中的解析..

JavaScript操作XML (一)

评论(0)浏览(166)分类:JavaScript/Ajax开发技巧
JavaScript操作XML (一)JavaScript操作XML是通过XML DOM来完成的。那么什么是XML DOM呢?XML DOM 是:用于 XML 的标准对象模型 用于 XML 的标准编程接口 中立于平台和语言 W3C 的标准 XML DOM 定义了所有XML 元素的对象和属性,以及访问它们的方法(接口)。也就是说:XML DOM 是用于查询、添加、修改、删除XML 元素的标准。 在继续之前,我们先来了解一下XML的定义。请..

javascript操作JSON

评论(0)浏览(147)分类:JavaScript/Ajax开发技巧
javascript操作JSONJSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称..

javascript日期常用函数

评论(0)浏览(104)分类:JavaScript/Ajax开发技巧
javascript日期常用函数+展开-JavaScript//判断是否是日期//note:不能准确判断闰年的2月日期,需用js另外处理functionisDate(str){varpatt=/^(((([1-9])|(0[1-9])|(1[012]))[-./]((0?\d)|([12]\d)|(3[01]))[-./](19|20)\d{2})|((19|20)\d{2}[-./](([1-9])|(0[1-9])|(1[012]))[-./]((0?\d)|([12]\d)|(3[01]))))$/;returnpatt.test(str);}//返回系统日期时间//参考http:/..

链接中的void(0)与#

评论(0)浏览(108)分类:JavaScript/Ajax开发技巧
链接中的void(0)与#Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。 void 操作符用法格式如下:1. javascript:void (expression)2. javascript:void expression如:a href="javascript:void(0)"单击此处看看效果/a //实际上相当于一个死链接。如:a href="javascript:void(document.form.submit())"单击此处提交表单/a //用户单击时会提..

javascript解析xml文件函数列表

评论(0)浏览(166)分类:JavaScript/Ajax开发技巧
javascript解析xml文件函数列表注意:区分大小属性:1Attributes 存储节点的属性列表(只读)2childNodes 存储节点的子节点列表(只读)3dataType 返回此节点的数据类型4Definition 以DTD或XML模式给出的节点的定义(只读)5Doctype 指定文档类型节点(只读)6documentElement 返回文档的根元素(可读写)7firstChild 返回当前节点的第一个子节点(只读)8Impl..

发一个支持iframe的无刷上传文件的ajax类库

评论(0)浏览(144)分类:JavaScript/Ajax开发技巧
发一个支持iframe的无刷上传文件的ajax类库在原来的ajax类库基础上添加了post方法,直接提交表单,而不需要手动收集要提交的键和值。并在此基础上判断enctype是否为"multipart/form-data"类型,如果是则表单提交到隐藏的iframe中实现无刷新上传文件。不过需要注意的是网站使用的编码为utf-8。+展开-JavaScriptvarShowbo={version:'1.0',author:'showbo',intro:'通用',homepage:'//'};//是..

Microsoft.AlphaImageLoader滤镜讲解

评论(0)浏览(322)分类:HTML/CSS兼容/XML
Microsoft.AlphaImageLoader滤镜讲解Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义。 IE5.5或以上版本开始支持 AlphaImageLoader。这个滤镜为IE特有。 基本语法及参数:filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled..

JavaScript 浮动定位提示效果

评论(0)浏览(93)分类:JavaScript/Ajax开发技巧
JavaScript 浮动定位提示效果本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧。 这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能用在更多的地方。效果预览.trigger{border:1px solid #003099; color:#003099; background:#e2e7ff; padding:10px; width:200px; height:100..

JavaScript Table行定位效果

评论(0)浏览(113)分类:JavaScript/Ajax开发技巧
JavaScript Table行定位效果近来有客户要求用table显示一大串数据,由于滚动后就看不到表头,很不方便,所以想到这个效果。上次做table排序对table有了一些了解,这次更是深入了解了一番,发现table原来是这么不简单。还不清楚这个效果叫什么,有点像表头固定的效果,就叫行定位吧,本来想把列定位也做出来,但暂时还没这个需求,等以后有时间再弄吧。在淘宝的商品搜索页也..

JavaScript 颜色梯度和渐变效果

评论(0)浏览(115)分类:JavaScript/Ajax开发技巧
JavaScript 颜色梯度和渐变效果序二(09/11/1)近来看了Dean的“Convert any colour value to hex in MSIE”,终于解决了根据关键字获取颜色rgb值的问题。顺便把程序也重新整理一番,并使用了最近整理的工具库。序一(09/03/11)很久没写blog,太忙了。没什么时间写复杂的东西,重新把颜色渐变效果写一遍。关于颜色的效果一般就两个,颜色梯度变化和颜色动态渐变,前者在ie中一..

JavaScript Tween算法及缓动效果

评论(0)浏览(105)分类:JavaScript/Ajax开发技巧
JavaScript Tween算法及缓动效果Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动、弹簧等等。我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果。实例效果Tween类型: Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce ease类型: easeIn easeOut..

JavaScript 滑动条效果

评论(0)浏览(103)分类:JavaScript/Ajax开发技巧
JavaScript 滑动条效果这个滑动条(拖动条)效果,一开始是参考了BlueDestiny的slider和Apple产品展示的样式,做了程序的原型。在做了拖放效果之后,我想应该可以做一个更好的了,所以重做一遍,完善和扩展了一些功能。碍于时间没有做得很强大,都是一些基本功能,希望各位多提意见!效果预览预览效果1:这个是仿Apple滑动条产品展示效果。除了原来的效果(包括点击缓..

JavaScript 拖拉缩放效果

评论(0)浏览(89)分类:JavaScript/Ajax开发技巧
JavaScript 拖拉缩放效果拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如选框效果。这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放。跟拖放效果一样,程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多,基本上靠自己摸索,走了不少弯路,现在总算把自己想要的效..

JavaScript Table排序

评论(0)浏览(126)分类:JavaScript/Ajax开发技巧
JavaScript Table排序近来还是那么忙,趁五一更新一下程序吧。这个版本主要增加和改进了以下东西:1,对字符串改用localeCompare来比较;2,一次排序中能使用多个排序对象(用于值相等时再排序);3,修正一些发现的问题;4,改进程序结构,个人觉得是更灵活更方便了;5,增加bool类型比较;6,添加attribute/property的内容;7,修正ie6/7的radio/checkbox状态恢复b..

仿163网盘无刷新多文件上传系统

评论(0)浏览(128)分类:JavaScript/Ajax开发技巧
仿163网盘无刷新多文件上传系统这个仿163网盘无刷新文件上传系统,并没有用使用.net的控件,完全的手工制作。前台基本上是静态的,跟后台没有关系,所以后台用什么语言做都可以(后面有各个版本的实例下载)。本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为..

简便无刷新文件上传系统

评论(0)浏览(138)分类:JavaScript/Ajax开发技巧
简便无刷新文件上传系统之前写过一个仿163网盘无刷新多文件上传系统,已经对无刷新上传文件的原理做了详细的分析。而这次的系统主要是针对单个file控件的,便携版,使用更简单,还有更深入的分析。ps:flash实现的效果是好得多,但这不是我研究的范围,也没什么可比性。兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.012月2号是我女朋友的生日,..

JavaScript 图片预览效果

评论(0)浏览(162)分类:JavaScript/Ajax开发技巧
JavaScript 图片预览效果随着浏览器安全性的提高,要实现图片预览也越来越困难。不过群众的智慧是无限的,网上也有很多变通或先进的方法来实现。在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。兼容:ie6/7/8, firefox 3.5.5后台支持下还兼容:opera 10.10, safari 4.0.4, c..