Question

我想知道如何在此页http://jan.dyrda.org/html/udemy_coupons.html上实现扩展效果？

我相信Jquery已被使用。如果有人能指出我有资源如何达到同样的效果，我将不胜感激。

Answer 1

通过查看该页面的源代码，我发现有些元素被标记为环形交叉口...经过一些快速谷歌搜索后，我认为这可能对您的需求有益http://fredhq.com/projects/roundabout/

Answer 2

如果你指的是缩略图，你可以使用CSS来做到这一点。要创建该效果，您需要编辑转换，显示，z-index，溢出和高度，或者您可以使用jquery插件来实现该效果。

您可以在this页面找到有关转场的更多信息：

Answer 3

如果您指的是页面底部的展开框，则可以使用jQuery slideDown（）效果实现。 w3Schools有一个非常基本的例子

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

</body>
</html>

w3schools jQuery slideDown()

您只需要使用鼠标悬停按钮单击事件替换缩略图图像的鼠标移除事件

如何实现鼠标悬停效果，可能是jquery

3 个答案: