jQuery特效实战开发 - 实例：模拟苹果导航条
2015/05/22 09:35:39
|
作者：HTML5学堂（码匠）
|
分类：jQuery实战开发
|
关键词：JQ特效,animate,动画,JQ,jQuery
JQ特效—仿苹果导航条
HTML5学堂：对于jQuery的学习，我们并不建议一个方法一个方法去记忆。或者说，记忆方法虽然是必要的，但是更重要的是应用。所谓条条大路通罗马，有时候同一个功能，可以用十几种方法来实现。因此，学习jQuery，应用才是王道。
效果需求
鼠标移入之后，块的大小会发生变化，相邻块也呈现阶梯式大小。
效果展示
效果实现
结构代码
-
<body>
-
<div class="wrap">
-
<p>独行冰海</p>
-
<p>梦幻雪冰</p>
-
<p>路过心上</p>
-
<p>尹小芃槑</p>
-
<p>扶丶公子</p>
-
</div>
-
</body>
欢迎沟通交流~HTML5学堂
样式代码
-
<style type="text/css">
-
.wrap {
-
width: 510px;
-
height: 120px;
-
margin: 0 auto;
-
background: #eee;
-
font-size: 14px;
-
}
-
.wrap > p{
-
float: left;
-
width: 60px;
-
height: 60px;
-
margin: 0 5px;
-
padding: 0;
-
background: #ccc;
-
line-height: 60px;
-
text-align: center;
-
}
-
</style>
行为代码
-
<script type="text/javascript">
-
/*鼠标移上，变化大小*/
-
var startWidth = 60;
-
var startHeight = 60;
-
var firstWidth = startWidth*2;
-
var firstHeight = startHeight*2;
-
var secondWidth = startWidth*1.6;
-
var secondHeight = startHeight*1.6;
-
var thirdWidth = startWidth*1.2;
-
var thirdHeight = startHeight*1.2;
-
$('p').hover(function () {
-
//实现动态变化
-
$(this).stop(true, true).animate({
-
'width' : firstWidth + 'px',
-
'height' : firstHeight + 'px',
-
'line-height' : firstHeight + 'px'
-
},100);
-
$(this).prev().stop(true, true).animate({
-
'width' : secondWidth + 'px',
-
'height' : secondHeight + 'px',
-
'line-height' : secondHeight + 'px'
-
},100);
-
$(this).next().stop(true, true).animate({
-
'width' : secondWidth + 'px',
-
'height' : secondHeight + 'px',
-
'line-height' : secondHeight + 'px'
-
},100);
-
$(this).prev().prev().stop(true, true).animate({
-
'width' : thirdWidth + 'px',
-
'height' : thirdHeight + 'px',
-
'line-height' : thirdHeight + 'px'
-
},100);
-
$(this).next().next().stop(true, true).animate({
-
'width' : thirdWidth + 'px',
-
'height' : thirdHeight + 'px',
-
'line-height' : thirdHeight + 'px'
-
},100);
-
$(this).next().next().nextAll().stop(true, true).animate({
-
'width' : startWidth + 'px',
-
'height' : startHeight + 'px',
-
'line-height' : startHeight + 'px'
-
},100);
-
$(this).prev().prev().prevAll().stop(true, true).animate({
-
'width' : startWidth + 'px',
-
'height' : startHeight + 'px',
-
'line-height' : startHeight + 'px'
-
},100);
-
});
-
</script>
欢迎沟通交流~HTML5学堂
阅读：568
极客编程技术分享
