gpt4 book ai didi

jquery 悬停一个 div 并在另一个 div 上显示图像效果

转载 作者:可可西里 更新时间:2023-11-01 13:31:32 25 4
gpt4 key购买 nike

好的 javascript 新手,我需要帮助!

这里的设计可以更好地解释这种情况。

My JSFiddle Here

我的代码:

<div class="design">
<div class="menu">5 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
<li class="menu-item"> <a href="#">menu option</a>
</li>
<li class="menu-item"> <a href="#">menu option</a>
</li>
<li class="menu-item"> <a href="#">menu option</a>
</li>
<li class="menu-item"> <a href="#">menu option</a>
</li>
<li class="menu-item"> <a href="#">menu option</a>
</li>
</div>
<div class="zoom-preview">image will appear here when we hover at each link at the left. each link it's own image. Also there must be a default image here when we do not hover at any link at the left.</div>
<div class="clear"></div>

我想做的就是当我们进入页面时,右边会有一个默认图像。但是当我们将鼠标悬停在左侧的每个链接上时,右侧的图像将被替换为另一张图像,具有例如拍摄的快速缩放效果。

当没有链接悬停时,将再次显示默认图像。

请在 javascript 代码方面提供一些帮助。谢谢!

最佳答案

这是一个可以帮助您入门的快速演示:

演示:jsFiddle

如您所见,我正在使用带有数据属性的列表来设置应显示的图像 (<li data-image='image.jpg'><a ...></a></li>) - 其余部分由 JS 处理。

要控制行为,请根据需要更改变量值:

var imageContainer = '.img_container', //selector of the image container
imageList = '.hoverimage', //selector of the image list
maxWidth = 'parent', //parent or specific CSS width.
defImage = 'image_to_display.jpg';

关于jquery 悬停一个 div 并在另一个 div 上显示图像效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29041921/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com