jQuery 中的效果应用（1）

terryfeng

浏览: 506858 次
性别:
来自: 北京

最近访客更多访客>>

fengruitao

zjx128

slingling

星海孤舟

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

[随笔分类][10] jQuery & javaScript

jQuery CSS JavaScript XHTML HTML

使用的jQuery可以很容易的应用JavaScript动画，下面的例子演示了常用的操作，请复制下面的例子调试，并参照注释

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

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

    <style  type="text/css">
        .hover
        {
            cursor: pointer; /*小手*/
            background: #ffc; /*背景*/
        }
        #switcher
        {
            position: relative; /*相对定位否则，移动位置是无效的，默认是Static*/
        }
        .label
        {
            width: 130px;
        }
        .button
        {
            width: 140px;
            padding: 5px;
            margin: .5em 0;
            border: 1px solid #e3e3e3;
            position: relative; /*相对定位否则，移动位置是无效的，默认是Static*/
        }
        #brave
        {
            position: relative; /*相对定位否则，移动位置是无效的，默认是Static*/
        }
        .more
        {
            color: Red;
        }
    </style>

    <script type="text/javascript">
        //下面懂得功能是点击“更多”显示第二段内容
        $(document).ready(function() {
            $('p:eq(1)').hide(); //首先初始化先隐藏第二段p:eq(1)第二个p标记
            $('span.more').click(function() {
                // 如何显示第二段

                //$('p:eq(1)').show('speed');
                //$('p:eq(1)').show('slow');
                //$('p:eq(1)').fadeIn('slow'); //透明度

                //antimate(一对一对的样式属性和值,动画速度,缓动,回调函数)
                $('p:eq(1)').animate({ height: "show", width: "show", opacity: "show" }, 'slow', function() { alert('贺词已经打开'); }); //（显示高度，显示宽度，显示不透明度，速度0.6秒，未填，返回函数）

                $(this).hide(); //隐藏“更多”按钮
            });
        });

        //下面代码的功能是单击按钮改变字体的大小
        $(document).ready(function() {
            $('div.button').click(function() {
                var $speech = $('div.speech'); //获得div，$speech 中的$符号没有任何特别的意义只是用来标记这个变量里面是一个对象
                var currentSize = $speech.css('fontSize'); //获得尺寸，备注：返的值中包含单位，比如：30px 这样需要分离
                var num = parseFloat(currentSize, 10); // 获得值，parseFloat的功能是获得以数字开头的字符串的数值部分，第二个参数代表十进制
                var unit = currentSize.slice(-2); //获得值的单位，slice(-2)为获得从倒数第二个开始的子字符串
                if (this.id == 'switcher-large') {  //判断是那个按钮
                    num *= 1.4;
                } else if (this.id == 'switcher-small') {
                    num /= 1.4;
                }
                $speech.css('fontSize', num + unit); //使用的是驼峰标记，右侧的值经过合并
            });
        });

        //点击标签类label -“按钮移动”
        $(document).ready(function() {
            $('div.label').click(function() {
                var paraWidth = $('div.speech p').width(); // 获得宽度
                var $button = $('div.button');  //
                var buttonWidth = $button.width();  //
                var paddingRight = $button.css('paddingRight');  //
                var paddingLeft = $button.css('paddingLeft');  //
                var borderRightWidth = $button.css('borderRightWidth');  //
                var borderLeftWidth = $button.css('borderLeftWidth');  //parseInt（）为返回字符串右侧开始的整数值
                var totalButtonWidth = parseInt(buttonWidth, 10) + parseInt(paddingRight, 10) + parseInt(paddingLeft, 10) + parseInt(borderRightWidth, 10) + parseInt(borderLeftWidth, 10); //计算标签按钮的宽度
                alert('按钮宽度：' + totalButtonWidth);
                var rightSide = paraWidth - totalButtonWidth; //总宽度-152，是移动到的右侧位置

                $button.animate({ 'left': rightSide, height: 38 }, 'slow');  //（动画，速度）并发两种效果1位置，2高度
            });
        });

        //当点击H2标签时候的效果--“jQuery中的动态效果应用(所有小手指针都可以点击)”
        //排队效果方法，一个接着一个的实现
        $(document).ready(function() {
            $('h2').click(function() {
                $('div.button')
                  .fadeTo('slow', 0.5, function() { $(this).css('backgroundColor', '#fff'); }) // 设置不透明度为50%，随后对非效果方法，进行排列使用
                  .animate({ left: 650 }, 'slow') // 移动位置
                  .fadeTo('slow', 1.0, function() { $(this).css('backgroundColor', '#f00'); }) // 设置不透明度为100%,随后对非效果方法，进行排列使用
                  .slideUp('slow', function() { alert("按钮已经被隐藏"); });  //由下自上的减小高度隐藏元素

            });
        });

        //排列非效果方法，使用回调函数
        $(document).ready(function() {
            $('p:eq(3)').css('backgroundColor', '#fcf').hide(); //初始化设备背景色并隐藏
            $('p:eq(2)').css('backgroundColor', '#cff').click(function() {  //设置背景色并设置单击事件
                var $thisPara = $(this); //保存这个元素，方便随时使用，这点很重要，否则会出现意想不到的对象调用
                $thisPara.next().slideDown('slow', function() { //1向下打开他的下一个元素
                $thisPara.slideUp('slow'); //2向上收起他自己，这个函数将在slideDown执行完后执行
                });
            });
        });

        // 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
        $(document).ready(function() {
            $('h2, div.button, div.label, span.more, p:eq(2)').hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <h2>
            jQuery中的动态效果应用(所有小手指针都可以点击)</h2>
        <div id="switcher">
            <div class="label">
                按钮移动</div>
            <div class="button" id="switcher-large">
                字体加大</div>
            <div class="button" id="switcher-small">
                字体减小</div>
        </div>
        <div class="speech">
            <br />
            冯瑞涛祝愿您和家人：
            <p>
                欢欢喜喜迎新年，万事如意平安年，扬眉吐气顺心年，事业成功辉煌年，合家欢乐幸福年，身体健康万万年！<span class="more">更多</span></p>
            <p>
                盈盈相思，温馨祈愿，祝你春节快乐。愿春节的欢声笑语和欢乐气氛永远萦绕着你。新年快乐！事业有成！不需要多么贵重的礼物，也不需要多么郑重的誓言，我只需要你一个甜甜的微笑，作为我新年最珍贵的礼物。
                春节的祝福，平日的希冀，愿你心境祥和、充满爱意，愿你的世界全是美满，愿你一切称心如意，快乐无比。春节树上的雪花，悄然无声地飘落，远处悠扬的钟声，开启着你我的心扉，让幸福洒满人间。朋友，新年好！
                好久没有听到你的声音，好久没有人听我谈心，在雪花飞舞的日子里，真的好想你，祝新年快乐，牛年吉祥！江湖中人，游子之心，春节恭祝，事业有成，事事顺利！新年进步！一路走过的朋友，我永远真诚祝福着你！
                新年祝福语:牛年的钟声在天地间激起深沉而宏大的回音，让我们的震天的爆竹声中，以美好的祝愿共同迎接另一个春天！
            </p>
            <p>
                鸿运滚滚来，四季都发财。新年好事多，幸福喜颜开。步步再高升，事事顺着来。老友多联系，莫将我忘怀！</p>
            <p>
                新年大吉！收集我心中的每一份祝福，每一种愿望，描绘我心中的每一道细节，每一个企盼，寄予你深切的关怀。新年祝福语:新年快乐！万事大吉！合家欢乐！财源广进！恭喜发财！工作顺利！爱情甜蜜！吉祥如意！四通八达！福运齐至！
                春节祝福短信:愿所有的期许及祝福涌向你，让你的佳节洋溢着喜悦，更祈望你一年比一年更加璀璨美好。新年快乐，牛年进步！
            </p>
        </div>
    </div>
    </form>
</body>
</html>

分享到：

Internet Explorer 8 （IE8） RC1 简体中 ... | 一次从GridView 获得多个指定行中多个指定 ...

2009-01-26 15:31
浏览 1047
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论