jq

最新推荐文章于 2022-08-14 21:16:10 发布

原创最新推荐文章于 2022-08-14 21:16:10 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

作业专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用jQuery进行动画操作的方法，包括鼠标悬停时二级菜单的显示与隐藏，以及元素的滑动显示与隐藏。同时，讲解了如何通过jQuery获取元素的尺寸，包括高度、宽度、内外边距及边界。

代码0.0

<html>
<head>
<script src="jquery/jquery-1.7.1.min.js"></src>
<script type="text/javascript">
$ function(){
   $(".navmenu").mouseover(function(){
   $(this).children("ul").show();
   //$(this).children("ul").css({display:'block'});显示的两种方法 this = navmenu，将this换成navmenu效果一样

})
   $(".navmenu").mouseover(function(){
   $(this).children("ul").hide();
   //$(this).children("ul").css({display:'none'});隐藏的两种方法 this = navmenu，将this换成navmenu效果一样

})
}
</script>
</head>
<body>
<div class="navmenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>

2.0.0

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
$(document).ready(function(){
$(".fl").click(function(){
$(".panel").slideDown("slow");
});
});
$(document).ready(function(){
$(".fli").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel,
{
height:120px;
}

div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}

div.pa,p.fl
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.pa
{
height:120px;
}

div.pan,p.fli
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.pan
{
height:120px;
}
</style>
</head>

<body>

<p class="fli">Toggle</p>
<p class="flip">隐藏</p>
<p class="fl">显示</p>
<div class="panel">

<p>hello world</p>

</div>

</body>
</html>

总结：

二级菜单淡入淡出
知识点：jquery的动画、SlideUP(jquery实现)

SlideDown(),SlideToggle()。

2.jquery的尺寸

内容获取-height()+width()
padding获取-innerheight()+innerwidth()
border获取-outwidth()+outheight()
margin获取-outwidth(true)+outheight(true)。

假如获取一张图片用？-内容获取-height()+width()

width()返回元素的宽度(不包括内边距、边框、或外边距)
height()返回元素的高度(不包括内边距、边框、或外边距)

3通过JQUERY获取元素的宽高

滑动窗口-Slide windows
slideToggle=SlideUp+SlideDown的效果