• JavaScript-Tool-lhgDialog:动画示例-源代码


    ylbtech-JavaScript-Tool-lhgDialog:动画示例-源代码
    1.返回顶部
    1、
    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>动画示例 - lhgDialog窗口组件 lhgdialog弹出窗口</title>
        <meta name="keywords" content="lhgdialog,dialog,弹出窗口,js窗口,js弹出窗口,js库,对话框,alert,提示,警告,确认,提问,ajax,tip,confirm,open,prompt,lhgcore,javascript,jquery,window,clientside,control,open source,LGPL,dhtml,html,xhtml,plugins" />
        <meta name="description" content="lhgdialog是一功能强大的简单迷你并且高效的弹出窗口插件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+." />
        <link href="/css/common.css" type="text/css" rel="stylesheet" />
        <link href="/css/prettify.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="/js/prettify.js"></script>
        <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="/js/lhgdialog.min.js"></script>
        <script type="text/javascript" src="/js/demo.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <div class="hd_logo"><a href="/index.html">lhgDialog弹窗提示窗口组件</a></div>
                <div class="hd_nav">
                    <a href="/index.html">首页</a> | <a href="/api/">API文档</a> | <a href="/demo/">基础示例</a> | <a href="/value/">传值示例</a> | 动画示例 | <a href="/frameset/">框架示例</a>
                </div>
            </div>
            <div class="line">&nbsp;</div>
            <div class="cbody">
                <h2>ajax扩展示例</h2>
                <p>注:本页面中的示例使有的动画和ajax部分方法都使用jQuery库中相关的方法,所以使用本页面中的示例必须加载jQuery库,而独立版本的lhgDialog窗口组件不支持动画和ajax。</p>
                <ol>
                    <li>
                        <h3>AJAX高级应用:执行HTML片段中标准script的标签</h3>
                        <p>备注:HTML片段中的<span style=" padding:1px; margin:0 3px; color:#03C; background:#F8F8F8">&lt;script type="<span style="color:#090">text/javascript</span>"&gt;&lt;/script&gt;</span>标签包裹的javascript将会在窗口内容加载后执行。<br />注:独立版本的组件里不支持ajax调用,你得单独写ajax调用代码。</p>
                        <p>(本例子使用了AJAX,需要在服务器上运行。可打开 <a href="content/login.html" target="_blank">content/login.html</a> 查看源码中的自定义脚本)</p>
    <pre class="prettyprint" id="demo_api_8">
    var api = $.dialog({id:'L1360'});
    
    /* jQuery ajax */
    $.ajax({
        url:'content/login.html',
        success:function(data){
            api.content(data);
        },
        cache:false
    });
    </pre>
                        <p><button class="runcode" name="demo_api_8">运行»</button></p>
                    </li>
                </ol>
                <p>
                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <ins class="adsbygoogle"
                         style="display:inline-block;728px;height:90px"
                         data-ad-client="ca-pub-9761122628191004"
                         data-ad-slot="2248956816"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </p>
                <h2>动画扩展演示</h2>
                <p>备注:<em style="color:#f00;font-style:normal;">动画部分只能在加载了jQuery库文件下才能使用,独立版本的lhgDialog组件不支持动画效果。</em></p>
                <ol>
                    <li>
                        <h3>向上逐渐透明关闭窗口</h3>
                        <p></p>
    <pre class="prettyprint" id="demo_animate_1">
    $.dialog({content:'向上逐渐透明关闭窗口',time:3,close:function(){
        var duration = 400, /*动画时长*/
            api = this,
            opt = api.config,
            wrap = api.DOM.wrap,
            top = $(window).scrollTop() - wrap[0].offsetHeight;
        
        wrap.animate({top:top + 'px', opacity:0}, duration, function(){
            opt.close = function(){};
            api.close();
        });
        
        return false;
    } });
    </pre>
                        <p><button class="runcode" name="demo_animate_1">运行»</button></p>
                    </li>
                    <li>
                        <h3>右下脚滑动通知</h3>
                        <p></p>
    <pre class="prettyprint" id="demo_animate_2">
    /* 扩展窗口外部方法 */
    $.dialog.notice = function( options )
    {
        var opts = options || {},
            api, aConfig, hide, wrap, top,
            duration = opts.duration || 800;
        
        var config = {
            id: 'Notice',
            left: '100%',
            top: '100%',
            fixed: true,
            drag: false,
            resize: false,
            init: function(here){
                api = this;
                aConfig = api.config;
                wrap = api.DOM.wrap;
                top = parseInt(wrap[0].style.top);
                hide = top + wrap[0].offsetHeight;
                
                wrap.css('top', hide + 'px')
                .animate({top: top + 'px'}, duration, function(){
                    opts.init && opts.init.call(api, here);
                });
            },
            close: function(here){
                wrap.animate({top: hide + 'px'}, duration, function(){
                    opts.close && opts.close.call(this, here);
                    aConfig.close = $.noop;
                    api.close();
                });
                
                return false;
            }
        };
        
        for(var i in opts)
        {
            if( config[i] === undefined ) config[i] = opts[i];
        }
        
        return $.dialog( config );
    };
    
    /* 调用示例 */
    $.dialog.notice({
        title: '商业定制',
         220,  /*必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致lhgDialog收缩 */
        content: '若需要商业定制,记得联系我噢',
        time: 5
    });
    </pre>
                        <p><button class="runcode" name="demo_animate_2">运行»</button></p>
                    </li>
                    <li>
                        <h3>摇头效果</h3>
                        <p></p>
    <pre class="prettyprint" id="demo_animate_3">
    /* 下面的代码为组件扩展方法 */
    $.dialog.fn.shake = function()
    {
        var style = this.DOM.wrap[0].style,
            p = [4, 8, 4, 0, -4, -8, -4, 0],
            fx = function(){
                style.marginLeft = p.shift() + 'px';
                if(p.length &lt;= 0){
                    style.marginLeft = 0;
                    clearInterval(timerId);
                }
            };
        p = p.concat(p.concat(p));
        timerId = setInterval(fx, 13);
        return this;
    };
    /* 调用方法演示 */
    $.dialog({
        id:'shake-demo',
        title:'登录',
        content:'帐号:&lt;input type="text" value="guest" style="margin:5px 0;" /&gt;&lt;br /&gt;'
            + '密码:&lt;input id="login-pw" type="text" value="****" /&gt;',
        lock:true,
        fixed:true,
        ok:function(){
            var pw = document.getElementById('login-pw');
            pw.select();
            pw.focus();
            this.shake();
            return false;
        },
        okVal:'登录',
        cancel:function(){}
    });
    </pre>
                        <p><button class="runcode" name="demo_animate_3">运行»</button></p>
                    </li>
                </ol>
            </div>
            <div class="line">&nbsp;</div>
            <div class="footer">
                <div class="ft_copy">
                    Copyright © 2013-2020 <a href="http://www.lhgdialog.com/" target="_blank">www.lhgdialog.com</a>. All rights reserved.
                    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_5759176'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s17.cnzz.com/stat.php%3Fid%3D5759176%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
                </div>
            </div>
            <script type="text/javascript" src="//js.users.51.la/20198835.js"></script>
        </div>
        <script type="text/javascript">prettyPrint();</script>
        </div>
    </body>
    </html>
    2、
    2.返回顶部
     
    3.返回顶部
     
    4.返回顶部
     
    5.返回顶部
     
     
    6.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Verdi 看波形常用快捷操作
    Tensorflow系列——Saver的用法
    Verilog-分频器
    (原创)列主元Gauss消去法的通用程序
    冒泡排序算法
    ADC 与实际电压值的关系
    直流耦合 交流耦合 耦合
    当前不会命中断点,源代码与原始版本不同
    示波器触发
    在头文件#pragma comment(lib,"glaux.lib");编译器提示waring C4081: 应输入“newline“
  • 原文地址:https://www.cnblogs.com/storebook/p/13324418.html
Copyright © 2020-2023  润新知