Web实训知识点_0409

她多久没说话

于 2019-04-12 22:31:25 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/weixin_44762317/article/details/89261658

版权

一.jQuery的滑动效果
实现方法：#slide与#panel
案例代码如下：

<style>
      #slide,#panel{
          padding: 5px;
          text-align: center;
          background-color: #33b5e5;
          border: solid 1px red;
      }
      #panel{
          display: none;
          padding: 40px;
      }
  </style>
    <script>
    $(document).ready(function(){
       $("#slide").click(function(){
       $("#panel").slideToggle()
    })
    })
    </script>
</head>
<body>
<div id = "slide"> 点我滑动或者隐藏</div>
<div id = "panel"> hello</div>
</body>

二.jQuery的显示隐藏效果
实现方法：hide（）与show（）
案例代码如下：

$(document).ready(function(){
        $("#button1").click(function(){
           $ ( "p").hide(500,function(){
               alert("隐藏完成")
           })
        })
        $("#button2").click(function(){
            $( "p").show(200,function(){
                alert("显示成功")
            })
        })

三.jQuery的动画效果
实现方法：animate（）
案例代码如下：

右移50

<head>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left:"20px"},1000,function(){
                $("div").css({background:"yellow"})
            })
        })
    })
    </script>
</head>

<body>
<button>开始动画</button>
<p>默认情况下，所以的HTML元素有一个静态的位置，且是不可移动的，如果需要改变，那么需要将元素的position的属性设置为：absolute，relatIve，fixed；</p>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>

操作多个属性

<input type="button" value="开始动画" id="button">
<div style="background-color:red; height:100px;width:100px;position:absolute"></div>
<script>
       $(document).ready(function(){
          $("#button").click (){
             $("div").animate({
               left:"200px",opacity:‘o.5’,height:'160px',width:'160px'
 
             })    
 
      }) 
                 
 })

注：在使用camel标记法书写所有的属性名的时候，可以用animate（）方法操作所有的CSS属性！

使用相对值

   <script>
        $(document).ready(function(){
            $("#button").click(function(){
                $("div").animate({
                    left:"200px",opacity:'0.5',height:'160px',width:'160px'
                })
            })
        })
   </script>

使用队列功能

  <script>
        $(document).ready(function(){
            $("#button").click(function(){
                var div= $("div")
                div.animate({height:"160px" ,opacity:"0.5"},1000)
                div.animate({fontSize:"2px" },1000)
                div.animate({width:"160px" ,opacity:"0.9"},1000)
                div.animate({height:"100px" ,opacity:"0.5"},1000)
                div.animate({height:"100px" ,opacity:"0.9"},1000)
                div.animate({fontSize:"10px" },1000)
            })
        })
    </script>
</head>
<body>
<input type="button" value="开始动画" id="button">
<div style="background-color: red;height: 100px;width: 100px;position: absolute">hello world</div>
</body>

四.jQuery的暂停效果

<script>
        $(document).ready(function(){
            $("#button").click(function(){
                var div= $("div")
                div.animate({height:"160px" ,opacity:"0.5"},1000)
                div.animate({fontSize:"2px" },1000)
                div.animate({width:"160px" ,opacity:"0.9"},1000)
                div.animate({height:"100px" ,opacity:"0.5"},1000)
              17:01 2019/4/9  div.animate({height:"100px" ,opacity:"0.9"},1000)
                div.animate({fontSize:"10px" },1000)
            })
   $("#button1").click.(function(){
               $("div").stop()
            })
        })
    </script>
</head>
<body>
<input type="button" value="开始动画" id="button">
<input type="button" value="暂停动画" id="button1">
<div style="background-color: red;height: 100px;width: 100px;position: absolute">hello world</div>
</body>

五. jQuery———链（chaining）
特点：浏览不用多次去查找相同的元素。即发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。

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

Eg:将css(), slideUp(), and slideDown() 链接在一起。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动。

她多久没说话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点_0409

一.jQuery的滑动效果实现方法：#slide与#panel案例代码如下：<style> #slide,#panel{ padding: 5px; text-align: center; background-color: #33b5e5; border: solid 1px red;...
复制链接

扫一扫