文章关键字 ‘javascript’

jQuery之图片关联伸缩效果

2009年08月31日,星期一

这里要介绍的这个效果又称为手风琴效果。用css就可以实现类似的效果,但是使用css只是单纯地将宽度变大和缩小,而使用jQuery可以实现流畅的动画效果,体验会更加不错的!而实现的关键就是animate这个很神奇很伟大很实用的动画函数。
主要的不是讲解animate这个函数,我jQuery,js研究不深,讲了只会被人笑。所以这里只是展示下效果而已,希望能对您有所帮助!

阅读全文…

jquery之图片左右切换动画效果

2009年08月31日,星期一

我很喜欢jQuery,因为我发现只要我对css的了解的足够深入,即使我JavaScript不是很在行,一样能做出些不错的动画效果。这里所要展示的是很常见的一种JavaScript特效,在很多地方可以见到,新浪音乐首页就有这种类似的效果。原理是一样的,具体实现可能有差异,如果纯粹的JavaScript写,我估计要整好一会儿,但是使用jQuery,实现这类动画效果就像是踩棉花一样——松松的。
在本实例中,具体描述这个效果就是,您单击上面的小图,下面的大图就会迅速切换到对应的大图,而这个来回移动的效果是很酷的。
提供实例效果演示页面,提供源文件打包下载,希望对您有所帮助。

阅读全文…

jQuery之replace字符串替换实现不同尺寸图片切换

2009年08月30日,星期日

学习是需要积累的,即使是一个函数,只要肯想,会实现不少好的效果的。这里,就是活用了一个replace字符串替换实现了大小图片切换的效果。
实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小(font-size)控制图片尺寸的做法是跟Google学习的,但是jQuery代码是根据效果自己想出来的,逻辑很简单,没有什么精妙之处。核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。
这里重要的其实是图片大小切换效果,里面所蕴含的前端知识还是很多的,可以说将Google的picasa相册图片大小切换实现给提炼简化出来了。
提供实例页面和源文件打包下载,希望能对您有所帮助。

阅读全文…

jQuery-单击文字或图片内容放大显示效果插件

2009年08月30日,星期日

css很强大,jQuery也很强大,两者结合在一起就是无比强大。
这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物。
支持文字,图片,flash动画,视频,复杂div的居中放大显示,而且含有自适应内容大小的圆角投影效果。
本文提供简单的使用讲解,实例页面,以及文件的打包下载,希望对您有所帮助。

阅读全文…

jQuery-很酷的弹出层效果js插件

2009年08月30日,星期日

告别生硬的系统自带的弹出提示效果,享受前端技术带来的炫酷的视觉效果和舒适的交互体验。这里向您推荐一款不错的弹出层插件,可以放置文字,图片,flash以及复杂的div层,支持定时弹出层消失,用做提示再好不过了。您不妨也来体验一下。

阅读全文…

IE6下png背景不透明问题的综合拓展

2009年08月22日,星期六

IE6不支持png背景透明或半透明。其解决方法有IE滤镜,纯粹的JavaScript,以及jQuery等,正所谓事非经过不知难,让png图片在IE6下背景透明显示只是第一步,如果对这些png图片做进一步的操作,往往会出现各类莫名的问题,例如无法响应单击事件,图片大小控制失效,无法实现background-position的定位等。本篇文章讲详尽阐述png背景透明会出现这些问题的原因,以及对每一个问题提供相应的解决方法,每个对应的方法提供相应的demo实例页面。在问题的探讨过程中会尽可能的分享我的一些经验。文章内容较多,涉及css, javascript, jQuery, flash, ActionScript, flash通信, photoshop图片处理等,有一定的深度和广度,希望对大家有帮助。

阅读全文…