html5+css3+jquery漂浮抖动的导航
1、新建html文档。
2、书写hmtl代码。
<article class="zzsc">
<div class="main-container">
<button class="btn" id="b1" >Home</button>
<button id="b2" class="btn" >About</button>
<button id="b3" class="btn" >Product</button>
<button id="b4" class="btn" >Demo</button>
<button id="b5" class="btn" >Testimo</button>
<button id="b6" class="btn" >Contact Us</button>
<button id="b7" class="btn" >Carrers</button>
</div>
</article>
3、书写css代码。
<style>
body { background: url(./weibo_shuimian-039.jpg) 0 0 no-repeat; background-size: cover; }
.main-container { width: 80%; margin: 0 auto; }
.btn { background: teal; height: 40px; width: 100px; position: relative; border: 0px; border-radius: 5px; color: white; -webkit-transform: rotate(0deg); }
</style>
4、书写并添加js代码。
<script src="js/jquery-2.1.1.min.js" ></script>
<script>
function waterFloat(elm,t,d,v){
var i = elm;
var runIt = function (elm,t,d,v) {
elm.animate({top:'+='+v},t,"linear",function(){
$({deg: -d}).animate({deg: d}, {
duration: t,
step: function(now){
elm.css({
transform: "rotate(" + now + "deg)"
});
}
},"linear");
elm.animate({top:'-='+v},t,"linear",function(){
$({deg: d}).animate({deg: -d}, {
duration: t,
step: function(now){
elm.css({
transform: "rotate(" + now + "deg)"
});
}
},"linear");
runIt(elm,t,d,v);
});
});
}
runIt(i,t,d,v);
}
</script>
<script >
$(document).ready(function(){
var b1 = $('#b1');
var b2 = $('#b2');
var b3 = $('#b3');
var b4 = $('#b4');
var b5 = $('#b5');
var b6 = $('#b6');
var b7 = $('#b7');
var a1 = $('#a1');
var a2 = $('#a2');
var p1 = new waterFloat(b1,900,3,8);
var p2 = new waterFloat(b2,700,3,8);
var p3 = new waterFloat(b3,800,3,10);
var p4 = new waterFloat(b4,900,3,8);
var p5 = new waterFloat(b5,700,3,8);
var p6 = new waterFloat(b6,800,3,10);
var p7 = new waterFloat(b7,700,3,8);
var p8 = new waterFloat(a1,700,3,8);
var p9 = new waterFloat(a2,800,3,10);
});
</script>
5、代码整体结构。
6、查看效果。
