学习是需要积累的,即使是一个函数,只要肯想,会实现不少好的效果的。这里,就是活用了一个replace字符串替换实现了大小图片切换的效果。
实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小(font-size)控制图片尺寸的做法是跟Google学习的,但是jQuery代码是根据效果自己想出来的,逻辑很简单,没有什么精妙之处。核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。
这里重要的其实是图片大小切换效果,里面所蕴含的前端知识还是很多的,可以说将Google的picasa相册图片大小切换实现给提炼简化出来了。
提供实例页面和源文件打包下载,希望能对您有所帮助。
“JS相关”目录存档
jQuery之replace字符串替换实现不同尺寸图片切换
2009年08月30日,星期日jQuery-实现图片的放大镜显示效果
2009年08月30日,星期日网上购物日趋流行,商品的图片很重要,一个页面上信息量很大,商品图片必然大小有限,很流行的做法是放在图片上,图片放大显示,例如:淘宝。
然而,淘宝的商品图片放大只是单纯的放大,如果能够实现移动放大,局部放大,那么效果会更上一层楼。这里,即将展示的就是类似于放大镜效果的图片局部放大效果。
提供实例页面和源文件打包下载。希望对您有所帮助。
jQuery-单击文字或图片内容放大显示效果插件
2009年08月30日,星期日reflection.js-实现图片投影倒影效果js插件
2009年08月30日,星期日如果您使用过igoogle的话,可能注意到其“谷歌图片集锦”模块的底部图片都是有投影效果的。
要实现这种图片投影效果,需要用到一个HTML5中使用的标签,canvas标签。
如果您对canvas标签不熟,没有关系,已经有人将这种投影效果写成了插件,您直接调用此js就可以实现投影效果了。
使用方法很简单:
1.调用此js;
2.需要投影的图片添加class——”reflect”;
然后预览就可以实现图片的投影效果了。
本文提供实例页面和打包下载,希望对您有所帮助。
jQuery-很酷的弹出层效果js插件
2009年08月30日,星期日告别生硬的系统自带的弹出提示效果,享受前端技术带来的炫酷的视觉效果和舒适的交互体验。这里向您推荐一款不错的弹出层插件,可以放置文字,图片,flash以及复杂的div层,支持定时弹出层消失,用做提示再好不过了。您不妨也来体验一下。