【问题标题】:How to add a mouse over scroll effect to an image within an image如何为图像中的图像添加鼠标悬停滚动效果
【发布时间】:2019-10-13 21:30:17
【问题描述】:

谁能帮助我完成以下编码?我正在尝试在监视器中添加一个监视器图像和另一个图像,该图像对鼠标悬停具有自动滚动效果。

我从这篇文章中尝试了以下内容: How to make image scrolling effect inside other image?

我也在那里发过帖子,然后才注意到如果我有解决方案我应该发帖,所以我重新发布了一个新帖子。

我正在使用的 CSS 代码:

.computer-empty {
    overflow: hidden;
    position: relative;
    width: 540px;
}
.computer-screen {
    overflow: hidden;
    position: relative;
    height: 265px;
    width: 480px;
    left: 30px;
    top: 20px;

}
.screen-landing {
    left: 0;
    line-height: 0;
    position: absolute;
    width: 100%;
    transition: all 6s;
    -o-transition: all 6s;
    -ms-transition: all 6s;
    -moz-transition: all 6s;
    -webkit-transition: all 6s;
}
.screen-landing:hover {
    cursor: pointer;
    margin-top: -1036px;
}
img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.computer-empty img.computer {
    width: 100%;
}

我正在使用的 HTML 代码:

    <a target="_blank" href="http://www.safidrivingschool.co.uk" class="">

<div class="computer-screen">

<div class="screen-landing">

<img src="http://www.webnificent.co.uk/wp-content/uploads/graphics/safidrivingschool_capture.png" alt="Safi Driving School">

</div>
</div>

<img class="computer" src="http://www.webnificent.co.uk/wp-content/uploads/graphics/apple_montior.png" alt="computer">

</a>
</div>

如果我在 .computer-screen 上将位置设置为绝对位置,两个图像都会正确排列,但滚动效果将不起作用。如果我将其设置为相对,则滚动效果会起作用,但图像会彼此重叠。

查看此链接:示例:https://webnificent.co.uk/web-design/

我们将不胜感激。

【问题讨论】:

    标签: html css


    【解决方案1】:

    这很繁琐,但希望这会有所帮助吗?

    如果您对此有任何疑问,请告诉我!

    .computer {
        position: absolute;
        top: 5px;
        width: 540px;
        z-index: -1;
    }
    
    .computer-empty {
      overflow: hidden;
      position: relative;
      width: 540px;
    }
    
    .computer-screen {
      overflow: hidden;
      position: relative;
      height: 260px;
      width: 470px;
      left: 35px;
      top: 21px;
    
    }
    
    .screen-landing {
      left: 0;
      line-height: 0;
      position: absolute;
      width: 100%;
      transition: all 6s;
      -o-transition: all 6s;
      -ms-transition: all 6s;
      -moz-transition: all 6s;
      -webkit-transition: all 6s;
    }
    
    .screen-landing:hover {
      cursor: pointer;
      margin-top: -1036px;
    }
    
    img {
      max-width: 100%;
      width: auto;
      height: auto;
      vertical-align: middle;
      border: 0;
    
    }
    
    .computer-empty img.computer {
      width: 100%;
    }
     <a target="_blank" href="http://www.safidrivingschool.co.uk" class="">
    
       <div class="computer-screen">
         <div class="screen-landing">
           <img src="http://www.webnificent.co.uk/wp-content/uploads/graphics/safidrivingschool_capture.png" alt="Safi Driving School">
         </div>
       </div>
    
       <img class="computer" src="http://www.webnificent.co.uk/wp-content/uploads/graphics/apple_montior.png" alt="computer">
    
     </a>

    查看JSFiddle

    只是一个建议,使用完全黑屏的电脑屏幕可能会更容易,例如:Imac with Black Screen,只是因为在我的示例中我不得不摆弄lefttop,@987654329 @ 和 height 只是为了让它适合你电脑屏幕的白色空框。如果您没有特定的框可放入其中,则不必担心这一点,只需将动画图像滚动到屏幕中间即可!

    只是一个想法!

    【讨论】:

    • EGC 你是一个传奇人物,非常感谢你的快速反应和时间来解决它。非常感谢,并针对黑屏采取了观点。
    • 新!我认为您需要的关键是 z-index w3schools.com/cssref/pr_pos_z-index.asp 。如果它解决了您的问题,请将其标记为已接受? :)
    • 嘿 EGC,我注意到外部图像是响应式的,但内部图像不是,不要以为您有解决方案来使内部图像响应,以便它显示在所有设备上。
    • 嗯,你说的响应式,是不是说把内图包含在外图都搞砸了?
    • 我想你可以看看这个?已经进行到一半了,所以也许你可以填补我的空白。我正在使用@media-query's 并且稍微改变了你的嵌套:jsfiddle.net/ehyw0zrm/1
    猜你喜欢
    • 1970-01-01
    • 2016-09-06
    • 2013-04-27
    • 2013-02-18
    • 2020-08-16
    • 2013-01-05
    • 1970-01-01
    • 1970-01-01
    • 2015-01-12
    相关资源
    最近更新 更多