浅入jquery-各种简单的效果[three]

最新推荐文章于 2024-07-02 08:55:42 发布

weixin_34185320

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/73132

版权

前言

在现在的网页建设中效果是非常常用的。
比如说当你鼠标移动到某个地方的时候出现的提示。
当你鼠标点击的时候一些切换的效果。
我相信每个人都不能没有注意这些特效。
因为有了这些效果才能使我们的网页更加的美观，功能更加的丰富。
掌握效果的使用也是非常基础而且有必要的基础课程。

效果种类

1.显示和隐藏。

2.淡入淡出

3.移动

4.动画

显示和隐藏。

简单介绍

显示和隐藏是最基本的效果了。
而且是随处可见的。例如csdn的首页的这里写图片描述

很典型的一个例子。

简单示例

仿照网易邮箱记住密码做的。
主要使用hide和show方法
和html中设置style可见度是一个道理。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("div").mouseenter(function () {
                $("#info").show();
            })
            $("div").mouseleave(function () {
                $("#info").hide();
            })
        })
    </script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div align="center">
        <input type="checkbox" value="一周内免登陆"/><span>一周内免登陆</span>
    </div>
    <p id="info" align="center" style="display: none">xxxxxxxxxxxxxxxxxx</p>
</body>
</html>

浅入浅出

简单介绍

也算是一种显示和隐藏功能，但是可以设置显示和隐藏的速度和透明度。

方法介绍

fadeIn(speed,callback) 可以设置淡入的时间以及callback函数。
fadeOut(speed，callback)可以设置淡出时间和callback函数。
fadeToggle（speed，callback）是上述两个函数的结合体。可以在两种状态之间切换
fadeTo(speed,opacity,callback) 可以设置时间透明度callback函数。

简单示例

和上述的例子基本相同。
只要替换函数名即可。

1.fadeIn和fadeOut

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("div").mouseenter(function () {
                $("#info").fadeIn(1000);
            })
            $("div").mouseleave(function () {
                $("#info").fadeOut(1000);
            })
        })
    </script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div align="center">
        <input type="checkbox" value="一周内免登陆"/><span>一周内免登陆</span>
    </div>
    <p id="info" align="center" style="display: none">xxxxxxxxxxxxxxxxxx</p>
</body>
</html>

2.fadeToggle

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <style>
        .div {
    width: 100px;
  height: auto;
    margin-right: auto;
    margin-left: auto;
}
       .div .div-top {
    height: 100px;
    background-color: #049f3a;
}

.div .div-bottom {
    background-color: aqua;
    height: 200px;
}
    </style>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
         $(document).ready(function () {
            $(".div-top").click(function () {
                $(".div-bottom").toggle(1000);
            });
        });
    </script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div" align="center">
        <div class="div-top">点击我测试</div>
        <div class="div-bottom"></div>

    </div>
</body>
</html>

3.dadeto

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <style>
        .div {
    width: 100px;
  height: auto;
    margin-right: auto;
    margin-left: auto;
}
       .div .div-top {
    height: 100px;
    background-color: #049f3a;
}

.div .div-bottom {
    background-color: aqua;
    height: 200px;
}
    </style>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
         $(document).ready(function () {
            $(".div-top").click(function () {
                $(".div-bottom").fadeTo(1000,0.5);
            });
        });
    </script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div" align="center">
        <div class="div-top">点击我测试</div>
        <div class="div-bottom"></div>

    </div>
</body>
</html>

移动效果

简单介绍

通过移动效果其实和消失移动的功能和和相似。

方法介绍

slideDown() //向下滑动
slideUp() //向上滑动
slideToggle() //向上下滑动的循环

简单示例

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
    //$(".panel").slideUp("slow");
    //$(".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;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>仔细观察</p>
<p>移动过程</p>
</div>

<p class="flip">请点击这里</p>

</body>
</html>

动画

简单介绍

在原来的效果之上加上对属性的一些操作使得如同动画一般。

主要方法

animate({params},speed,callback) //属性集合，速度和回调函数

简单示例

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>

<body>

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

总结

很多效果都需要自己去操作，试着模仿网站中的一些效果。
我相信主要尝试肯定可以成功。

weixin_34185320

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅入jquery-各种简单的效果[three]

前言在现在的网页建设中效果是非常常用的。比如说当你鼠标移动到某个地方的时候出现的提示。当你鼠标点击的时候一些切换的效果。我相信每个人都不能没有注意这些特效。因为有了这些效果才能使我们的网页更加的美观，功能更加的丰富。掌握效果的使用也是非常基础而且有必要的基础课程。效果种类1.显示和隐藏。2.淡入淡出...
复制链接

扫一扫