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 23 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
js实现验证码功能
Jul 24 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进程之间实现共享内存的方法
2014/06/13 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
在Python中定义一个常量的方法
2018/11/10 Python
python中while和for的区别总结
2019/06/28 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
垃圾桶标语
2014/06/24 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
升学宴学生答谢词
2015/01/05 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript