GNULife.CN

coin-slider比我之前介绍的innerfade和sochange都要好：

1. 插件很小
2. 效果更丰富，更酷
3. xhtml结构更简单，会自动生成导航链接的xhtml代码

但它默认的外观有两点我不满意，一个是prev和next按钮很丑，另一个是导航链接放在图片外部下方，有浪费空间之闲，修改方法如下：

1. 打开coin-slider.js，找到235行，删除prev和next文本显示。
2. 注释第286行：/*            $(“#cs-buttons-”+el.id).css({
   ‘left’            : ’50%’,
   ‘margin-left’     : -images[el.id].length*15/2-5,
   ‘position’        : ‘relative’

   });
   */

3. 打开coin-slider-style.css，在.coin-slider中加上margin-bottom: 10px。在cs-buttons中加上position: absolute; right: 10px; bottom: 10px;。在.cs-buttons a中修改height和width为20px;

jquery, XHTML+CSS

一、选择jquery

1. 原始的javascript一般是尽可能不写的，因为怕引起浏览器兼容问题，而且代码相对较为繁杂
2. 在众多javascript中选择jquery，最重要的是因为css定位的语法，可以让熟悉css的我对jquery快速上手
3. jquery核心够小，功能够强，有大量功能丰富的插件，当然对浏览器不存在兼容问题

二、我用jquery做什么，其实最常用的就是替代flash完全各种外观很炫的动态效果

1. 做很酷的菜单效果，用superfish插件，支持多级菜单的定义，横排、竖排、ie6兼容均可，外观还可以通过修改css自定义
2. 图片幻灯片轮播效果，用innerfade，当然这是一个较早的插件，现在有很多新的插件可以实现类似或者更强大的效果，比如switchable、sochange
3. 图片剪裁，用Jcrop，跟很多网站上用flash做的效果基本一样
4. 图片滚动，用jcarousellite
5. 图片放大镜，用cloud-zoom

jquery

工具&Web应用

13个可能会让你说”Thank You”的必不可少的开源应用

14个免费工具让你了解为什么人们会放弃访问你的网站

40+CSS生成器

74个我们可能已经忘记的适合网页设计师的很棒的Web应用

50+能提高你的网站速度和性能的技巧和资源

15个可以监视网站人气的工具 阅读全文…

jquery, XHTML+CSS

问题的引出:当图片宽度小于容器宽度时,一般希望将图片显示其中比较适合,这时只要在容器css中写明text-align:center;即可,但采用jquery的innerfade时(我采用的是2008-02-14版本的jquery.innerfade.js),会发现图片跑位,无法居中.

解决思路:问题由innerfade的bug引起,找到第62行,将

$(elements[i]).css(‘z-index’, String(elements.length-i)).css(‘position’, ‘absolute’).hide();

改为

$(elements[i]).css(‘z-index’, String(elements.length-i)).css(‘position’, ‘relative’).hide();

这时animationtype:    ‘slide’,效果正常,但animationtype:    ‘fade’,效果不好,动画时图片下方会闪过一张图片.目前没有找到更好的解决方法,若哪位朋友能帮忙解决,不胜感激.

注:该bug已提交给jquery.innerfade作者,还未得到回复.

jquery innerfade, 淡入淡出

其实要解决Javascript在各浏览器兼容性的问题非常简单,就是尽可能少写原生的Javascript程序,尽可能采用类似Jquery的框架来实现想要的效果.以下内容仅做学习之用,知其所以然才能更好的解决问题. 阅读全文…

jquery firefox, ie, javascript

1. CSS圆角效果:http://www.atblabs.com/jquery.corners.html     http://www.curvycorners.net/examples.php
2. 上传图片并生成缩略图:http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/
3. 图片放大镜:http://www.curvycorners.net/examples.php
4. TreeView:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
5. webeditor:http://www.avidansoft.com/dsrte/index.php

还有一个不是jquery的相框效果:http://www.netzgesta.de/instant/ ,看demo非常酷而且实用,没有找到jquery类似的东西.

jquery