Question

我是Javascript的新手。我想让我的图像逐渐变小，然后调整回原来的大小。我有什么作品，但只有在将图像悬停在图像上2次或更多之后才能使用。

更清楚的是，当我第一次将鼠标悬停在图像上时，它会进行非常突然的过渡，但之后会有效。当使用CSS时，它做了同样的事情。

我拥有的是：

        function enlargeImage() {
        var logo = document.getElementById('logoname');
        logo.style.opacity = '0.7';
        logo.style.height = 'auto';
        logo.style.width = '800px';
        logo.style.transition = '0.7s';

    }

    function resizeImage() {
        var logo = document.getElementById('logoname');
        logo.style.opacity = '1';
        logo.style.height = 'auto';
        logo.style.width = '900px';
    }

这应该有用吗？或者我以一种我不应该拥有的方式进行编码？

Answer 1

我个人喜欢将这些动画和效果留给CSS，并将功能留给Javascript。

#yourImage {
  width: 150px;
  height: 150px;
  transition: transform .25s ease, opacity .5s ease;
}
        
#yourImage:hover {
  opacity: 0.5;
  transform: scale(0.5);
}

<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="" id="yourImage">

当图像悬停在上面时，我将图像变换并调整为原始尺寸的0.5％和原始不透明度的0.5％。

我还使用过渡属性来设置图像在调整大小或不透明度更改时的移动速度。

Answer 2

因为javascript代码中的高度标记而导致中断。
改变这个

height: auto

进入height:400px或某个值而不是自动。

＆＃13;

function enlargeImage() {
        var logo = document.getElementById('logoname');
        logo.style.opacity = '0.7';
        logo.style.height = '300px';
        logo.style.width = '400px';
        logo.style.transition = '0.7s';


    }

    function resizeImage() {
        var logo = document.getElementById('logoname');
        logo.style.opacity = '1';
        logo.style.height = '600px';
        logo.style.width = '600px';
        logo.style.transition = '0.7s';

    }

＆＃13;

img {
  height:300px;
  width:400px;
}

＆＃13;

<img onmouseover="resizeImage()" onmouseout="enlargeImage()"    src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg' id="logoname">

＆＃13;

Javascript转换仅在第二次悬停后才起作用

2 个答案: