最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jQuery下通过replace字符串替换实现大小图片切换_jquery

来源:动视网 责编:小采 时间:2020-11-27 21:03:14
文档

jQuery下通过replace字符串替换实现大小图片切换_jquery

jQuery下通过replace字符串替换实现大小图片切换_jquery:核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。 下面这个动画就是显示了尺寸切换,单击大图按钮,则改变图片的src,加载大图,单击小图按钮,则又显示小图。 replace用法简单讲解: 我其实也是新手,讲得不对望海涵。 字
推荐度:
导读jQuery下通过replace字符串替换实现大小图片切换_jquery:核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。 下面这个动画就是显示了尺寸切换,单击大图按钮,则改变图片的src,加载大图,单击小图按钮,则又显示小图。 replace用法简单讲解: 我其实也是新手,讲得不对望海涵。 字


核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。

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

replace用法简单讲解:
我其实也是新手,讲得不对望海涵。
字符串.replace(a,b);指的是用b将字符串含有a的部分代替,例如字符串obj="welcome to my website!"; obj.replace("my","jb51net");指的是用字符串jb51net代替字符串obj中的my。

您有兴趣可以使用以下代码做测试:
代码如下:
var obj="welcome to my website!";
var newobj=obj.replace("my","jb51net's");
alert(newobj);

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

核心代码:
代码如下:

$(document).ready(function(){
//给图片高宽转换为以em单位
$(".zxx_image").each(function(){
var emW=$(this).width()/128+"em";
var emH=$(this).height()/128+"em";
$(this).css("width",emW);
$(this).css("height",emH)
});
function srcChg(a,b){
$(".zxx_image").each(function(){
var new_src=$(this).attr("src").replace(a,b); //字符串替换,更改图片路径
//alert(new_src);
$(this).attr("src",new_src);
});
}
$("#small_pic").click(function(){
if($(this).hasClass("on")) return;
else{
$("#big_pic").removeClass("on");
$(this).addClass("on");
$(".zxx_image_list").css("font-size","128px");
srcChg("s256","s128");
return false; //使单击后IE6下图片正常加载
}
});
$("#big_pic").click(function(){
if($(this).hasClass("on")) return;
else{
$("#small_pic").removeClass("on");
$(this).addClass("on");
$(".zxx_image_list").css("font-size","256px");
srcChg("s128","s256");
return false;
}
});
});


打包下载地址 jquery-replace-pic-convert.rar

文档

jQuery下通过replace字符串替换实现大小图片切换_jquery

jQuery下通过replace字符串替换实现大小图片切换_jquery:核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。 下面这个动画就是显示了尺寸切换,单击大图按钮,则改变图片的src,加载大图,单击小图按钮,则又显示小图。 replace用法简单讲解: 我其实也是新手,讲得不对望海涵。 字
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top