jQuery下通过replace字符串替换实现大小图片切换

核心就是使用replace替换img src的图片路径，从而实现不同尺寸图片的切换。

下面这个动画就是显示了尺寸切换，单击“大图”按钮，则改变图片的src，加载大图，单击“小图”按钮，则又显示小图。

replace用法简单讲解：
我其实也是新手，讲得不对望海涵。
字符串.replace(a,b);指的是用b将字符串含有a的部分代替，例如字符串obj="welcome to my website!"; obj.replace("my","jb51net");指的是用字符串jb51net代替字符串obj中的my。

您有兴趣可以使用以下代码做测试：


代码如下:

var obj="welcome to my website!";
var newobj=obj.replace("my","jb51net'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

赞 (0)

相关推荐

  • jQuery中replaceAll()方法用法实例

    本文实例讲述了jQuery中replaceAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法用匹配元素去替换指定的内容. replaceAll()方法的作用和replaceWith()方法是完全一样的. 语法结构: 复制代码 代码如下: $(content).replaceAll(selector) 参数列表: 参数 描述 content 用于替换的内容. selector 用于查找所要被替换的元素 实例实例: 复制代码 代码如下: <!DOCTYPE html> <htm

  • 从jQuery.camelCase()学习string.replace() 函数学习

    功能 camelCase函数的功能就是将形如background-color转化为驼峰表示法:backgroundColor. 此函数在jQuery的data函数,以及涉及到css的诸多函数中都有用到. jQuery的实现 复制代码 代码如下: //正则匹配 rdashAlpha = /-([a-z])/ig, // camelCase替换字符串时的回调函数 fcamelCase = function( all, letter ) { return letter.toUpperCase(); }

  • jQuery中replaceWith()方法用法实例

    本文实例讲述了jQuery中replaceWith()方法用法.分享给大家供大家参考.具体分析如下: 此方法将所有匹配的元素替换成指定的HTML或DOM元素. 需要注意的是此方法是追加内容,也就是原来的内容还在. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. 语法结构: 复制代码 代码如下: $(selector).replaceWith(content) 参数列表:

  • 浅谈jQuery中replace()方法

    今天在读jquery源码时,发现一个以前自己不曾注意过得问题,就是replece()的第二个参数为函数时的问题,以前只是知道replace()的第二个参数可以为函数,但是不知道该怎么操作,今天看到源码里用到了函数作为replace()的第二个参数时,感觉自己读起来比较吃力,于是准备整理下这个函数... 语法 stringObject.replace( regexp/substr, replacement) 返回值 返回一个新的字符串,是用replacement替换了regexp的第一次匹配或所欲

  • jquery replace方法去空格

    话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new docum

  • Jquery replace 字符替换实现代码

    示例:要修改图片的大小: <img id="rptComment_ctl01_Gravatar1" width="60" height="60" src="http://www.jb51.net/avatar.php?gravatar_id=f847fb8954f1750719d3feef3b033718&rating=G&size=60" /> 使用如下语句,将图片属性中的size替换. $(&q

  • jQuery替换节点用法示例(使用replaceWith方法)

    jQuery替换节点用法示例(使用replaceWith方法)

    本文实例讲述了jQuery替换节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery标签替换函数replaceWith()的使用例子

    jQuery标签替换函数replaceWith()的使用例子

    replaceWith简单使用 jQuery中,有一个强大的替换函数replaceWith(),使用非常简单,如: 页面有如下p标签 把所有p标签替换为"##" $('p').replaceWith('##'); 执行后的结果: 替换标签 利用这个replaceWith,我们可以把所有p标签替换为b标签,内容不变: $('p').each(function(){     $(this).replaceWith('<b>'+$(this).html()+'</b>

  • jQuery下通过replace字符串替换实现大小图片切换

    核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换. 下面这个动画就是显示了尺寸切换,单击"大图"按钮,则改变图片的src,加载大图,单击"小图"按钮,则又显示小图. replace用法简单讲解: 我其实也是新手,讲得不对望海涵. 字符串.replace(a,b);指的是用b将字符串含有a的部分代替,例如字符串obj="welcome to my website!"; obj.replace("my&qu

  • 基于jQuery实现仿百度首页换肤背景图片切换代码

    基于jQuery实现仿百度首页换肤背景图片切换代码

    不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- 在线预览    源码下载 html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></div> &l

  • jQuery插件Slider Revolution实现响应动画滑动图片切换效果

    这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque

  • 基于jquery插件制作左右按钮与标题文字图片切换效果

    本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看 CSS Code 复制代码 代码如下: <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* ui-banner */ .ui-banner{display:block;position:relative;wi

  • jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

  • 用jquery的attr方法实现图片切换效果

    用jquery的attr方法实现图片切换效果

    利用jquery的attr方法实现如下简单的图片切换效果,希望大家喜欢 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片</title> <script src="js/jquery.min.js"></script> <style> /* intro */ .intro

  • MySQL replace函数替换字符串语句的用法

    MySQL replace函数我们经常用到,下面就为您详细介绍MySQL replace函数的用法,希望对您学习MySQL replace函数方面能有所启迪. 最近在研究CMS,在数据转换的时候需要用到mysql的MySQL replace函数,这里简单介绍一下. 比如你要将表 tb1里面的 f1字段的abc替换为def UPDATE tb1 SET f1=REPLACE(f1, 'abc', 'def'); REPLACE(str,from_str,to_str) 在字符串 str 中所有出现

  • C#自定义字符串替换Replace方法实例

    本文实例讲述了C#自定义字符串替换Replace方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 前一阵遇到一个如标题的算法题,是将原有字符串的某些片段替换成指定的新字符串片段,例如将源字符串:abcdeabcdfbcdefg中的cde替换成12345,得到结果字符串:ab12345abcdfb12345fg,即:abcdeabcdfbcdefg -> ab12345abcdfb12345fg. 二.实现方法: 显然不能用string.Replace方法,需要自定义一个方法 strin

  • Python常用字符串替换函数strip、replace及sub用法示例

    本文实例讲述了Python常用字符串替换函数strip.replace及sub用法.分享给大家供大家参考,具体如下: 今天在做一道今年秋季招聘题目的时候遇上了一个替换的问题,题目看起来好长好复杂啊,真的,一时间,我看了好几遍也没看懂,其实实质很简单,就是需要把给定的一个字符串里面的指定字符替换成一些指定的内容就行了,这样首选当然是字典了,没有之一,题目很简单就不写出来了,在这里花了一点时间专门总结了一下字符串的替换的几个常用的函数,希望也能帮到有需要的人,自己也是当做一个学习的记录,好了,在这里

  • Java字符串替换函数replace（）用法解析

    Java字符串替换函数replace（）用法解析

    这篇文章主要介绍了Java字符串替换函数replace()用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 replace(char oldChar, char newChar)返回一个新的字符串,它是通过用 newChar 替换此字符串中出现的所有 oldChar 而生成的 代码如下 import java.util.*; public class Main{ public static void main(String[] args)

随机推荐