当前位置:  编程技术>jquery

jquery实例-jQuery 中的效果应用

    来源: 互联网  发布时间:2014-09-03

    本文导语:  使用的jQuery实现javascript的动画效果     test-jquery                 .hover         {             cursor: pointer; /*小手*/             background: #ffc; /*背景*/         }         #switcher         {...

使用的jQuery实现javascript的动画效果




    test-jquery
   
   
        .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;
        }
   
   
        //下面懂得功能是点击“更多”显示第二段内容
        $(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');
            });
        });
   


   
   


       
            jQuery中的动态效果应用(所有小手指针都可以点击)
       

           

                按钮移动

           

                字体加大

           

                字体减小

       

       

           

            祝愿您和家人:
           


                欢欢喜喜迎新年,万事如意平安年,扬眉吐气顺心年,事业成功辉煌年,合家欢乐幸福年,身体健康万万年!更多


           


                盈盈相思,温馨祈愿,祝你春节快乐。愿春节的欢声笑语和欢乐气氛永远萦绕着你。新年快乐!事业有成! 不需要多么贵重的礼物,也不需要多么郑重的誓言,我只需要你一个甜甜的微笑,作为我新年最珍贵的礼物。
                春节的祝福,平日的希冀,愿你心境祥和、充满爱意,愿你的世界全是美满,愿你一切称心如意,快乐无比。 春节树上的雪花,悄然无声地飘落,远处悠扬的钟声,开启着你我的心扉,让幸福洒满人间。朋友,新年好!
                好久没有听到你的声音,好久没有人听我谈心,在雪花飞舞的日子里,真的好想你,祝新年快乐,牛年吉祥! 江湖中人,游子之心,春节恭祝,事业有成,事事顺利!新年进步!一路走过的朋友,我永远真诚祝福着你!
                新年祝福语:牛年的钟声在天地间激起深沉而宏大的回音,让我们的震天的爆竹声中,以美好的祝愿共同迎接另一个春天!
           


           


                鸿运滚滚来,四季都发财。新年好事多,幸福喜颜开。步步再高升,事事顺着来。老友多联系,莫将我忘怀!


           


                新年大吉!收集我心中的每一份祝福,每一种愿望,描绘我心中的每一道细节,每一个企盼,寄予你深切的关怀。 新年祝福语:新年快乐!万事大吉!合家欢乐!财源广进!恭喜发财!工作顺利!爱情甜蜜!吉祥如意!四通八达!福运齐至!
                春节祝福短信:愿所有的期许及祝福涌向你,让你的佳节洋溢着喜悦,更祈望你一年比一年更加璀璨美好。新年快乐,牛年进步!
           


       

   

   


    
 
 

您可能感兴趣的文章:

  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • 链接渐变效果 jQuery glow
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery定时器插件 jQuery Timers应用示例
  • jQuery中的$.ajax()方法应用
  • JQuery下拉框应用示例介绍
  • jquery的clone方法应用于textarea和select的bug修复
  • jQuery遍历Table应用示例
  • jQuery focus和blur事件的应用详解
  • jQuery中的val()示例应用
  • jQuery的$.proxy()应用示例介绍
  • Jquery焦点与失去焦点示例应用
  • jQuery toggleClass应用实例(附效果图)
  • jQuery新的事件绑定机制on()示例应用
  • jquery中get,post和ajax方法应用举例
  • jquery 鼠标滑动显示详情应用示例
  • JQuery中$.ajax()方法参数详解及应用
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3