软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> 10分钟 -> 正文阅读

[Web前端]10分钟


1.show()和hide()方法显示和隐藏元素


1.show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])

参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
例:调用show()或hide()方法显示或隐藏正文:
div
{
    margin: 10px 0px;
    border: solid 1px #ccc;
    width: 280px;
}
ul
{
    list-style-type: none;
    padding: 5px;
    margin: 0px;
    display: none;
}
li
{
    margin: 3px;
}
h4
{
    background-color: #eee;
    padding: 5px;
    margin: 0px;
}
 <h3>使用show()和hide()方法显示和隐藏元素</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li></li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").show();
                        $("#hidval").val(1);
                    } else {
                        $("ul").hide();
                        $("#hidval").val(0);
                    }
                });
            });
        </script>

[img]http://img.blog.csdn.net/20160403081655745[img]http://img.blog.csdn.net/20160403081703042
2.动画
在上面,调用show()和hide()方法仅是实现的元素的显示和隐藏功能,如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏,同时,如果添加了方法的回调函数,它将在显示或隐藏执行成功后被调用。
例:同上面,加上动画:
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").show(1000,function(){
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").hide(1000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>

[img]http://img.blog.csdn.net/20160403081949090,可以看到慢慢下拉。

2..toggle()方法实现动画切换效果


上面我们学过实现元素的显示与隐藏需要使用hide()与show(),那么有没有更简便的方法来实现同样的动画效果呢?
调用toggle()方法就可以很容易做到,即如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是:
$(selector).toggle(speed,[callback])

其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
例:调用toggle()方法实现“内容”部分的动画显示和隐藏之间的切换:
 <h3>toggle()方法的动画切换效果</h3>
        <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">显示</span>
            </h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li></li>
            </ul>
        </div>

        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").toggle(1000,function(){
                     $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
                    })
                });
            });
        </script>
div
{
    margin: 10px 0px;
    border: solid 1px #ccc;
    width: 280px;
}
ul
{
    list-style-type: none;
    padding: 5px;
    margin: 0px;
    display: none;
}
li
{
    margin: 3px;
}
h4
{
    background-color: #eee;
    padding: 5px;
    margin: 0px;
    height: 23px;
    line-height: 23px;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}

[img]http://img.blog.csdn.net/20160403082544483[img]http://img.blog.csdn.net/20160403082551421

3.使用slideUp()和slideDown()方法的滑动效果


可以使用slideUp()和slideDown()方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为:
$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])

其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。
要注意的是:slideDown()仅适用于被隐藏的元素;slideup()则相反。
例:分别调用slideUp()和slideDown()方法实现指定“内容”元素的滑动显示效果:
 <h3>使用slideUp()和slideDown()方法的滑动效果</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li></li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").slideUp(1000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").slideDown(1000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>

[img]http://img.blog.csdn.net/20160403083150517

4.使用slideToggle()方法实现图片“变脸”效果


使用slideToggle()方法可以切换slideUp()和slideDown(),即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为:
$(selector).slideToggle(speed,[callback])

其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
例:调用slideToggle()方法实现“内容”区的滑动切换:
 <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">向下滑</span></h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li></li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").slideToggle(1000,function() {
               $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
                    })
                })
            });
        </script>

[img]http://img.blog.csdn.net/20160403083446908

5.使用fadeIn()与fadeOut()方法实现淡入淡出效果


fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为:
$(selector).fadeIn(speed,[callback])和
$(selector).fadeOut(speed,[callback])

其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。
例:调用fadeIn()和fadeOut()方法实现“标题”下“内容”元素的淡入淡出效果:
<script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").fadeIn(1000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").fadeOut(1000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>

[img]http://img.blog.csdn.net/20160403083803191

6.使用fadeTo()方法设置淡入淡出效果的不透明度


调用fadeTo()方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为:
$(selector).fadeTo(speed,opacity,[callback])

其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。
例:调用fadeTo()方法分别设置三个<span>元素的不透明度:
<h3>使用fadeTo()方法设置淡入淡出效果的不透明度</h3>
        <span class="red"></span><span class="red"></span><span class="red"></span>

        <script type="text/javascript">
            $(function () {
                $("span").each(function (index) {
                    switch (index) {
                        case 0:
                            $(this).fadeTo(1000,0.2);
                            break;
                        case 1:
                            $(this).fadeTo(1000,0.4);
                            break;
                        case 2:
                            $(this).fadeTo(1000,0.6);
                            break;
                    }
                });
            });
        </script>
span
{
    width: 70px;
    height: 70px;
    float: left;
    border: solid 1px #ccc;
    margin: 0px 8px;
}
.red
{
    background-color: Red;
}

[img]http://img.blog.csdn.net/20160403084248224

7.调用animate()方法制作简单的动画效果


调用animate()方法可以创建自定义动画效果,它的调用格式为:
$(selector).animate({params},speed,[callback])

其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。
例:调用animate()方法制作一个渐渐放大的正方体:
<span></span>
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {
                    $("#tip").html("执行完成!");
                });
            });
        </script>

[img]http://img.blog.csdn.net/20160403084742038

8.调用animate()方法制作移动位置的动画


调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。
例:调用animate()方法移动并放大<span>元素:
 <span></span>
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
            });
        </script>

[img]http://img.blog.csdn.net/20160403085104461

9.调用stop()方法停止当前所有动画效果


stop()方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:
$(selector).stop([clearQueue],[goToEnd])

其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
例:调用stop()方法停止正在执行的动画:
<span></span>
        <input id="btnStop" type="button" value="停止" />
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                   $("span").stop();
                    $("#tip").html("执行停止!");
                });
            });
        </script>

[img]http://img.blog.csdn.net/20160403085350431

10.调用delay()方法延时执行动画效果


delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:
$(selector).delay(duration)

其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。
例:调用delay()方法延时正在执行的动画:
<span></span>
        <input id="btnStop" type="button" value="延时" />
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                    $("span").delay(3000);
                    $("#tip").html("正在延时!");
                });
            })
        </script>

[img]http://img.blog.csdn.net/20160403085607870
......显示全文...
    点击查看全文


上一篇文章           查看所有文章
2016-04-03 20:42:32  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年9日历
2017-9-24 16:50:11
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --