Category Archives: Javascript

[转]基于jQuery UI的图片截取功能

Posted on 2009年08月4日 by Bell

基于jQuery UI的图片截取(圈人)功能 现在的SNS网站相册都拥有圈人的功能，也就是在图片上指定的地方画一个框，然后指定该框里是谁。这和裁剪图片的原理是一样的。也就是拖拽功能和resize功能合理的配合。由于jQuery UI 里这两个功能都有比较好的实现，而且效率很不错，所以，我就用jQuery UI 整合实现了一个。 1.准备工作 该功能既然基于jQuery UI 功能，当然需要引入相关的js组件。 在这里使用的是 jQuery-1.3.3 、 jQuery UI 1.7.1中的ui.core.js、ui.dragdrop.js、ui.resize.js 2.DOM结构与样式的编写 上图所示，虚线框和8个小的拖拽按钮如何实现？我采用的是绝对定位的方式。虚线由于有一点动画效果，我用一个小的gif图片来实现的，这里要注意的是，由于使用的是jQuery UI 的组件来实现，在resize 组件中，resize拖拽的按钮的DOM结构已经固定写在了JS里面，所以，只能在依照其规则来写。具体的DOM结构如下：

Posted in jQuery1 views | Leave a comment

一款css和js压缩工具[附JAVA环境配置方法]

Posted on 2009年07月28日 by Bell

[2011.3.8更新] 很多朋友遇到压缩编码的问题，那就是压缩的css和js文件编码必须是GB2312,GBK或GB18030，如果是UTF-8则会出乱码，其实解决方法在文档中就有提到，就是将compressor.cmd中将GB18030替换为UTF-8。 压缩css和js是我们工作中经常要处理的一件事,这里介绍的是一款基于YUICompressor,淘宝封装的css和js压缩工具TBCompressor. TBCompressor的安装很简单,点击install.cmd就可以了,安装后会在里的右键菜单里出现”Compress CSS or JS”选项,需要压缩文件时只需选取目标文件然后右键点选”Compress CSS or JS”即刻.压缩后的文件会自动重命名. 这里对jQuery1.3 Development版进行压缩测试,效果如下: 可以看到效果还是非常不错的:)

Posted in HTML & CSS, Javascript1 views | Tagged , | Leave a comment

使用jQuery制作web拼图游戏[jqPuzzle插件]

Posted on 2009年07月24日 by Bell

这里介绍的是一款名为jqPuzzle的插件,通过它我们只需要简单的几步就可以制作出自己的web拼图游戏. 看看DEMO 实现起来也很简单

Posted in Javascript, jQuery1 views | 2 Comments

imgPrewiew – jQuery plugin

Posted on 2009年03月11日 by Bell

    imgPrewiew 是一个基于jQuery的图片预览插件,它能让你不点击链接的情况下预览图片,而且可以为域名链接增加预览图         demo

Posted in jQuery1 views | Leave a comment

jQuery打造个性有序列表

Posted on 2009年02月11日 by Bell

当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为除了符合语义外其默认样式就有序号标识,这样就免去了我们手动添加的麻烦,但由于浏览器兼容性问题(尤其是IE…)使它的实用性大打折扣,所以要实现有序列表更多的时候是用程序来解决,但通过jQuery我们完全可以在不改变现有结构的情况下打造一个个性化的有序列表. 先来看Demo 实现起来也很简单,看看第一个例子,首先是载入javascript代码 <script type=“text/javascript” src=“js/jquery-1.3.js”></script> <script type=“text/javascript”> $(document).ready(function(){ $(“#step li”).each(function (i) { i = i+1; $(this).addClass(“item”+i); }); </script>

Posted in HTML & CSS, jQuery1 views | 4 Comments
Pages: Prev 1 2 3 4 Next