拖拽,按等比例放大,缩小,任意修改图片大小

评论(1)浏览(374)分类:JavaScript/Ajax开发技巧
拖拽,按等比例放大,缩小,任意修改图片大小  在页面上实现图片拖拽并可以随意调整图片大小。 但如果按住Ctrl键之后,当再调整图片大小的时候需要按照比例进行调整。  示例效果点击这里查看+展开-HTMLhtmlheadmetahttp-equiv="content-type"content="text/html;charset=gb2312;"/title拖拽,按等比例放大,缩小,任意修改图片大小/titlemetaname="Keywords"content="图片拖拽,图片扥等..

JavaScript记录表单用户名和密码

评论(0)浏览(373)分类:JavaScript/Ajax开发技巧
JavaScript记录表单用户名和密码  用javascript记录用户输入的用户名和密码功能示例代码,这样用户下次访问页面时,不需要输入用户名和密码,可以直接提交表单验证用户登录信息。  javascript记录用户输入的用户名和密码的实现原理,就是用cookie记录住用户名和密码即可。示例代码如下titleJavaScript记录表单用户名和密码/titleform method=get onsubmit=return check(thi..

javascript replace函数$&

评论(0)浏览(372)分类:JavaScript/Ajax开发技巧
javascript replace函数$&  今天发现自己写的高亮函数代码出现问题,有一些内容没有替换掉,显示为原来的内容,认真看了一下replace函数,发现自己完全没理解透replace函数中替换内容特殊字符$的用途,导致代码出现bug。  原来的代码要替换__JS0__这个内容为nbsp;$nbsp;,执行替换后发现不是nbsp;$nbsp;,而是变成了nbsp;__JS0__nbsp;,原因是$代表的是与 regexp 相匹..

javascript获取查询参数键值对

评论(0)浏览(370)分类:JavaScript/Ajax开发技巧
javascript获取查询参数键值对  javascript将get提交的查询参数对初始化为hashtable。  注意:下面的代码中键名称只能是数字和字母的组合,如果不是数字和字母注意修改正正则表达式。+展开-JavaScriptvars=location.search;//查询参数字符串varRequest={};//初始化Request对象functionInitRequest(){varm,reg=/([a-z\d]+)=([^&]+)/gi;s=s==''?'':s.substring(1);while(m=..

canvas的translate、scale、rotate方法介绍

评论(0)浏览(369)分类:HTML/CSS兼容/XML
canvas的translate、scale、rotate方法介绍1.translate(x,y):平移,将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0). 例子:画布原点假如落在(1,1),那么translate(10,10)就是在原点(1,1)基础上分别在x轴、y轴移动10,则原点变为(11,11)。2.scale(x,y):扩大。x为水平方向的放大倍数,y为竖直方向的放大倍数。3.rotate(angel):旋转.angle指旋..

js获取容器innerHTML得到输入控件值

评论(0)浏览(369)分类:JavaScript/Ajax开发技巧
js获取容器innerHTML得到输入控件值  如果输入控件放在容器里面,当然输入控件输入值后,获取容器的innerHTML时,标准浏览器如firefox,chrome时,innerHTML中input的html代码value属性是没有的,也没有包含输入的值。同理checkbox,radio,textarea也没有对应的值和checked属性,示例代码如下script src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js/scriptdiv ..

JavaScript调用百度地图显示驾车,步行导航示例

