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

所属分类: 网络编程 / JavaScript 阅读数: 1465
收藏 0 赞 0 分享
核心就是使用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);

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

核心代码:
复制代码 代码如下:

<script type="text/javascript">
$(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;
}
});
});
</script>

打包下载地址 jquery-replace-pic-convert.rar
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多