[英]Change img src with another img attribute on Responsive
我為img標簽創建了一個屬性,如示例代碼,如data-tablet
, data-mobil
<div class="myDiv">
<img src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg">
</div>
我希望如果我的屏幕更改為平板電腦我的img src更改與data-tablet
或我的屏幕是移動我的src必須改變與data-mobil
我的JS
$(document).ready(function(){
$(window).resize(function(){
var tabletSrc = $(".main-carousel img").attr("data-tablet");
var mobilSrc = $(".main-carousel img").attr("data-mobil");
if($(window).width() <=768){
$('img').attr('src',tabletSrc);
}
if($(window).width() <=480 ) {
$('img').attr('src',mobilSrc);
}
});
});
問題是我怎么能這樣做,如果你點擊你將看不到任何工作
注意:我不想使用srcset或css
有關工作版本,請參閱此CodePen 。
您的代碼存在一些問題:
$(".main-carousel img")
是一組圖像。 而不是那樣,你可能想要在單個圖像上操作。 這可以在.each()
的幫助下.each()
。 這是相關代碼:
$(window).resize(function() {
if ($(window).width() <= 480) {
$('img').each(function() {
$(this).attr('src', $(this).attr('data-mobil'));
});
} else if ($(window).width() <= 768) {
$('img').each(function() {
$(this).attr('src', $(this).attr('data-tablet'));
});
}
});
使用srcset
而不是基於js的設備尺寸驗證。
<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">
因此,現在瀏覽器將根據瀏覽器尺寸自動設置要下載和顯示的圖像。
了解更多
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
您使用的是錯誤的class name
。 你的div有“myDiv”類,你選擇“main-carousel”
$(document).ready(function(){
$(window).resize(function(){
var tabletSrc = $(".myDiv img").attr("data-tablet");
var mobilSrc = $(".myDiv img").attr("data-mobil");
if($(window).width() <=768){
$('img').attr('src',tabletSrc);
}
if($(window).width() <=480 ) {
$('img').attr('src',mobilSrc);
}
});
});
這是codepen
保持短寬度。 您的驗證始終適用於tablet
。 自480 < 768
像這樣改變你的條件。
$(window).resize(function(){
var tabletSrc = $(".someDiv img").attr("data-tablet");
var mobilSrc = $(".someDiv img").attr("data-mobil");
var imgSrc = "defaultImageSrc" //src for default image
var windowWidth = $(window).width();
if(windowWidth <= 480 ) { //first small width
imgSrc = mobilSrc;
}else if(windowWidth <= 768){ //next larger one
imgSrc = tabletSrc;
} //if else default will there for you which is initialised there.
});
你可以試試這個旋轉木馬多個圖像
function makeResize(){ var imageSrc = $(".myDiv img"); if($(window).width() <=768 && $(window).width()>480){ $(imageSrc).each(function(key,value){ $(value).attr('src',$(value).data('tablet')); }); }else if($(window).width() <=480 ) { $(imageSrc).each(function(key,value){ $(value).attr('src',$(value).data('mobile')); }); }else{ $(imageSrc).each(function(key,value){ $(value).attr('src',$(value).data('default')); }); } } $(document).ready(function(){ $(window).resize(function(){ makeResize(); }); makeResize(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myDiv"> <img src="org1.jpg" data-default="org1.jpg" data-tablet="tablet1.png" data-mobile="mobile1.jpg"> <img src="org2.jpg" data-default="org2.jpg" data-tablet="tablet2.png" data-mobile="mobile2.jpg"> <img src="org3.jpg" data-default="org3.jpg" data-tablet="tablet3.png" data-mobile="mobile3.jpg"> </div>
注意復制並添加正確的圖像源然后嘗試。 上面的代碼適用於多個圖像。
嘗試這個:
$(window).resize(function(){
var realImg = $(".main-carousel img").attr();
var tabletSrc = $(".main-carousel img").data("tablet"); //use .data instead of attr
var mobilSrc = $(".main-carousel img").data("mobil");
if($(this).width() <= 768){
$('img').attr('src',tabletSrc);
}
else if($(this).width() <= 480 ) { // use else if instead of if
$('img').attr('src',mobilSrc);
}
else{
$('img').attr('src',realImg);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.