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操作select option 的代码小结
Jun 21 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
node.js域名解析实现方法详解
Nov 05 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
canvas实现钟表效果
2017/02/13 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
pytorch 预训练层的使用方法
2019/08/20 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
成品仓管员工作职责
2013/12/29 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
社区工作者个人总结
2015/02/28 职场文书
环卫处个人工作总结
2015/03/04 职场文书
初婚初育证明范本
2015/06/18 职场文书