Question

另一个编辑：

这是完整的代码，作为小提琴（http://jsfiddle.net/pbb9cc9f/7/）菜单正在运行，但我无法将其实现到我的HTML文件中。我做错了什么？预加载的javascript链接是错误的吗？循环幻灯片是否会混淆菜单？谢谢！

<!DOCTYPE html>
<html>

<title>CHRIS RHODES</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript">
$('#slide').cycle({ 
    fx:     'none', 
    timeout:  0, 
    next:   '#nex',
    prev: '#pre' 
});

$(document.documentElement).keyup(function (e) {
    if (e.keyCode == 39)
    {        
       $('#slide').cycle('next');
    }

    if (e.keyCode == 37)
    {
        $('#slide').cycle('prev');
    }

});
</script>

<script type="text/javascript">
(function() {

  var time = 3000,
    timer;

  clearTimeout(timer);
  $('.target').stop(true).css('opacity', 1).show().fadeOut(8000);

  function handlerIn() {
    clearTimeout(timer);
    $('.target').stop(true).css('opacity', 1).show();
  }

  function handlerOut() {
    timer = setTimeout(function() {
      $('.target').fadeOut(8000);
    }, time);
  }

  $(".link, .target").hover(handlerIn, handlerOut);

}());
</script>

<head>

<style type="text/css">

body {
  font-family: Arial;
  text-decoration: none;
  color: black;
  font-size: 8pt;
  letter-spacing: 0.1em;
}

a {
  font-family: Arial;
  text-decoration: none;
  color: black;
  font-size: 8pt;
  letter-spacing: 0.1em;
}

.target {
  display: none;
  left: 20px;
  top: 20px;
  width: 98px;
  height: 60px;
  position: absolute;
  z-index: 99999;
  background: red;
}

.link {
  left: 0px;
  top: 0px;
  width: 138px;
  height: 100px;
  position: absolute;
  z-index: 9999;
  background: blue;
}

#slide {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#pre {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
  background-color: transparent;
  cursor: w-resize;
  z-index: 999;
}

#nex {
  position: fixed;
  right: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
  background-color: transparent;
  cursor: e-resize;
  z-index: 999;
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Resizable {
  max-width: 80%;
  max-height: 90%;
  resize: both;
  overflow: auto;
}

</style>

</head>

<div class="link"></div>

<div class="target">
CHRIS RHODES<br><br>
<a href="http://www.chrisjrhodes.co.uk">Comissions</a><br>
<a href="http://www.chrisjrhodes.co.uk/editorial">Editorial</a><br>
<a href="http://www.chrisjrhodes.co.uk/contact">Contact</a><br>
</div>

<div id="pre"></div>
<div id="nex"></div>

<ul id="slide">
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/01-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/02-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/03-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/04-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/05-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/06-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/07-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/08-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/09-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/10-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/11-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/12-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/13-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/14-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/15-800x800.jpg" class="Absolute-Center is-Resizable"/>
</ul>

</body>
</html>

Answer 1

在这种情况下，您需要另一个可见元素作为悬停源。它可以是其他可见的东西，或者只是在UI上留下的几条像素宽线，或者您可以为此创建的一些特殊元素/图标。这应该适用于桌面或移动设备。

Answer 2

尝试更改visibility

<script type="text/javascript">
  setTimeout(function() {
    $('.menu').css("visibility", "hidden");
  }, 5000);
</script>

visibility: hidden只隐藏了您的愿景中的元素。但它会在那里。与display: none;

不同

Answer 3

这是我的js代码，执行你要描述的内容。让我知道如果你喜欢css和html部分，你可以随意使用它并自己设计。

function expand(s){
   var td = s;
   var d = td.getElementsByTagName("div").item(0);
   td.classname = "menuHover";
   d.className = "menuHover";
}

function collapse(s){
   var td = s;
   var d = td.getElementsByTagName("div").item(0);
   td.className = "menuNormal";
   d.className = "menuNormal";
}

自动隐藏菜单

3 个答案: