<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#circle{position:relative;width: 600px; height: 600px;background: #ff0000;border-radius: 50%;margin:0 auto;}
.c{position: absolute; width: 50%; height: 50%;background: #00ff00;border-radius: 50%;}
</style>
</head>
<body>
<div id="circle">
<!--<div></div>-->
</div>
<script>
var circleObj=document.getElementById("circle");
var cObj=circleObj.getElementsByTagName("div");
circleObj.onmouseenter=function(){
fenLie(this) };
function fenLie(obj){
var frag=document.createDocumentFragment();//创建碎片相当于一个空容器,将div打包入这个frag
for(var i=0;i<4;i++){
var div=document.createElement("div");
if(i==0){
div.style.left="0px";
div.style.top="0px";
}
else if(i==1){
div.style.right="0px";
div.style.top="0px";
}
else if(i==2){
div.style.left="0px";
div.style.bottom="0px";
}
else if(i==3){
div.style.right="0px";
div.style.bottom="0px";
}//使用定位,兼容IE7
div.className="c";
div.style.background=color();
div.onmouseenter=function(){
fenLie(this);}
frag.appendChild(div);//在最后插入div
}
obj.appendChild(frag);
obj.style.background="none";
obj.onmouseenter=null;
}//解绑
function color(){
var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];//颜色是十六进制
var str="#";
for(var i=0;i<6;i++){
var r=Math.floor(Math.random()*16);//产生0-15之间的随机数;
str+=arr[r];//随机选择在数组的第几位,并且拼接起来
}
return str;
}
// }
</script>
</body>
</html>
转载于:https://my.oschina.net/u/2421889/blog/485960