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

这篇文章发布于 2009年08月30日,星期日,23:50,归类于 jQuery相关。 阅读 41888 次, 今日 4 次 2 条评论

 

实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小(font-size)控制图片尺寸的做法是跟Google学习的,但是jQuery代码是根据效果自己想出来的,逻辑很简单,没有什么精妙之处。核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。

下面这个动画就是显示了尺寸切换,单击“大图”按钮,则改变图片的src,加载大图,单击“小图”按钮,则又显示小图。

狠狠地点击:效果演示页面(含相关源代码打包下载)

replace用法简单讲解:

我其实也是新手,讲得不对望海涵。

字符串.replace(a,b);指的是用b将字符串含有a的部分代替,例如字符串:

obj="welcome to my website!";
obj.replace("my","zhangxinxu");

指的是用字符串zhangxinxu代替字符串obj中的"my"

您有兴趣可以使用以下代码做测试:

var obj="welcome to my website!";
var newobj=obj.replace("my","zhangxinxu's");
alert(newobj);

好了,就说这么多,更多可以学习的内容在实例页面里。

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. 何引忘川说道:

    这个demo中获取图标的大小的时候需要等到图片先加载完,否则得到的图片的大小长宽都为0
    setTimeout(function(){},500)
    可以解决

  2. xbm376说道:

    作者判断中英文混合字串的长度时用的替换方法很妙,受益匪浅,复杂的问题一下简单了。。厉害