我需要在下面链接中动态生成的div上默认添加闪烁效果(无需单击div)。
演示: http://jsfiddle.net/ramapriya/xeYnv/1/
演示: http://jsfiddle.net/ramapriya/xeYnv/1/
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
var columns = 40,
container = $("#container"),
width = (100 / columns);
$("head").append("<style>.col { width: " + width + "%;} .row { height: " + width + "% }</style>");
for (var ii = 0; ii < columns; ii++) {
var $row = $("<div />", {
class: "row"
});
container.append($row);
for (var i = 0; i < columns; i++) {
var $col = $("<div />", {
class: "col",
style: "background: " + get_random_color() + ";",
id: ii + "-" + i
});
$row.append($col);
}
}
$("div.col").click(function() {
alert(this.id + " " + $(this).html());
});
#container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.col {
display: inline-block;
outline: 1px solid purple;
overflow: hidden;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>