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的回到页面顶部按钮
Jun 27 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
Vue.use源码分析
Apr 22 Javascript
JavaScript的继承实现小结
May 07 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
微信小程序页面上下滚动效果
Nov 18 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
php4的session功能评述(二)
2006/10/09 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
python中的编码知识整理汇总
2016/01/26 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python实现飞机大战
2018/09/11 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python中的itertools的使用详解
2020/01/13 Python
基于python监控程序是否关闭
2020/01/14 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
.net笔试题
2014/03/03 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
大学生大二自我鉴定
2013/10/28 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
家长通知书家长评语
2014/04/17 职场文书
煤矿安全承诺书
2014/05/22 职场文书
安全责任书范文
2014/08/25 职场文书
学生检讨书范文
2014/10/30 职场文书
办公室主任个人总结
2015/02/28 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书