我正在尝试根据浏览器的宽度和高度制作翻转图像。这是当前的代码:
'<a href="google.com"><img src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" /></a>'
有什么想法吗?
答案 0 :(得分:1)
通常,您可以这样做:
<a href="google.com"><img id="myImage" src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" /></a>
<script>
var w = window.innerWidth;
document.getElementById("myImage").width = w;
</script>
这会将图像宽度调整为浏览器窗口的内部宽度。如果要按高度调整,请改用window.innerHeight属性。如果要根据图像中的最小值调整图像,可以编写一些逻辑。
或者,如果你想内联:
<a href="google.com"><img src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" width="window.innerWidth"/></a>
也可以,但是很难为它添加额外的逻辑。
答案 1 :(得分:1)
现代更好的做法是非JS /纯CSS。有几种方法可以实现这一目标,其中之一是:
<a href="#"><div class="myimg"></div></a>
.myimg {
width:80%;
height:200px;
background: url(https://s-media-cache-ak0.pinimg.com/736x/bc/4e/38/bc4e386f24997b6f8c4c1f8ce96a7cef.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.myimg:hover {
background: url(http://img00.deviantart.net/4ec1/i/2013/017/5/b/blue_eyed_huskey_by_ashleysmithphoto-d5rsvt2.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Live Demo。显然,您可以将上述CSS属性配置为您的首选项/项目。