根據瀏覽器的屏幕分辨率更改徽標圖像
[英]Change logo image based on screen resolution of the browser
問題描述
我有兩張圖片，一張是黑色徽標，另一張是白色徽標。 當瀏覽器的寬度小於768px時我想要白色標識，當它更大時我想要黑色標識。 我嘗試了一些但實際上並沒有改變，只有當我重新加載頁面時。
$(function() {
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
});
有什么建議嗎？ 謝謝
6 個解決方案
解決方案1
5 已采納 2016-04-04 11:59:07
https://api.jquery.com/resize/
您正在檢查窗口的寬度，但您只是在頁面首次加載時才這樣做！
而是每次調整屏幕大小時使用resize函數運行腳本
$(window).on("resize", function(){
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
})
雖然這聽起來更像是css媒體查詢的工作，但我們並不滿足您的所有需求和要求:)
解決方案2
5 2016-04-04 12:04:52
你可以用css和媒體查詢來做到這一點。
img { width: 400px; content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg"); } @media screen and (max-width: 768px) { img { content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg"); } }
<img alt="">
解決方案3
2 2016-04-04 12:00:46
我有一個純JavaScript解決方案
document.getElementsByTagName("BODY")[0].onresize = function() {
if (window.outerWidth < 768) {
document.getElementById("img").src = yourFirstImage.png;
} else {
document.getElementById("img").src = yourSecondImage.png;
}
}
解決方案4
1 2016-04-04 12:12:23
如果您有徽標的矢量版本，請創建一個imgname.SVG，然后使用css更改顏色。 （SVG是可縮放的矢量圖形和圖像質量很好）
HTML
<div class="logo"> <a href="index.html"><img src="images/imagename.svg"></a> </div>
CSS
@media only screen and (max-width: 768px) {
.logo img{
background-color:#000;
height:50px;
width:100%;
}
}
解決方案5
0 2016-04-04 12:07:07
這是使用CSS3媒體查詢的最簡單的解決方案，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>media queries</title> <style> @media screen and (max-width: 780px) { body { background-image: url("/images/Trin-02.png"); } } @media screen and (min-width: 780px) { body { background-image: url("/images/Trin-01.png"); } } </style> </head> <body> </body> </html>
所以，你可以有圖像acc。 你正在使用的設備
解決方案6
0 2016-04-04 12:22:29
無需多次定位圖像。 保存一次引用，多次使用它。
為resize事件創建一個回調函數並綁定它。 這樣你也可以調用回調函數在init上設置正確的圖像。
var image = $('.logo').find("img");
function setImage() {
var windowWidth = window.innerWidth,
src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';
image.attr('src', src);
}
$(window).on('resize', setImage);
setImage();
根據屏幕分辨率AngularJS更改指令的templateUrl
[英]Change the templateUrl of directive based on screen resolution AngularJS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.