您的位置：首页 > Web前端 > JQuery

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

2015-11-30 09:28 627 查看

"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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航