原生js 3D圆形图片叠加排列滚动特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

29 113 38



特效描述:圆形图片 叠加排列滚动。原生js 3D圆形图片叠加排列滚动特效代码下载

代码结构

1. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
<!--
window.onload=function(){
for(i=1;i<9;i++){
d=document.createElement('img');
d.id="d"+i;
d.src="r"+i+".jpg";
d.style.cssText="position:absolute;";
document.body.appendChild(d);
}
rr();
}
var cl;
function rr(o,rl){
if(typeof(o)=="undefined"){
o=document.getElementById('d1');
n=45;
}else{
n-=(350-o.offsetLeft)/20;
}
for(j=1;j<9;j++){
document.getElementById('d'+j).style.left=Math.cos(Math.PI/180*(n+j*45))*300+450-(Math.sin(Math.PI/180*(n+j*45))*50+150)/2+"px";
document.getElementById('d'+j).style.top=200-(Math.sin(Math.PI/180*(n+j*45))*50+150)/2+"px";
document.getElementById('d'+j).style.width=Math.sin(Math.PI/180*(n+j*45))*50+250+"px";
document.getElementById('d'+j).style.height=Math.sin(Math.PI/180*(n+j*45))*50+250+"px";
document.getElementById('d'+j).style.zIndex=Math.round(Math.sin(Math.PI/180*(n+j*45))*10);
if(document.getElementById('d'+j).offsetLeft>400){
document.getElementById('d'+j).style.cursor="pointer";
document.getElementById('d'+j).onclick=function(){
th=this;
cl=setInterval("rr(th,'r')",30);}
}else if(document.getElementById('d'+j).offsetLeft<300){
document.getElementById('d'+j).style.cursor="pointer";
document.getElementById('d'+j).onclick=function(){
th=this;
cl=setInterval("rr(th,'l')",30);}
}else{
document.getElementById('d'+j).style.cursor="default";
document.getElementById('d'+j).onclick=function(){return false;}
}
}
if(rl=="r")
if(o.offsetLeft<=350)clearInterval(cl);
if(rl=="l")
if(o.offsetLeft>=350)clearInterval(cl);
}
//-->
</script>
</head>
<body>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 滚动导航菜单 图片叠加 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播 叠加浮动层 重叠层叠叠加

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到