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


Posted in Javascript onMay 22, 2012

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

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

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

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

var obj="welcome to my website!"; 
var newobj=obj.replace("my","3waternet'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 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
javascript对象的相关操作小结
May 16 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
js面向对象 多种创建对象方法小结
May 21 #Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 #Javascript
游览器中javascript的执行过程(图文)
May 20 #Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 #Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 #Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 #Javascript
JQuery选择器特辑 详细小结
May 14 #Javascript
You might like
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JS获取几种URL地址的方法小结
2014/02/26 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
JS实现li标签的删除
2019/04/12 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
js实现打字小游戏
2019/12/17 Javascript
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
查看django版本的方法分享
2018/05/14 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python 实现微信防撤回功能
2019/04/29 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
体育口号大全
2014/06/18 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
详解Python函数print用法
2021/06/18 Python
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
Python实现仓库管理系统
2022/05/30 Python