circle

转自:http://www.cnblogs.com/meteoric_cry/archive/2011/08/02/2124915.html


http://www.circlehack.com/ (qiang外)是facebook四个工程师通宵一晚上的成果,体验和效果上和Google+中的circle相比还是逊色一些

整个源代码在github上https://github.com/voloko/facebook-circles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>~circlehack~</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
body, html {width: 100%; height: 100%; padding: 0; margin: 0; font-family: arial, sans-serif;}
[draggable] {-webkit-user-drag: element;}


.circle {color: #FFF; width: 125px; height: 125px; position: relative; margin: 35px;}
.circle__disk {border: 1px solid #CCC; border-radius: 200px; position: absolute; width: 124px; height: 124px; top: 50%; left: 50%; margin-left: -62px; margin-top: -62px; z-index: 2; -webkit-transition-property: width, height, margin-left, margin-top; -webkit-transition-duration: 0.3s; -moz-transition-property: width, height, margin-left, margin-top; -moz-transition-duration: 0.3s; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#d7d7d7));}
.circle__disk {background: -webkit-linear-gradient(top, #ededed 0%, #d7d7d7 100%);}
.circle__disk {background: -moz-linear-gradient(top, #ededed 0%,#d7d7d7 100%);}
.circle_full.circle_tmp .circle__disk, .circle_over .circle__disk {width: 170px; height: 170px; margin-left: -85px; margin-top: -85px; background: #e1e1e1;}
.circle__inner {background: #4797cf; border-radius: 70px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.3); border-bottom: 1px solid #FFF; width: 98px; height: 98px; position: absolute; top: 50%; left: 50%; margin-left: -49px; margin-top: -49px; z-index: 3;}
.circle_tmp .circle__inner {background: #FFF;}
.circle__text {position: absolute; z-index: 4; top: 50%; left: 50%; width: 98px; text-align: center; font-size: 13px; margin-top: -13px; margin-left: -49px; color: #999;}
.circle__create {position: absolute; z-index: 4; top: 50%; left: 50%; width: 98px; text-align: center; font-size: 13px; margin-top: -7px; margin-left: -49px; color: #309;}
.circle__create__a {text-decoration: underline; color: #30C; cursor: pointer;}
.circle__create__a:hover {color: #C03;}
.circle_empty .circle__create {display: none;}
.circle_full .circle__text {display: none;}
.circle_tmp .circle__number, .circle_tmp .circle__name {display: none;}
.circle__number {position: absolute; top: 50%; width: 98px; text-align: center; font-size: 16px; margin-top: 5px; opacity: 0.5;}
.circle__name {position: absolute; bottom: 50%; width: 98px; text-align: center; font-size: 13px;}
.circleFriend {position: absolute; left: 50%; top: 50%; border-radius: 30px; z-index: 4; opacity: 0; width: 30px; height: 30px; -webkit-transition-property: opacity; -webkit-transition-duration: 0.3s; -moz-transition-property: opacity; -moz-transition-duration: 0.3s;}
.circle_full.circle_tmp .circleFriend, .circle_over .circleFriend {-webkit-transition-delay: .1s; -moz-transition-delay: .1s; opacity: 1;}
.circle__popup {position: absolute; width: 32px; height: 32px; border-radius: 32px; z-index: 300; left: 50%; top: 50%; margin-top: 40px; margin-left: 60px; -webkit-transition-property: opacity, margin-top, margin-left; -webkit-transition-duration: 0.7s; -moz-transition-property: opacity, margin-top, margin-left; -moz-transition-duration: 1s; opacity: 0; text-align: center; line-height: 32px; color: #FFF; font-size: 15px;}
.circle__popup_red {background: -webkit-gradient(linear, left top, left bottom, from(#d20040), to(#d20040));}
.circle__popup_red {background: -webkit-linear-gradient(top, #d20040 0%, #ae0035 100%);}
.circle__popup_red {background: -moz-linear-gradient(top, #d20040 0%, #ae0035 100%);}
.circle__popup_green {background: -webkit-gradient(linear, left top, left bottom, from(#00d240), to(#00d240));}
.circle__popup_green {background: -webkit-linear-gradient(top, #00d240 0%, #00ae35 100%);}
.circle__popup_green {background: -moz-linear-gradient(top, #00d240 0%, #00ae35 100%);}
.circle__popup_phase1 {margin-top: -60px; margin-left: 30px; opacity: 1;}
.circle__popup_phase2 {opacity: 0;}

#test {margin:100px;}
button {width:100px; height:32px; margin-left:50px; cursor:pointer; background:-webkit-linear-gradient(top, #EEE 0%, #BBB 100%); border:1px solid #666;}
</style>

</head>

<body>


<div class="circle circle_full" id="test">
<div class="circle__disk"></div>
<div class="circle__inner">
<div class="circle__name">测试1</div>
<div class="circle__number" id="friend_num">0</div>
</div>
</div>

<button>add Frient</button>

<script type="text/javascript">
function getEl(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}

getEl("test").onmouseover = function() {
this.className = "circle circle_full circle_over";
};

getEl("test").onmouseout = function() {
this.className = "circle circle_full";
};

var index = 0;
document.getElementsByTagName("button")[0].onclick = function() {
if (index >= 12) {
this.disabled = true;
return ;
}

var img = document.createElement("img");

img.className = "image circleFriend";
img.src = [
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/41487_691724478_6265_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/41531_851335273_3046447_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/211978_100001174061425_2365381_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/70365_794569104_6244312_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/273926_1023602453_4918544_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/41388_668019731_9699_q.jpg',
'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/276415_6815841748_4775941_q.jpg',
'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/275680_100001553835190_4022025_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/41487_691724478_6265_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/275688_100001963685246_6575661_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/274603_100002541323180_733311_q.jpg',
'http://profile.ak.fbcdn.net/hprofile-ak-snc4/186196_1223485640_4353838_q.jpg'
][index];

var b = 2 * Math.PI / 12 * index,
c = 67,
d = Math.sin(b) * c,
e = -Math.cos(b) * c;

img.style.marginLeft = d - 15 + "px";
img.style.marginTop = e - 15 + "px";

getEl("test").appendChild(img);
getEl("test").onmouseover();

var rect = getEl("test").getBoundingClientRect(),
tip = document.createElement("div");

tip.innerHTML = (index % 2 === 0) ? "-1" : "+1";
tip.className = (index % 2 === 0 ? "circle__popup_red" : "circle__popup_green") + " circle__popup";
tip.style.cssText = "left: " + rect.left + "px; top: " + rect.top + "px";
document.body.appendChild(tip);

setTimeout(function() {
tip.className += " circle__popup_phase1";

tip._timer = setTimeout(function() {
tip.className += " circle__popup_phase2";
setTimeout(function() {
document.body.removeChild(tip);
tip = null;
}, 700);
}, 700);
}, 1);

getEl("friend_num").innerHTML = ++index;
};
</script>

</body>
</html>
### 圈子混沌映射的优化与改进 #### 1. Circle 混沌映射的基础理论 Circle 映射是一种经典的混沌系统,其数学表达形式为: \[ x_{n+1} = (x_n + r \mod{1}) \] 其中 \(r\) 是控制参数,\(x_0\) 是初值。通过调整 \(r\) 参数可以改变系统的动态特性[^3]。 #### 2. 提高 Circle 初始种群的质量 为了增强算法性能,在初始化阶段可以通过以下方法改进 Circle 混沌映射的应用: - **引入多维扩展** 将一维 Circle 映射扩展到多维空间中,以便更好地适应复杂优化问题的需求。例如,对于 \(d\)-维搜索空间,可定义如下公式: \[ X_i^{(t+1)} = (X_i^{(t)} + R_i \mod{1}) \] 其中 \(R_i\) 表示第 \(i\) 维的控制参数向量[^4]。 - **结合其他混沌映射** 可以将 Circle 映射与其他混沌映射(如 Logistic 或 Sine)相结合,形成混合型混沌初始化策略。这种组合方式能够进一步提升种群分布的均匀性并减少早熟收敛的风险。 ```python import numpy as np def circle_map(x, r=0.8): """Circle 混沌映射""" return (x + r) % 1 def initialize_population(pop_size, dim, lower_bound, upper_bound, chaos_func=circle_map): """ 使用指定的混沌函数初始化种群 :param pop_size: 种群规模 :param dim: 解维度 :param lower_bound: 下界 :param upper_bound: 上界 :param chaos_func: 混沌映射函数,默认为 Circle 映射 :return: 初始化后的种群矩阵 """ population = [] for _ in range(pop_size): individual = [] chaotic_value = 0.5 # 初值设为 0.5 for d in range(dim): chaotic_value = chaos_func(chaotic_value) scaled_value = lower_bound[d] + chaotic_value * (upper_bound[d] - lower_bound[d]) individual.append(scaled_value) population.append(individual) return np.array(population) # 示例调用 pop_size = 20 dim = 5 lower_bounds = [-10] * dim upper_bounds = [10] * dim population = initialize_population(pop_size, dim, lower_bounds, upper_bounds) print(population) ``` #### 3. 动态调节控制参数 固定不变的控制参数可能导致 Circle 映射陷入周期行为而失去混沌性质。因此建议设计一种自适应机制来动态更新 \(r\) 值。例如依据当前迭代次数或者全局最佳位置的变化幅度来自行决定新的 \(r\) 值范围。 #### 4. 应用于具体优化场景下的改进措施 当把 Circle 集成至某种元启发式算法(比如北方苍鹰算法或蝴蝶优化算法)时,除了上述提到的方法外还可以考虑以下几个方面来进行针对性改造: - **局部搜索能力加强** 在探索过程中加入基于 Circle 的扰动操作,帮助跳出局部极值区域。 - **平衡勘探与开发** 设计双层结构框架——上层负责宏观方向指引;下层则依赖于精细调整版的 Circle 过程完成微观层面的任务执行[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值