我想更改id为" front"的图像元素的来源。我在顶部有一个基本脚本,但它不起作用。我只是试图想出一些东西,但我在JavaScript上非常糟糕。
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="home.js"></script>
<script type="text/javascript">
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="header">
<div class="navigation">
<ul>
<li><a id="home" href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="../portfolio/portfolio.html">Portfolio</a></li>
<li><a href="../contact/contact.html">Contact</a></li>
<li><a href=""></a></li>
</ul>
</div>
<div class="yellow"></div>
<div class="x"></div>
</div>
</head>
<body>
<div class="website">
<div class="logo"></div>
<img src="../images/ColbyFaceblack.jpg" id="front" width="100%" >
<div class="content">
<div class="menu"></div>
<div class="office"></div>
</div>
<div class="body2">
<img src="../images/simple_dashed_full.png" width="100%">
<div class="weboutline">
<img src="../images/web_outline.png" width="100%">
</div>
<div class="body2img2">
<img src="../images/portfolio.png" width="100%">
</div>
<div class="body2img3">
<img src="../images/blog.png" width="100%">
</div>
</div>
<div class="body3">
<img src="../images/body.png" width="100%">
<img class="touch" src="../images/get_in_touch_beige.png" width="50%">
</div>
<footer>
<img src="../images/footer.png" width="100%">
<div class="copyright"> copyright COLBY MOFFETT 2015 </div>
<div class="facebook"></div>
<div class="instagram"></div>
<div class="twitter"></div>
</footer>
</body>
</div>
</html>
答案 0 :(得分:1)
这是正确的,但必须在更改屏幕尺寸时执行:
$(function () {
$(window).resize(function () {
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
});
});
还要确保在$(function () { });
内执行它以对DOM加载的内容执行。因此,为了确保它在加载时也执行,你需要将它存储在一个命名函数中,并在每次调整窗口大小时执行它。
您的最终代码将是:
$(function () {
var reszWindow = function () {
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
};
reszWindow();
$(window).resize(reszWindow);
});
答案 1 :(得分:0)
根据屏幕分辨率更改图像:
$(window).resize(function() {
var scrWidth = $(window).width();
if(scrWidth < 500){
$('#myImage').attr('src', 'http://wallpaper-download.net/wallpapers/logo-wallpapers-google-chrome-background-wallpaper-33143.jpg');
}
if(scrWidth > 500){
$('#myImage').attr('src', 'http://www.bhmpics.com/download/google_colorful_background-1920x1080.jpg');
}
});
(来自谷歌的随机图片)
答案 2 :(得分:0)
由于您已经在使用jQuery,因此以下可能是解决方案之一:
$( window ).resize(function() {
if($( window ).width() < 400) {
$("img#front").attr("src","../images/colbysmall.png");
} else {
$("img#front").attr("src","../images/ColbyFaceblack.jpg");
}
});
(PS。未经测试的代码):)
答案 3 :(得分:0)
除了Javascript之外,您只需使用HTML5即可。浏览器支持isn't great,但也不错。
<picture>
<source media="(min-width: 400px)" srcset="../images/colbysmall.png">
<img src="../images/ColbyFaceblack.jpg">
</picture>
<p>With placeholders:</p>
<picture>
<source media="(min-width: 400px)" srcset="http://placehold.it/400?text=colbyfaceblack">
<img src="http://placehold.it/200?text=colbysmall">
</picture>