![](/img/trans.png)
[英]jQuery: How to animate (fade) change of image source using img.attr('src', 'img.png')?
[英]How to change img src directory or image file name with jquery or PHP
我想更改圖像路徑目錄或通過將類添加到父容器來附加圖像文件。
示例:如果我將“ large”類添加到父img
容器,則希望它附加img
文件名或更改img
路徑。
src="/images/services/image.jpg" changed to src="/images/services/image-large.jpg"
or
src="/images/services/image.jpg" changed to src="/images/services/large/image.jpg"
...............................................................................
default, no class:
<div>
<img src="/images/services/image.jpg" alt="" />
</div>
Option 1, with class:
<div class="large-image">
<img src="/images/services/image-large.jpg" alt="" />
</div>
Option 2, with class:
<div class="large-image">
<img src="/images/services/large/image.jpg" alt="" />
</div>
例如這樣,使用lastIndexOf
$function() {
var img = $(".large-image > img").each(function() { // for each img found
var src = $(this).attr("src"); // get the src
var path = src.substring(0,src.lastIndexOf('/')); // get the path from the src
var fileName = src.substring(src.lastIndexOf('/')); // and filename
var newSrc = path+"/large"+fileName; // re-assemble
// or change filename:
// var newSrc = path+"/"+fileName.replace(".jpg","-large.jpg"); // re-assemble
$(this).attr("src",newSrc);
});
});
您可以使用jquery更改src,對其進行拆分並添加新文件夾
<div class="large-image">
<img src="/images/services/image.jpg" alt="" />
</div>
$('.large-image > img').each(function(){
var msrc=$(this).attr('src');
msrc=msrc.split('/'); //images, services, image.jpg
var lastelem = msrc.pop(); //images, services // lastelem: image.jpg
msrc.push('large'); //images, services, large // lastelem: image.jpg
msrc.push(lastelem); //images, services, large, image.jpg
msrc=msrc.join('/'); //"images/services/large/image.jpg"
$(this).attr('src', msrc);
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.