响应翻转图像

时间:2017-03-31 17:17:44

标签: responsive rollover

我正在尝试根据浏览器的宽度和高度制作翻转图像。这是当前的代码:

'<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>'

有什么想法吗?

2 个答案:

答案 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属性配置为您的首选项/项目。