http://jqueryui.com/demos/animate/
http://allabout.co.jp/gm/gc/24066/
http://www.tohoho-web.com/html/index.htm
http://openlab.ring.gr.jp/k16/htmllint/index.html
http://oshiete.goo.ne.jp/qa/4147301.html
カラーを変更するサンプルです。
jquery UIを使用しています。
スタートボタンをクリックすると開始します。
ソース。
<button id="colorTest001" style='background-color:buttonface;border:1px solid #676767;color:#181818;cursor:wait;display:block;font-family:"ＭＳ ゴシック","Osaka-mono",monospace;font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;height:50px;letter-spacing:1px;line-height:48px;margin:8px auto;padding:0;text-align:center;text-decoration:none;text-indent:0;text-transform:none;vertical-align:baseline;white-space:nowrap;width:101px;word-spacing:0;word-wrap:normal;'>スタート</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
//<![CDATA[<!--
$(document).ready(function(){try{(function(){
var
maxEventCount = 50,
buttonElem = document.getElementById("colorTest001"),
parentElem = $(buttonElem).parent().get(0),
prepareFlag = true,
eventCount = 0,
getRandTime = function(msec){
return Math.round(Math.random() * msec) + 800;
},
addClickEvent = function(elem){
var backgroundColorTmp = $(elem).parent().css("background-color"),
colorTmp = $(elem).parent().css("color"),
red = Math.floor(Math.random() * 256),
green = Math.floor(Math.random() * 256),
blue = Math.floor(Math.random() * 256),
colorRed = 0, colorGreen = 0, colorBlue = 0,
runtimeFlag = false;
if (typeof backgroundColorTmp === "undefined" || backgroundColorTmp == "")
{
backgroundColorTmp = "transparent";
}
if (typeof colorTmp === "undefined" || colorTmp == "")
{
colorTmp = "#000000";
}
if ((red + green + blue) < 382.5)
{
colorRed = colorGreen = colorBlue = 255;
}
$(buttonElem).click(function(){
if (prepareFlag || runtimeFlag === true)
{
return;
}
runtimeFlag = true;
setTimeout(function(){
$(elem).animate(
{"background-color": "rgb(" + red + "," + green + "," + blue + ")",
"color": "rgb(" + colorRed + "," + colorGreen + "," + colorBlue + ")"},
{"duration": getRandTime(8000),
"complete": function(){
setTimeout(function(){
$(elem).animate({"background-color": backgroundColorTmp,
"color": colorTmp},
{"duration": getRandTime(8000),
"complete": function(){
runtimeFlag = false;
}});
}, getRandTime(8000));
}});
}, getRandTime(3800));
});
},
noReplaceNodeNameList = [
"#cdata-section",
"#comment",
"#document",
"#document-fragment",
"applet", "audio",
"button",
"canvas", "command",
"details",
"fieldset", "figcaption", "figure", "form",
"iframe", "ilayer",
"layer", "legend",
"map",
"noembed", "noframes", "nolayer", "noscript",
"object", "output",
"progress",
"rb", "rp", "rt", "ruby",
"source", "summary",
"var", "video",
"area",
"base", "basefont", "bgsound", "br",
"col", "colgroup", "comment",
"datalist",
"embed",
"frame", "frameset",
"head", "hr",
"img", "input", "isindex",
"keygen",
"link", "listing",
"meta",
"nextid",
"optgroup", "option",
"param", "plaintext",
"script", "select", "server", "spacer", "style",
"textarea", "title", "track",
"wbr",
"xmp"
],
checkIgnoreNode = function(name){
var ret = false, tag;
if (typeof name === "string")
{
tag = name.toLowerCase();
if ($.inArray(tag, noReplaceNodeNameList) < 0)
{
ret = true;
}
}
return ret;
},
setInheritCss = function(elem){
$(elem)
.css("background-color", $(elem).parent().css("background-color"))
.css("color", $(elem).parent().css("color"))
.css("cursor", $(elem).parent().css("cursor"))
.css("font-family", $(elem).parent().css("font-family"))
.css("font-size", $(elem).parent().css("font-size"))
.css("font-style", $(elem).parent().css("font-style"))
.css("font-variant", $(elem).parent().css("font-variant"))
.css("font-weight", $(elem).parent().css("font-weight"))
.css("letter-spacing", $(elem).parent().css("letter-spacing"))
.css("line-height", $(elem).parent().css("line-height"))
.css("margin", "0")
.css("padding", "0")
.css("text-decoration", $(elem).parent().css("text-decoration"))
.css("text-indent", $(elem).parent().css("text-indent"))
.css("text-transform", $(elem).parent().css("text-transform"))
.css("white-space", $(elem).parent().css("white-space"))
.css("word-spacing", $(elem).parent().css("word-spacing"))
.css("word-wrap", $(elem).parent().css("word-wrap"))
;
},
textSearch = function(currentNode){
var i, x, childNode, wordList, newNode, beforeNode;
for (i = 0; i < currentNode.childNodes.length; i++)
{
if (eventCount >= maxEventCount)
{
return;
}
childNode = currentNode.childNodes[i];
if (childNode.nodeName == "#text" && typeof childNode.nodeValue == "string")
{
wordList = [];
childNode.nodeValue.replace(/([\x00-\x20\u3000]*)([^\x00-\x20\u3000]+)([\x00-\x20\u3000]*)/g, function(){
var data, x;
for (x = 1; x <= 3; x++)
{
data = null;
if (x == 1 || x == 3)
{
if (typeof arguments[x] == "string" && arguments[x].length > 0)
{
data = {"type": "space", "value": arguments[x]};
}
}
else
{
data = {"type": "word", "value": arguments[x]};
}
if (data !== null)
{
wordList.push(data);
}
}
});
beforeNode = childNode;
for (x = 0; x < wordList.length; x++)
{
if (wordList[x].type == "space" || eventCount >= maxEventCount)
{
newNode = document.createTextNode(wordList[x].value);
$(beforeNode).after(newNode);
}
else
{
newNode = document.createElement("span");
$(beforeNode).after(newNode);
$(newNode).text(wordList[x].value);
setInheritCss(newNode);
addClickEvent(newNode);
eventCount++;
}
beforeNode = newNode;
i++;
}
currentNode.removeChild(childNode);
i--;
}
else
{
if (checkIgnoreNode(childNode.nodeName))
{
textSearch(currentNode.childNodes[i]);
}
}
}
};
textSearch(parentElem);
prepareFlag = false;
$(buttonElem).css("cursor", "pointer");
})();}catch(e){}});
//-->]]>
</script>
0 件のコメント:
コメントを投稿