作业

最新推荐文章于 2022-10-03 13:48:50 发布

细看猥琐猴

最新推荐文章于 2022-10-03 13:48:50 发布

阅读量113

点赞数

分类专栏：作业

作业专栏收录该内容

5 篇文章 0 订阅

订阅专栏

作业用jq改CSS二级菜单样式。

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>jq实现二级才拉菜单动画效果</title>
    <script src="jquery.1.8.3min.js"></script> 
    <style>  
        a{color: white;text-decoration: none;}  
        nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;cursor: pointer;}  
        nav li a{display:block;}  
        nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}  
    </style>
    <script>
    $(function(){
        $('.has_menu').hover(function(){
        $(this).find('ul').slideDown("1500");
    },function(){
        $(this).find('ul').slideUp("fast");
    });
    })
    
    </script>  
</head>  
<body>  
    <nav>  
        <li class="has_menu"><a href="">菜单一</a>  
            <ul>  
                <a href="">下拉菜单1</a>  
                <a href="">下拉菜单1</a>  
                <a href="">下拉菜单1</a>  
                <a href="">下拉菜单1</a>  
                <a href="">下拉菜单1</a>  
            </ul>  
        </li>  
        <li  class="has_menu"><a href="">菜单二</a>  
            <ul>  
                <a href="">下拉菜单2</a>  
                <a href="">下拉菜单2</a>  
                <a href="">下拉菜单2</a>  
                <a href="">下拉菜单2</a>  
                <a href="">下拉菜单2</a>  
            </ul>  
        </li>  
        <li><a href="">菜单三</a></li>  
        <li><a href="">菜单四</a></li>  
        <li><a href="">菜单五</a></li>  
    </nav>  
</body>  
</html>

jq的使用加入jq庫文档就绪（需要写一个函数 $document），ready（function（{}））相当于$ function（）{}），
基本语法，$=jq
$(e = s e l e c t) . a c t i o n = = = j u e r y (s e l e c t) . a c t i o n () 推荐用$ 符号
var jqurey=function（）{}
jquery（）=$（）

css添加样式，

eg：$（‘p’）.css(‘background-color’:‘red’)。
只有一个属性值的时候
有多个属性：值得时候 —（background-color：‘red’，）

推荐

常用事件方法
1.元素选择器：基于元素名=名称选取元素
2.id选择器通过html元素的id属性选取指定的元素
3.类选择器通过指定的class查找元素
4.css选择器用于改变html元素的css属性
其他选择器选取所有元素
选取ul下的li元素
我们可以通过jq选择器可以选择html的所有元素。

获取内容
text（）设置或返回元素的文本内容。
html（）获取元素的所有内容包括元素标签。
val（）获取表单的值只能获取（input）。

jq的基础动画
实现基础菜单

1.jqury动画效果，隐藏和显示。

两个方法hide（），show（）。
两个按钮
通过使用hide（）或show（）方法来隐藏或显示html
speed规定隐藏和显示的速度，取值为‘show’，‘fast’，毫秒，
callback参数，是隐藏或显示完成后

toggle（）方法
切换hide（）和show（）方法
$(selector).hide(speed.callback)
$(selector).show(speed.callback)

$("#button3").click(function(){
$(“p”).toggle(1000.function(){
$(“p”).css({color:“yellow”})
})

})

slide,点击滑动显示或者隐藏面板
两个方法slidedown（），slideup（），slidetoggle（）

第三个动画效果

通过animate():使用相对值

1.用于创建自定义的动画
语法：$(selector),animate({params},speed,callback)
必须使用params参数定义形成动画的CSS属性
可选参数和上面的几个方面相同
eg：

默认情况下html有一个静态的位置，且是不可移动的，如果需要改变，那么需将元素position属性设置为absolute、relative、fixed
通过animate，把

$(document).ready(function(){
$("#button").click(function(){
$(“div”).animate({
left:“200px”,opacity:“0.5”,height:‘160px’,width:‘160px’},1000,function(){
alert(“动漫执行完成”)

})

})

})
是否可以用animate（）方法来操作所有的CSS属性？？
？
几乎可以，但需记住，当使用animate()方法的时候，必须使用camel标记法书写所有的属性法。eg：css

使用队列功能，如果在彼此之后编写多个animate()调用jquery，Jquery会创建包含这些方法的调用的内部队列然后逐一运行这些

停止动画stop用于在动画完成前对他进行停止。
暂停动画，那么效果$(’’),暂停队列中的一个动画，如果队列中有多个动画，那么暂停该动画然后系统会执行后面的动画，stop是这样。
然后系统会执行后面的动画。

world

二级菜单的实现

jquery-----链（chaining）
通过jquery 可以把方法，链接到一起。chaining允许我们在一条语句中运行多个jquery方法。
(在相同的元素上)

$("#p1").css({"‘color’:red"}).slipeUp(1500).slipeDown(1500).animate({backgroundcolor:"blue},1000)
意思：#p1 元素首先会红，然后向上以1.5秒的移动的速度移动，然后向下以1.5秒的速度移动。
。获取一个p标签通过CSS将颜色改成，向上滑动。background-color，blue给他一个速度。
意思就是#P1首先会变红，向上移1.5秒的速度，移动然后向下移1.5s的速度移动最后，将背景颜色变为蓝色。如果不用链，写法，在animate
链式的有点。浏览器不用多次去查找相同的元素

$("#p1").css({‘color:red’})
$("#p1").slideUp(1500)
$("#p1").css({‘color:red’})
$("#p1").animate({“backgroundColor”:blue},1000)

Chaining 的优点
浏览去不多多次查找相同的元素

细看猥琐猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作业

作业用jq改CSS二级菜单样式。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq实现二级才拉菜单动画效果</title> <script src="jquery.1.8.3min.js...
复制链接

扫一扫