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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
three.js 如何制作魔方
Jul 31 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
几种tab切换详解
2017/02/03 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python插件机制实现详解
2020/05/04 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
班级年度安全计划书
2014/05/01 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
信息合作协议书
2014/10/09 职场文书
暑期实践个人总结
2015/03/06 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2015大一新生军训感言
2015/08/01 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
python 标准库原理与用法详解之os.path篇
2021/10/24 Python