你如何根据浏览器宽度改变img src与JavaScript？ [英] how do you change img src with javascript depending on browser width?
本文介绍了你如何根据浏览器宽度改变img src与JavaScript？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想改变图像元素的来源，其ID为front。顶部有一个基本脚本，但它不起作用。我只是试图想出一些东西，但我在JavaScript中很糟糕。
< html>
< head>
< link rel =stylesheettype =text / csshref =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 =viewportcontent =width = device-width，initial-scale = 1>
< div class =header>
< div class =navigation>
< ul>
< li>< a id =homehref =>主页< / a>< / li>
< li>< a href =>服务< / a>< / li>
< li>< a href =../ portfolio / portfolio.html>投资组合< / a>< / li>
< li>< a href =../ contact / contact.html>联络人< / 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.jpgid =frontwidth =100％>
< div class =content>
< div class =menu>< / div>
< div class =office>< / div>
< / div>
< div class =body2>
< img src =../ images / simple_dashed_full.pngwidth =100％>
< div class =weboutline>
< img src =../ images / web_outline.pngwidth =100％>
< / div>
< div class =body2img2>
< img src =../ images / portfolio.pngwidth =100％>
< / div>
< div class =body2img3>
< img src =../ images / blog.pngwidth =100％>
< / div>
< / div>
< div class =body3>
< img src =../ images / body.pngwidth =100％>
< img class =touchsrc =../ images / get_in_touch_beige.pngwidth =50％>
< / div>
< footer>
< img src =../ images / footer.pngwidth =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>
解决方案
由于您已经在使用jQuery，其中一个解决方案：
$ $ p $ $（window）.resize（function（）{
if（$（window） .width（）<400）{
$（img＃front）。attr（src，../ images / colbysmall.png）;
} else {
$（img＃front）。attr（src，../ images / ColbyFaceblack.jpg）;
}
}）;
（PS。未经测试的代码）：）
I would like to change the source of the image element with the id of "front". I have a basic script at the top, but it doesn't work. I was just attempting to come up with something but I'm very bad at 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>
解决方案
Since you are already using jQuery, the following could be one of the solutions:
$( window ).resize(function() {
if($( window ).width() < 400) {
$("img#front").attr("src","../images/colbysmall.png");
} else {
$("img#front").attr("src","../images/ColbyFaceblack.jpg");
}
});
(PS. Untested code) :)
这篇关于你如何根据浏览器宽度改变img src与JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
