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 相关文章推荐
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
基于angular实现树形二级表格
Oct 16 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 __autoload()方法真的影响性能吗?
2012/03/30 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
php数组指针操作详解
2017/02/14 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
vue组件实现进度条效果
2018/06/06 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
pandas object格式转float64格式的方法
2018/04/10 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
通过实例解析python and和or使用方法
2020/11/14 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
实习生体会的自我评价范文
2013/11/28 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
党员四风剖析材料
2014/08/27 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
2014年话务员工作总结
2014/11/19 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
asyncio异步编程之Task对象详解
2022/03/13 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL