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

核心就是使用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

时间: 2024-08-31 09:15:11

jQuery下通过replace字符串替换实现大小图片切换_jquery的相关文章

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

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

ASP replace()字符串替换介绍

Replace 函数 返回字符串,其中指定数目的某子字符串被替换为另一个子字符串. Replace(expression, find, replacewith[, compare[, count[, start]]]) 参数 expression 必选项.字符串表达式 包含要替代的子字符串. Find 必选项.被搜索的子字符串. Replacewith 必选项.用于替换的子字符串. Start 可选项.expression 中开始搜索子字符串的位置.如果省略,默认值为 1.在和count 关联时

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

  Slider Revolution插件是一款非常强大的插件了,我们可以利用它来制作出各种效果并且还支持移动设备,支持手机触摸,键盘翻页;它内置幻灯.视频播放计时器等等效果,具体我们来看看. 这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Re

运用jQuery定时器的原理实现banner图片切换_jquery

主要运用了定时器的原理,bind,trigger应用等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>banner切换实现</title> <style type="text/css"> /* * @description: banner切换样式 * @author: lanfeng(beryl) * @tim

基于jQuery实现的幻灯图片切换_jquery

话不多说,直接附上源码,仅供大家参考 // JavaScript Document ;(function($){ $.fn.extend({ "zj_ppt":function(value){ //默认参数定义 var $this = $(this); value = $.extend({ "time":2000, //间隔变化动画时间 "con":0, "sto":true, "count":"

jQuery截取指定长度字符串的实现原理及代码_jquery

截取指定长度字符串操作在网站建设中大量使用,尤其是在新闻列表这种类型的操作中大量应用. 下面就是一个截取字符串代码实例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="htt

jquery下为Event handler传递动态参数的代码_jquery

实例代码 复制代码 代码如下: <body> <div id="demo"></div> <button id="btn" >trigger it</button> <script type="text/javascript"> (function($) { //demo1 $("#demo").bind("demo-trigger",

jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)_jquery

实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

jQuery 翻牌或百叶窗效果(内容三秒自动切换)_jquery

核心代码: 复制代码 代码如下: $(function(){ var timer = true; //执行向上或向下的开关 var liindex = 0; //LI的索引 var $div = $(".byc").find("div"); //每隔三秒执行一次变换LI的内容 var set1 = setInterval(function(){ ainbyc($div); liindex = 0; timer = !timer; },3000); //LI变换的方式