注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

提供“更多……”链接--jQuery事件处理  

2011-02-13 13:57:36|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2011-02-03

l  提供“更多……”链接

知识点:

假设有大块的文本需要显示,为了使屏幕保持整洁,初始时只显示其中的几行文字,连同一个“更多……”链接。当用户选择此链接,才显示文本的其余部分(默认隐藏)。

说明:

show()使指定的隐藏元素可见。

.show(speed, callback)方法:

--speed:定义了动画效果的持续时间,即决定元素是否立即显示或缓慢地显示。速度可以定义为多少毫秒,或预定义的字符串slow,normalfast

--callback:定义了动画完成时调用的函数。

hide()使指定的元素不可见

.hide(speed, callback)方法:见.show(speed, callback)

toggle()方法:此方法为指定的元素附加两个事件处理函数。第一个事件处理函数在事件偶数次发生时被执行,而第二个事件处理函数在事件奇数次发生时被执行。

语法格式:.toggle(handler1, handler2);

fadeIn()通过把元素变为不透明而显示选定的元素。

.fadeIn(speed,callback) 方法:见.show(speed, callback)

fadeout()通过淡出使选定的元素变为不可见

.fadeOut(speed, callback) 方法: .show(speed, callback)

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery事件处理提供“更多……”链接</title>

    <script type="text/javascript" src="rs/js/jquery.js"></script>

    <script type="text/javascript">

    <!--

    $(

        function()

        {

            //隐藏详细信息

            $('#info').hide();

            //更多的单击事件(显示详细信息,隐藏更多)

<!--            $('#more').bind('click',-->

<!--                function()-->

<!--                {-->

<!--                    $('#info').show();-->

<!--                    $(this).hide();-->

<!--                }-->

<!--            );-->

            //更少的实现

            $('#more').toggle(

                function()

                {

                    $('#info').show('slow');

                    $(this).text('更少……');

                },

                function()

                {

                    $('#info').hide('slow');

                    $(this).text('更多……');

                }

            );

            //应用动画效果

<!--            $('#more').toggle(-->

<!--                function()-->

<!--                {-->

<!--                    $('#info').fadeIn('slow');-->

<!--                    $(this).text('更少……');-->

<!--                },-->

<!--                function()-->

<!--                {-->

<!--                    $('#info').fadeOut('slow');-->

<!--                    $(this).text('更多……');-->

<!--                }-->

<!--            );-->

        }

    );

    //-->

    </script>

  </head>

  <body>

    <div>水深则流缓,人贵则语迟 </div>

    <span id="more" style="cursor: hand;">更多……</span>

    <div id="info">

        我们讲长寿,有这麽四种人长寿:第一种,没心没肺的人长寿;第二种,稀里糊涂的人长寿;<br />

       第三种,平静的人长寿;第四种,觉悟者长寿。那麽到底病是怎麽来的?<br />

       有些人整天担心、着急、牵挂、盼望……各种心情都很多,这样的人就符合一个患者字,<br />

       心老往上窜,今天担心孩子,明天跟这个人着急,跟那个人生气,跟那个担心,跟那个害怕……这就得了,<br />

       您准备做患者吧!心平静才能长寿。<br />

    </div>

  </body>

</html>

  评论这张
 
阅读(385)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017