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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
JS解密入门 最终变量劫持
Jun 25 Javascript
js获取height和width的方法说明
Jan 06 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
js上传图片预览的实现方法
May 09 Javascript
vuex进阶知识点巩固
May 20 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
14个有用的Jquery技巧分享
2015/01/08 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
大学生学习自我评价
2014/01/13 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
英语自我评价范文
2014/01/24 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
面试通知单大全
2015/04/20 职场文书
新生儿未入户证明
2015/06/23 职场文书