评论(0)浏览(369)分类:JavaScript/Ajax开发技巧
JavaScript调用百度地图显示驾车,步行导航示例  JavaScript调用百度地图显示驾车,步行导航示例JavaScript调用百度地图显示驾车,步行导航示例源代码如下htmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=viewport content=initial-scale=1.0, user-scalable=no / style type=text/cssbody, html {width: 100%;height: 100%; margin:0;font-f..

js判断已经滚动到页面底部

评论(0)浏览(367)分类:JavaScript/Ajax开发技巧
js判断已经滚动到页面底部  js如何判断页面已经滚动到底部!DOCTYPE htmlhtmlhead meta charset=UTF-8 titlejs判断已经滚动到页面底部/title/headbody style=margin:0;padding:0 div id=dvBT style=position:fixed;bottom:0;right:0;background:#fff/div div id=part1 style=height:2000px;overflow: auto;background: lightblue; /div div id=part2 ..

修改kindeditor编辑器默认显示行高

评论(0)浏览(366)分类:JavaScript/Ajax开发技巧
修改kindeditor编辑器默认显示行高  如何修改kindeditor编辑器显示框里面内容的默认行高。  通过上图知道kindeditor编辑器的输入容器(body)有ke-content样式,但是编辑器iframe并没有定义ke-content样式,所以只需要加上ke-content样式定义下line-height就行了。  记事本打开kindeditor-min.js或者kindeditor-all-min.js,如果导入的未压缩的自己记事本打开对应的js文件即..

如何实现上传拖拽进入浏览器的文件

评论(0)浏览(366)分类:HTML/CSS兼容/XML
如何实现上传拖拽进入浏览器的文件  通过HTML5的文件API ,Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件进入浏览器,并上传到服务器。  让我们看一下Firefox 是如何使用拖拽上传功能的:  1)首先提供一个区域来放置文件div name=image id=dropbox style=min-width:300px;min-height:100px;border:3px dashed silver;/div2)然后监听拖拽过程中的dragenter、d..

精简版jquery lazyload实现真正的延时图片加载

评论(0)浏览(366)分类:JavaScript/Ajax开发技巧
精简版jquery lazyload实现真正的延时图片加载  本次修改基于jquery.lazyload.js 1.5版本,删除了一些配置项,只保留了effect和placeholder配置,并且指定容器为window。  使用注意事项1)要实现真正的延时加载,将图片的src设置为默认的替换图片,实际的图片地址存储到自定义属性original如img src='替换的图片地址,1px_1px' original='实际图片地址'/2)如果没有按照..

FireFox下端口不一致导致跨域

