10/10/2018, 11:20
Share 1 đoạn code jQuery ngắn
Ngày 7 tháng 9, Google có cái logo khá hay
http://www.youtube.com/watch?v=hf_HGQTHKCY
Mình định code 1 cái công cụ sinh ra cái logo giống thế, nhưng mà bắt tay vào code có lẽ hơi lâu, nên mình code tạm 1 đoạn demo trước
Demo: http://hoctudau.com/web-tools/maker/...ke-logo-1.html
Nếu có cỡ 20 bạn hứng thú với cái này thì mình hoàn thiện code này luôn. Nếu cỡ 100 bạn thích thì ....
http://www.youtube.com/watch?v=hf_HGQTHKCY
Mình định code 1 cái công cụ sinh ra cái logo giống thế, nhưng mà bắt tay vào code có lẽ hơi lâu, nên mình code tạm 1 đoạn demo trước
Demo: http://hoctudau.com/web-tools/maker/...ke-logo-1.html
PHP Code:
<html>
<head>
<title>HocTuDau.com - Logo Maker</title>
<style>
body {
background: #ccc;
}
#logo {
background: #fff;
width: 385px;
height: 145px;
position: relative;
margin: 150px auto;
}
#logo div {
-moz-border-radius:160px 160px 160px 160px;
position:absolute;
z-index: 1;
}
.small_size {
width:20px;
height:20px;
}
.medium_size {
width:30px;
height:30px;
}
.large_size {
width:40px;
height:40px;
}
</style>
</head>
<body>
<div id="header">
Sponsored by <a href="http://hoctudau.com/">HocTuDau.com</a>.
</div>
<div id="logo">
</div>
<div id="footer">
<input type="button" value="save" id="save" />
</div>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var colors = new Array('eaa6b0', '698bf1', 'd44d61', 'eb9c31', 'd53747', '10a11d', '3d65e7', '4d7df7');
var s_sizes = new Array('small', 'medium', 'large');
var i_sizes = new Array(20, 30, 40);
var S;
var C;
function randomNum(num) {
return Math.round(Math.random()*(num-1));
}
function randomColor() {
return '#' + colors***91;randomNum(colors.length)***93;;
}
function randomSize() {
len = s_sizes.length;
S = s_sizes***91;randomNum(len)***93;+'_size';
C = i_sizes***91;randomNum(len)***93;;
}
$(function(){
$('#logo').click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
randomSize();
R = Math.round(C/2);
L = x - R;
T = y - R;
s_div = '<div class="' + S + '" style="background:' + randomColor() + '; left: ' + L + 'px; top: ' + T + 'px;"></div>';
$(s_div).appendTo('#logo');
});
$('#save').click(function(){
s = ';
$('#logo div').each(function(){
s += '<div class="' + $(this).attr('class') + '" style="background:' + $(this).css('background-color') + '; left: ' + $(this).css('left') + '; top: ' + $(this).css('top') + ';"></div>
';
});
alert(s);
});
});
</script>
</body>
</html>
Bài liên quan
Demo tại google: http://www.google.com/webhp?gl=us
uh, code cũng chẳng có gì đặc biệt nhưng mất time, mà lại ko ra xiền, nên trừ khi nhiều người thích thì mình mới code, chứ code for fun, code ra ko ai dùng thì tiếc lắm , thà rằng free code, open source nhưng nhiều người dùng vẫn vui hơn.
khổ nỗi ko bít làm, mới nghĩ tới mấy cái công thức vật lý và toán học áp dụng vào thôi đã thấy choáng
http://github.com/robhawkes/google-b...ter/js/main.js
Kết quả của bác này ở đây (sử dụng html5 canvas):
http://rawkes.com/experiments/google...-balls-canvas/
[=========> Bổ sung bài viết <=========]
Link của VnVision cũng dùng canvas
http://rawkes.com/experiments/google...-balls-canvas/
Còn "cu" google ko dùng canvas