<head>
<title>环形滚动</title>
<style>
html,body{background:#990000;margin:0px; }
#pics_3d{
position:absolute;
height:300px;
width:100%;
background:#000;
top:120px;
border-bottom:20px solid #420000;
border-top:20px solid #420000;
}
img{
position:absolute;
background:#eee;
left:0;top:0;
border:5px solid #00CCFF;
}
</style>
</head>
<body>
<div id="pics_3d">
<img src="/jscss/demoimg/wall5jpg" />
<img src="/jscss/demoimg/wall6jpg" />
<img src="/jscss/demoimg/wall7jpg" />
</div>
</body>
<script >
Item=function(UI){
thisangle=0;
thisUI=UI;
thisupdate();
};
Itemini={
axle_w:400,
axle_h:10,
cen_x:500,
cen_y:260
};
Itemprototypeupdate=function(){
var J=thisUIstyle,C=Itemini,W=Caxle_w,H=Caxle_h,X=Ccen_x,Y=Ccen_y;
var angle=thisangle/180MathPI;
var left=Mathcos(angle)W+X;
var top=Mathsin(angle)H+Y;
var A=thisangle>270thisangle-360:thisangle;
var size=360-Mathabs(90-A)3;
thisUIwidth=Mathmax(size,120);
var opacity=Mathmax(10,size-180);
Jfilter='alpha(opacity='+opacity+')';
Jopacity=opacity/100;
Jleft=(left-thisUIoffsetWidth/2)+'px';
top=(top-thisUIoffsetHeight)+'px';
Jtop=top;
JzIndex=parseInt(size100);
};
Nav_3D={
items:[],
dir:1,
index:0,
hover:false,
add:function(item){
thisitemspush(item);
itemindex=thisitemslength-1;
itemUIonclick=function (){
var J=itemangle,M=Nav_3D;
if(Muping)return;
if(J==90){
return alert('goto new url')
};
Mwheel_90(item);
Mindex=itemindex;
};
itemUIonmouseover=function (){
if(itemangle==90){
Nav_3Dhover=true;
clearTimeout(Nav_3DautoTimer);
};
};
itemUIonmouseout=function (){
if(itemangle==90){
Nav_3Dhover=false;
Nav_3Dauto();
};
};
return this;
},
wheel_90:function(hot){
if(thisuping)return;
thisuping=true;
var This=this;
thistimer=setInterval(function (){
clearTimeout(ThisautoTimer);
var A=hotangle;
Thisdir=A<270&&A>90-1:1;
if(A==90){
clearInterval(Thistimer);
Thisuping=false;
ThisonEnd(hot);
}
if(A>270)A-=360;
var set=Mathceil(Mathabs((90-A)01));
for (var i=0;i<Thisitemslength;i++ ) {
var J=Thisitems[i];
Jangle+= (setThisdir);
Jupdate();
if(Jangle>360)Jangle-=360;
if(Jangle<0)Jangle +=360;
};
},15);
},
ready:function(){
var J=thisitems,step=parseInt(360/Jlength);
for (var i=0;i<Jlength;i++) {J[i]angle=istep+90;}
thiswheel_90(thisitems[0]);
Nav_3DprevHot=thisitems[0]UI;
Nav_3DsetHot();
},
setHot:function(isHot){
if(!thisprevHot)return;
with(thisprevHotstyle){
borderColor=isHot!==false'#CC0000':'#00CCFF';
cursor=isHot!==false'default':"pointer";
};
return this;
},
auto:function(){
thisindex--;
if(thisindex<0)thisindex=thisitemslength-1;
var J=thisitems[thisindex];
thissetHot(false)prevHot=JUI;
thissetHot();
thiswheel_90(J);
},
onEnd:function(hot){
if(thishover){
return setTimeout(function(){Nav_3DonEnd();},100);
}
thisautoTimer=setTimeout(function(){Nav_3Dauto();},1500);
}
};
var imgs=documentgetElementById("pics_3d")getElementsByTagName("IMG");
for (var i=0;i<imgslength;i++ ) {
Nav_3Dadd(new Item(imgs[i]))
}
Nav_3Dready();
</script>
</html>
在HTML中把块的边框做成圆角需要利用css的border-radius属性。
1、定义和用法
border-radius 属性是一个简写属性，用于设置四个 border--radius 属性。
提示：该属性允许您为元素添加圆角边框！
默认值：
0
继承性：
no
版本：
CSS3
JavaScript 语法：
objectstyleborderRadius="5px" ；
2、语法
border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
div#DemoArea
{
border-radius:50px;
}
3、结果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）