评论(0)浏览(365)分类:JavaScript/Ajax开发技巧
FireFox下端口不一致导致跨域  在Firefox下,如果url路径带有端口号,而ajax对象访问的路径为绝对路径并且端口号不一样时,会出现uncaught exception: (1? XMLHttpRequest.open ?CP 3的错误,这个是因为端口号不一致时导致出现的跨域错误。而IE下不会因为请求的端口号不一致出现跨域的问题。  其实出现端口号不一致的错误实在是微乎其微,有谁会一个网站开放两个端口号..

JavaScript apply与call的用法意义及区别

评论(0)浏览(363)分类:JavaScript/Ajax开发技巧
JavaScript apply与call的用法意义及区别JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。先来看看JS手册中对call的解释:call 方法调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1, arg2,, argN可选项。将被传递方法参数序列。说明call 方法可以用来代替另一个..

jquery焦点图代码,幻灯过渡特效,仿IE特效滤镜

评论(1)浏览(362)分类:JavaScript/Ajax开发技巧
jquery焦点图代码,幻灯过渡特效,仿IE特效滤镜  一款居于jquery框架的焦点图插件,有幻灯片过渡效果,模拟IE滤镜,完全兼容firefox,chrome浏览器,不需要使用IE下的滤镜。原理依据spw/sph的配置,在容器上生成spw*sph个块(宽和高依据容器计算得出),这些块的背景设置为下一张要显示的图片,依靠background-position控制每个块显示下一张图片的某个区域,让这些块组合起来显示为下一张图..

FCKEditor换行br后的全角或者半角空格丢失解决办法

评论(0)浏览(361)分类:JavaScript/Ajax开发技巧
FCKEditor换行br后的全角或者半角空格丢失解决办法  今天使用FCKEditor编辑器时,从记事本中复制内容到FCKEditor编辑器中,然后在开始的文字前面打入2个全角的空格进行缩进,提交后发现除了第一个段落的全角空格保存之外,其他的段落的全角空格全部没有了。  经测试后发现,FCKEditor在W3C浏览器,如firefox,chrome,紧跟在br/换行后的全角或者半角空格在提交的时候,不知道被FCKEditor给做..

多张图片热点如何添加

评论(0)浏览(361)分类:HTML/CSS兼容/XML
多张图片热点如何添加  由于图片的热点一般都是写死在HTML源代码里面了,所以如果有多张独立的图片需要增加热点,而且需要根据条件显示或者隐藏其中的某些图片时,这样图 片的位置就会发生变动,从而导致添加的热点对不上原图片的位置而导致失效或者乱套了。下面为1张图片拆分成4张进行热点操作。  实现要点:图片要有position为relative的容器,添加的热点就会变..

javascript计算器

评论(0)浏览(361)分类:JavaScript/Ajax开发技巧
javascript计算器  JavaScript实现的简单计算器功能,界面如下  javascript计算器源代码如下script type=text/javascript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js/scriptstyle #calc{padding:10px;background:#f1f1f1;width:201px} #display{border:solid 1px #ccc;margin-bottom:5px;padding:5px} #up,#down{height:20px;..

css控制不允许操作iframe内容

评论(0)浏览(359)分类:HTML/CSS兼容/XML
css控制不允许操作iframe内容  css如何禁止用户操作iframe的内容(iframe加载的可能是跨域的页面),如选择iframe里面的内容。  解决办法就是用一个透明的层遮盖在iframe上方,这样就无法操作底层的iframe了。  测试代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitlecss控制不允许..

·在html页面中显示乱码解决办法

评论(0)浏览(357)分类:HTML/CSS兼容/XML
·在html页面中显示乱码解决办法  今天修改一个客户网站,发现中文符号点,就是键盘上Esc键下那个中文点号,在一些系统的浏览器上显示一个框框,为乱码,但是在本人电脑上却可以正常显示为中文点号,其他电脑也正常显示,就公司里面有2台电脑是这个问题(这2台电脑其他浏览器打开也是一个框框乱码,如下图所示)。  检查后发现这些内容字体为Microsoft Yahei,Arial,Helveti..

12.3.插入特殊的空格字符

评论(0)浏览(356)分类:flash/flex/fcs/AIR
12.3.插入特殊的空格字符问题我想在字符串中添加空格字符,比如制表符或新行字符解决办法使用特殊字符的转义序列讨论下面的表格列出了五种空格字符的转义字符。可以在字符串里用这些转义序列,这在文本框中显示文本是很有用的:+展开-ActionScriptvarexample:String="these\twords\tare\tseparated\tby\ttabs";//结果为:thesewordsareseparatedbytabs空格字符 ..

svg+js+path直线的拖动与缩放

评论(0)浏览(353)分类:Canvas/VML/SVG
svg+js+path直线的拖动与缩放svg width="800" height="800" script![CDATA[ var SVGDocument = null; var SVGRoot = null; var TrueCoords = null; var Point = null; var BackDrop = null; var DragTarget = null; var dArray = new Array(12);//定义path d属性的数组 var dragger = null; var x; //当前鼠标(坐标) var y; var X1;//起点坐标 var Y1; var XL1;//path L..

canvas对象drawImage方法

评论(0)浏览(353)分类:HTML/CSS兼容/XML
canvas对象drawImage方法  canvas对象drawImage方法是canvas导入图片的一种方法,他有三种重载形式:drawImage(image,x,y)drawImage(image,x,y,width,height):伸缩drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight):剪切伸缩  其中第一个参数image可以是page中的img元素,也可以是其他canvas元素,base64编码的URL或vide..

window.onerror自定义错误处理事件参数详解

评论(0)浏览(350)分类:JavaScript/Ajax开发技巧
window.onerror自定义错误处理事件参数详解  window.onerror用于处理JavaScript脚本发生错误时如何处理错误,return false或者未添加window.onerror事件时会挂起代码执行,添加了事件后,return true则继续执行其他代码,忽略脚本错误。  有3个参数,参数循序如下window.onerror = function(sMessage,sUrl,sLine){};onerror函数的三个参数用于确定错误确切的信息,代表的意思依次为:..

选中网页内容弹出按钮点击发送选中内容到服务器

评论(1)浏览(349)分类:JavaScript/Ajax开发技巧
选中网页内容弹出按钮点击发送选中内容到服务器  效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。  实现方法:用javascript添加document.onmouseup事件,用range API判断是否选中内容,选中内容则弹出按钮,给按钮绑定点击事件,点击后将选中的内容使用ajax发送到服务器端。  选中网页内容弹出按钮点击发送选中内容到服务器源代码如下script ..

Selection.rangeCount属性

评论(0)浏览(347)分类:JavaScript/Ajax开发技巧
Selection.rangeCount属性Selection.rangeCount简介返回selection中range对象个数使用语法sel.rangeCount备注在用户点击一个新加载的页面前,rangeCount为0。用户可能一次只选择了一个range,所以rangeCount为1,一般也为1。但是通过脚本代码,可以让一个selection包含多个range。如Selection.addRange方法。来源:https://developer.mozilla.org/en-US/docs/Web/API/Sel..

javascript设计模式1

评论(0)浏览(347)分类:JavaScript/Ajax开发技巧
javascript设计模式1  设计模式,不得不先重点着墨于“接口设计”,因为接口设计在设计模式中的意义太大了,大于模式本身。直观起见,先介绍一下接口定义的形式:+展开-JavaScriptvarinterface=newInterface("interface",[["getName",1],["getAge",1]]);  可以看出接口函数必须包含两个参数,接口方法定义在一个二维数组中。上例中定义了两个接口方法:getName,..

js文字查询条件选择查询效果

评论(0)浏览(347)分类:JavaScript/Ajax开发技巧
js文字查询条件选择查询效果  js实现类似京东的查询条件选择效果。titlejs实现类似京东的查询条件选择效果/titlestyle div.condition{border:solid 1px #eee;} div.condition a{margin-right:10px} div.condition a.selected,div.condition a:hover{background:#0094ff;color:#fff;}/stylescript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.j..

javascript精确到毫秒的计时器

评论(0)浏览(344)分类:JavaScript/Ajax开发技巧
javascript精确到毫秒的计时器  发一个javascript写的精确到毫秒的计时器,可以定义delay时间,最大计量单位为小时script var maxtime = 1 * 60 * 60 * 1000//一个小时,按毫秒计算,自己调整! ,tmp,delay=11 //建议delay不要小于10ms,要不执行计算和设置innerHTML耗费的事件就不止1ms了 function CountDown() { if (maxtime = 0) { hours = ..

input输入内容回车生成标签代码

评论(0)浏览(344)分类:JavaScript/Ajax开发技巧
input输入内容回车生成标签代码  在input文本框中输入标签内容后,回车创建标准效果。style#tag a{margin-right:10px;color:blue;border:dotted 1px blue;cursor:pointer}/stylespan id=tag/spaninput type=text onkeydown=addTag(event,this) /script type=text/javascript function addTag(e, o) { if (e.keyCode == 13 o.value != '') { v..

ajax+php+mssql无刷新聊天室

评论(2)浏览(344)分类:JavaScript/Ajax开发技巧
ajax+php+mssql无刷新聊天室此为php版本的无刷新聊天程序源代码,js类库及说明请看下面asp.net版本的,下面只列出php版本的代码此例子也可以作为mssql存储过程使用的示例,如php调用mssql的存储过程,php获取mssql数据库的输出参数。asp.net版本请看ajax无刷新聊天室--asp.netaspajax无刷新聊天室--aspop.php+展开 -PHP$db="chatdb";$uid="sa";$pwd="";$server=".";classaj..