根据浏览器的屏幕分辨率更改徽标图像
[英]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.