请帮助我完成以下代码。我可以使用图像创建循环菜单,并使其对我来说很简单,但我想使用CSS和Jquery使页面变得超级快速,并从这个项目中学到一些东西。我想做的是更改(设置动画)悬停菜单项周围的圆形的颜色。我认为代码非常自我解释,但如果有什么不清楚的地方,请告诉我。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.color.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var itemnumber = '';
$('#menu li').hover(function () {
itemnumber = '#item' + $(this).text();
$(itemnumber).animate({color: "#abcdef"}, 1000);
}).mouseleave(function () {
$(itemnumber).animate({color: "#B1AC8F"}, 1000);
});
});
</script>
<style type="text/css">
body {
width: 810px;
height: 800px;
background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
}
#menu ul { list-style:none; }
#logo { width:250px; margin:0 285px; }
.circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
.oval { margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
#itempic {position:relative; margin: -1px -12px; z-index:-1;}
#item1 {position:absolute; left: 160px; top:170px; }
#item2 {position:absolute; left: 335px; top:170px; }
#item3 {position:absolute; left: 510px; top:170px; }
#item4 {position:absolute; left: 245px; top:325px; }
#item5 {position:absolute; left: 420px; top:325px; }
#item6 {position:absolute; left: 160px; top:480px; }
#item7 {position:absolute; left: 335px; top:480px; }
#item8 {position:absolute; left: 510px; top:480px; }
#item9 {position:absolute; left: 245px; top:635px; }
#item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>
<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
<li><div class="circle" id="item1"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
<li><div class="circle" id="item2"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
<li><div class="circle" id="item3"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
<li><div class="circle" id="item4"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
<li><div class="circle" id="item5"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
<li><div class="circle" id="item6"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
<li><div class="circle" id="item7"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
<li><div class="circle" id="item8"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
<li><div class="circle" id="item9"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
<li><div class="circle" id="item10"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>
我发现了这个问题。。谢谢你们的帮助!
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.color.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var itemnumber = '';
var itemoval = '';
$('#menu li').hover(function () {
itemnumber = '#item' + ($('#menu li').index(this) + 1);
itemoval = itemnumber + '-oval';
$(itemnumber).animate({color: "#F97780"}, 500);
$(itemoval).animate({backgroundColor: "#F97780"}, 500);
}).mouseleave(function () {
$(itemnumber).animate({color: "#B8A36E"}, 500);
$(itemoval).animate({backgroundColor: "#B8A36E"}, 500);
});
});
</script>
<style type="text/css">
body {
width: 810px;
height: 800px;
background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
}
#menu ul { list-style:none; }
#logo { width:250px; margin:0 285px; }
.circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
.oval { z-index:-1; margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
#itempic {position:relative; margin: -1px -12px; z-index:-1;}
#item1 {position:absolute; left: 160px; top:170px; }
#item2 {position:absolute; left: 335px; top:170px; }
#item3 {position:absolute; left: 510px; top:170px; }
#item4 {position:absolute; left: 245px; top:325px; }
#item5 {position:absolute; left: 420px; top:325px; }
#item6 {position:absolute; left: 160px; top:480px; }
#item7 {position:absolute; left: 335px; top:480px; }
#item8 {position:absolute; left: 510px; top:480px; }
#item9 {position:absolute; left: 245px; top:635px; }
#item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>
<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
<li><div class="circle" id="item1"><div class="oval" id="item1-oval"><img id="itempic" src="Item1.png"></div></div></li>
<li><div class="circle" id="item2"><div class="oval" id="item2-oval"><img id="itempic" src="Item2.png"></div></div></li>
<li><div class="circle" id="item3"><div class="oval" id="item3-oval"><img id="itempic" src="Item3.png"></div></div></li>
<li><div class="circle" id="item4"><div class="oval" id="item4-oval"><img id="itempic" src="Item4.png"></div></div></li>
<li><div class="circle" id="item5"><div class="oval" id="item5-oval"><img id="itempic" src="Item5.png"></div></div></li>
<li><div class="circle" id="item6"><div class="oval" id="item6-oval"><img id="itempic" src="Item1.png"></div></div></li>
<li><div class="circle" id="item7"><div class="oval" id="item7-oval"><img id="itempic" src="Item2.png"></div></div></li>
<li><div class="circle" id="item8"><div class="oval" id="item8-oval"><img id="itempic" src="Item3.png"></div></div></li>
<li><div class="circle" id="item9"><div class="oval" id="item9-oval"><img id="itempic" src="Item4.png"></div></div></li>
<li><div class="circle" id="item10"><div class="oval" id="item10-oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>
您需要在此处查看jQuery UI颜色动画。
通过包含此脚本标记,您可以使用google CDN包含jQuery UI。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery-ui/1.8.21/jquery-ui.min.js"></script>
基本上,它可以归结为链接jQueryUI,然后将悬停函数更改为mouseenter
函数。
看看这个工作示例。
看看这个:http://jsfiddle.net/ufomammut66/ZsX8e/
我已将您的悬停事件更改为鼠标输入事件。如果您将其改回悬停在jsfiddle中,您会注意到"in"日志记录语句在退出时会触发两次(查找我留下的console.log语句),这是我们不希望的。
我还将jquery选择器更改为您的circle类。我这样做是因为你似乎看不到li元素(这可能只是缺少图像),你希望它在进入圆形元素时激发。
我不清楚你试图使用itemnumber做什么,但似乎你试图重建圆形元素ID来选择它。我们不需要这样做,因为this
元素将指代我们正在进入或离开的当前元素。
注意:我认为您使用的是:http://www.bitstorm.org/jquery/color-animation/作为您的jquery.color.min.js
导入。jsFiddle已将其导入工作。
希望这能有所帮助。