怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 345 JQUERY DREAMWEAVER
html5+css3+jquery漂浮抖动的导航
来源：互联网
2023-03-16 23:54:28 323
html5 css3 jquery漂浮抖动的导航
工具/原料
- adobe dreamweaver
方法/步骤
新建html文档。
书写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>
书写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>
书写并添加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>
代码整体结构。
查看效果。
注意事项
- jquery-2.1.1.min.js是个js包，可以网上下载。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 336 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 379 JQUERY