首页 > Web开发 > 详细

jquery的effect-color对easyui没效果.自己冒险写个边框的颜色闪烁.

时间:2015-11-30 09:54:25      阅读:311      评论:0      收藏:0      [点我收藏+]
"jquery-ui-effect-color.js" 是从jqueryui下载的color动画部分(自己改了个名字). 链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color animate 02.</title>
    <link rel="stylesheet" href="../libs/jquery-easyui-1.4.2/themes/default/easyui.css">
    <script type="text/javascript" src="../libs/jquery/1.11.1/jquery.js"></script>
    <script type="text/javascript" src="../libs/jqueryui/1.11.4/jquery-ui-effect-color.js"></script>
    <script type="text/javascript" src="../libs/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>

    <style>
        #div1 {
            background-color: blue;
            color: #ffffff;
            width: 500px;
        }
        .dg-blink-border-1 {
            border: 3px solid red;
        }
        .dg-blink-border-2 {
            border: 3px solid yellow;
        }
    </style>
    <script>
        function myblink(){this.sec=0;}
        myblink.prototype = {
            delay: function(func, time){
                this.sec += time;
                setTimeout(func, this.sec);
                return this;
            },
            toggle: function(fa,fb,s,num){
                for(var i=0;i<num;i++){
                    this.delay(fa,s).delay(fb,s);
                }
                return this;
            },
            log: function(){}
        }
        $(function(){
            var state = true, state2 = true;
            $(‘#btn‘).click(function(){
                if(state){
                    $(‘#div1‘).animate({
                        backgroundColor: ‘yellow‘,
                        color: ‘#000000‘,
                        width: 240
                    },1000);
                }else{
                    $(‘#div1‘).animate({
                        backgroundColor: ‘blue‘,
                        color: ‘#ffffff‘,
                        width: 500
                    },1000);
                }
                state = !state;
            });

            $(‘#btn2‘).click(function(){
                var tar = $(‘#dg‘).parents(‘div[class*="panel datagrid"]‘);

                var a = function(){
                    tar.removeClass(‘dg-blink-border-2‘);
                    tar.addClass(‘dg-blink-border-1‘);
                };
                var b = function(){
                    tar.removeClass(‘dg-blink-border-1‘);
                    tar.addClass(‘dg-blink-border-2‘);
                };
                var c = function(){
                    tar.removeClass(‘dg-blink-border-1‘);
                    tar.removeClass(‘dg-blink-border-2‘);
                };
                new myblink().toggle(a,b,300,7).delay(c,100);
            });

            $(‘body‘).append(‘<br/>‘);
            $(‘body‘).append(‘<br/>‘);
            $(‘body‘).append(‘<div id="{1}"></div>‘.replace(‘{1}‘,‘dg‘));
            $(‘#dg‘).datagrid({
                title:‘表格‘,
                width: 600,
                height: 200,
                singleSelect: true,
                columns:[[
                    {field:‘code‘,title:‘Code‘,width:‘33%‘},
                    {field:‘name‘,title:‘Name‘,width:‘30%‘},
                    {field:‘price‘,title:‘Price‘,width:‘33%‘,align:‘right‘}
                ]]
            });
            var dgdata = [];
            for(var i=0;i<8;i++){
                var row = {};
                row[‘code‘]=‘code00‘+(i+1);
                row[‘name‘]=‘name00‘+(i+1);
                row[‘price‘]=‘1000‘*(i+1);
                dgdata.push(row);
            }
            $(‘#dg‘).datagrid(‘loadData‘,dgdata);
        });
    </script>
</head>
<body>

    <div id="div1">
        你好,欢迎光临!请随意!窗前明月光,疑是地上霜.举头望明月,低头思故乡.日照香炉生紫烟,遥看瀑布挂前川.飞流直下三千尺,疑是银河落九天.
    </div>
    <br>
    <input type="button" id="btn" value="点击"/>   
    <input type="button" id="btn2" value="点击"/>

</body>
</html>

  

 

jquery的effect-color对easyui没效果.自己冒险写个边框的颜色闪烁.

原文:http://www.cnblogs.com/juedui0769/p/5006308.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!