`
文章列表
    今天刚试过chrome的drag and drop API,它能非常简单的将本地的图片放到浏览器中进行预览。试想一下当我们把一个文图片拖拽到浏览器里会发生什么事情,你的浏览器试图打开一个新的页面并加载这个图片。现在我不想浏览器这样帮我处理图片,我希望我拖拽的图片能立即放到我预先规定的位置并迅速回显,这就需要javascript中event对象的两个函数stopPropergation()和preventDefault()。前者将会阻止事件的冒泡,后者会阻止浏览器默认的行为。 这里我们定义一个ignoreDrag函数,用以实现上述功能: var ignoreDrag = functio ...
   今天在浏览网站时发现了一个很奇妙的实现,于是就看了下页面的源码,发现页面中引入了一个很奇怪的URL(data:image/jpeg;base64,/9j/4QecRXhpZgAATU0AKgAAAAgABwESAAMA...),在chrome浏览器的network下看了下,确实发了一个这样的请求,但是没有指定ip,没有请求头,没有响应头,只有一大串字符串,请求会发去哪里呢?好奇的在google上搜了下,原来这是一种data类型的URL格式,可以把小数据直接嵌入到URL中,浏览器会自动解析data:后面的数据。 例如:在浏览器的地址栏中输入 data:text/html,<html ...
jQuery越来越流行了,大家可能也会发现,在浏览网站过程中,越来越多的网站开始使用jQuery来构建以前需要使用flash来实现的超酷动态效果,事实上jQuery已经成为前端开发中重要的类库之一,发挥着构建丰富web前端的利器。但是作为一个JS类库,很多人并不是非常清楚如何正确使用jQuery来达到最佳的性能(Peformacne),如果你觉得代码书写对于性能的影响不会那么巨大,那么我只能告诉你,当你使用jQuery开发一个复杂的动画和web应用的话,它有可能成为你性能上的终极噩梦。 在这篇文章中,我们将介绍代码书写中,大家应该需要注意的几个性能问题,希望对于大家在书写高性能的web应用中有 ...
   javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域      基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下: 页面一: <html> &l ...
jquery提供了一些自定义全局函数,能够为各种与ajax相关的事件注册回调函数。例如当ajax请求开始时,会触发ajaxStart()方法的回调函数,当ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法是全局的方法,无论创建他们的代码放在何处,只要有ajax执行,他们都会执行。 可以通过如下方法取消与全局方法的关联: $.ajax({ url:"test.html", global:false });

SVG学习笔记

    博客分类:
  • svg
[size=medium]什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 与其他图像格式相比,使用 SVG 的优势在于: SVG 可被非常多的工具读取和修改(比如记事本) SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG ...
  图片上传及文件上传,前端html实现文件上传和普通的向后台传参数不同,必须用到form表单,同时form标签必须加上enctype="multipart/form-data"属性,method必须为post,表单中的input的type为file,这样前端上传文件的工作就完成了,这里后台文件的存储不做详细的介绍,因为用到的是struts2,文件上传的功能已经封装好了,但是还是需要注意几点,action中类型为File的属性名必须和input标签的name相同,同时action中必须有contentType和fileName属性,这里不是本文讲的重点就不做详细介绍了。   ...
[size=medium]response.setContentType("application/octet-stream"); String docBasePath = request.getSession().getServletContext().getRealPath("/").replace("/", File.separator).replace("\\", File.separator); docBasePath = docBasePath.substring(0,doc ...
2.4版本的servlet规范在部属描述符中新增加了一个<dispatcher>元素,这个元素有四个可能的值:即REQUEST,FORWARD,INCLUDE和ERROR,可以在一个<filter-mapping>元素中加入任意数目的<dispatcher>,使得filter将会作用于直接从客户端过来的request,通过forward过来的request,通过include过来的request和通过<error-page>过来的request。如果没有指定任何< dispatcher >元素,默认值是REQUEST。可以通过下面几个例 ...
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <gro ...
基于css3的transform实现淘宝首页淘工图像的自由摇摆,不过没有淘宝首页那么逼真,我只是简单的按照匀速摇摆,但是现实情况摇摆速度和角度有关,这就需要一些物理公式进行处理,这里只是简单的写了个demo,没有物理公式的计算,目前demo只支持webkit内核的浏览器,如chrome,safari。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...

css3实现转动

转 http://www.douban.com/note/174398555/ 目前越来越多的浏览器兼容CSS3标准了,就连IE浏览器老大哥也开始向CSS3低头,微软宣布IE9浏览器支持更多的CSS3属性,IE9更注重HTML5标准。不过CSS3里有一个使对象旋转的属性transform rotate,号称兼容CSS3的浏览器对它的支持也不算好,好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE浏览器里对这个transform属性无法通过一般的CSS写法去实现。   在W3C官方的标准里,通过transform属性使对象旋转的写法如 ...
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
    在学习Struts2标签测试的过程中,发现不通过action,直接访问jsp会报错,上网查了下,有人说这是Struts2的bug,但我不这么认为,报错是有道理的,原因很简单,当我们在jsp页面用Struts标签显示时,基本都用ognl表达式从value stack或stack context中获取数据,这里面的很多数据都是通过访问action,初始化action中的数据而成的,当我们直接访问jsp,而不是通过action转发到jsp时,很多数据都没有进行初始化,这样做就失去了用struts标签的意义,报错是很正常的,为了防止直接访问jsp页面,通常我们的做法是隐藏jsp页面,强制只有通过 ...
filter的url-pattern为/*.action报错,原因是 容器只认 全名匹配,路径匹配,扩展名匹配. /*.action 又是路径匹配,有时扩展名匹配. 容器没办法区分,所以要写成*.action
Global site tag (gtag.js) - Google Analytics