js各种旋转

alonwang

 关注

阅读 62

2022-02-25

绕中心旋转

![在这里插入图片描述](https://img-blog.csdnimg.cn/001107faaf2b4a628525e2a6342f16b1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6YeM5paw5aaG,size_16,color_FFFFFF,t_70,g_se,x_16

html

  <div class="lRBot">
     <div class="title"><span class="titleLeft"></span>用户数终端</div>
        <div class="flexbox userBody userCenterBg container">
            <div class="userNumDiv  circle1">
                <span class="nobmal hiaghvalueNum" data-class="hiaghvalueNum">0</span>
            </div>
            <div class="userNumDiv  circle1">
                <span class="nobmal userNum" data-class="userNum">0</span>
            </div>
            <div class="userNumDiv  circle1">
                <span class="nobmal ratelimitNum" data-class="ratelimitNum">0</span>
            </div>
            <div class="userNumDiv  circle1">
                <span class="nobmal all4gNum" data-class="all4gNum">0</span>
            </div>
            <div class="userNumDiv  circle1">
                <span class="nobmal volteNum" data-class="volteNum">0</span>
            </div>
            <div class="userNumDiv  circle1">
                <span class="nobmal all5gNum" data-class="all5gNum">0</span>
            </div>
        </div>
    </div>

js

earth_move()
//旋转的js
function earth_move(){
    //中心点横坐标
    var dotLeft = ($(".container").width())/2;
    //中心点纵坐标
    var dotTop = ($(".container").height())/2;
    var wr=$(".container").width()
    //椭圆1长边 原先暂定170，现在170/435
    a = wr*0.38;
    //椭圆2短边
    b = window.innerWidth=='1920'?100:90;
    //起始角度
    var stard = 0;
    //每一个BOX对应的角度;
    var avd = 360/$(".container .circle1").length;
    //每一个BOX对应的弧度;
    var ahd = avd*Math.PI/180;
    //运动的速度
    var speed = 2;
    var wid = window.wid_wid+wr*0.1834;
    var hei =window.wid_hei+wr*0.1834;
    //总的TOP值
    var totTop = dotTop+100;
    //设置圆的中心点的位置
    //运动函数
    var fun_animat = function(){
        speed = speed<360?speed:2;
        //运运的速度
        speed+=2;
        //运动距离，即运动的弧度数;
        var ainhd = speed*Math.PI/180;
        //按速度来定位DIV元素
        $(".container .circle1").each(function(index, element){
            var allpers = (Math.cos((ahd*index+ainhd))*b+dotTop)/totTop;
            var wpers = Math.max(0.1,allpers);
            var hpers = Math.max(0.1,allpers);
            var interval=wr*0.1//原先是40，现在是40/435
            $(this).css({
                "left":Math.sin((ahd*index+ainhd))*a+dotLeft-48,
                "top":Math.cos((ahd*index+ainhd))*b+dotTop-40,
                "z-index":Math.ceil(allpers*10)+1,
                "width":wpers*wid,
                "height":hpers*hei,
                "opacity":allpers+0.2,
                'fontSize':14*allpers+'px',
                'lineHeight':hpers*hei+'px'
            });

            $(this).mouseenter(function(e){
                clearInterval(setAnimate);
            })
            $(this).mouseleave(function(e){
                clearInterval(setAnimate);
                setAnimate = setInterval(fun_animat,300);
            })
        });
    };
    setAnimate = setInterval(fun_animat,300);//定时器
}

立体旋转

在这里插入图片描述

html

	<div class='horn '>
		<div class='hornTitle'><span></span>政企大客户保障</div>
		<div class="w1 flexbox flexcenter chartYuan ">
			<div id="containerearth" class='containerearth'>
			  <div class='wrap'></div>
			  <div class='wrap'></div>
			  <div class='wrap'></div>
			  <div class='wrap'></div>
			  <div class='wrap'></div>
			  <div class='wrap'></div>
			</div>
		</div>
	</div>

js

let timerIdsmall=null//全局变量
boxnum('containerearth',6,timerIdsmall)
function boxnum(id,N,timerId){
	var oBox=document.getElementById(id);	
	var oDiv=$('#'+id+'>div');
	for(var i=0; i<N; i++){
		(function(oDiv,i){
			setTimeout(function(){
				oDiv[i].style.transform='rotateY('+360/N*i+'deg) translateZ(160px)';
			},200*(N-i));	
		})(oDiv,i);
	}
	
	//键盘控制
	var y=0;
	var x=0;
	
	var lastY=0;
	var iSpeedY=0;
	var lastX=0;
	var iSpeedX=0;
	let gg=0
	// window.clearInterval(timerId)
	timerId=setInterval(function(){
		gg=gg+2
		change(gg)
	},200) 
	function change(y){
		for(var i=0; i<N; i++){
			var c=360/N*i+y;
			oDiv[i].style.transform='rotateY('+(c)+'deg) translateZ(160px)';
			
			var s=Math.abs((360/N*i+y)%360);
			
			s>180 && (s=360-s);
			
			s=180-s;
			
			var scale=s/180;
			//oBox.children[i].innerHTML=s;
			oDiv[i].style.opacity=scale;
		}	
	}
}

css旋转

html

在这里插入图片描述

<div class='chartYuan'>
	<div class="container height">
		<div class='circle'>
			<div class='circle_bg'>0</div>
			<div class='circle_text'>一类用户</div>
		</div>
		<div class='circle'>
			<div class='circle_bg'>0</div>
			<div class='circle_text'>二类用户</div>
		</div>
		<div class='circle'>
			<div class='circle_bg'>0</div>
			<div class='circle_text'>三类用户</div>
		</div>
		<div class='circle'>
			<div class='circle_bg'>0</div>
			<div class='circle_text'>四类用户</div>
		</div>
	</div>
</div>

css

.chartYuan{
	width:100%;
	height:100%;
	background: url(../images/userCenter.png) no-repeat center bottom;
    background-size: 50%;
   -webkit-perspective-origin: 50% 50%;
     -moz-perspective-origin: 50% 50%;
     -ms-perspective-origin: 50% 50%;
     -o-perspective-origin: 50% 50%;
     perspective-origin: 50% 50%;
     -webkit-perspective: 3000px;
     -moz-perspective: 3000px;
     -ms-perspective: 3000px;
     -o-perspective: 3000px;
     perspective: 3000px;
}
/* .chartTitle{
	width:100%;
	height:3.6rem;
	line-height:3.6rem;
	font-family: SourceHanSansCN-Medium;
	font-size: 1.4rem;
	color:#1af7ff;
	text-align:center
} */
.chartYuan .container{
	position:relative;
	width:100%;
	height:100%
}
  @keyframes scale {

    0% {
      transform: scale(0.7)
    }
    50% {
      transform: scale(1)
    }
    100% {
      transform: scale(0.7)
   }
 }
 @keyframes animX{
      0% {left: 283px;}
    100% {left:  584px;}
}
@keyframes animY{
      0% {top: 30px;}
    100% {top: 224px;}
}
.chartYuan .circle,.circle1{
	width:8%;
	height:90px;
	background: url(../images/userbg.png) no-repeat center center;
    background-size: 100% 100%;
    position:absolute;
    text-align:center;
    
}
.chartYuan .circle:nth-child(1){
	top: 30px;
    left: 283px;
    animation:
     	 animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
         animY 6s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite alternate,
         scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.chartYuan .circle:nth-child(2){
	top: 230px;
    left: 283px;
    animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
}
.chartYuan .circle:nth-child(3){
	top: 224px;
    left: 584px;
    animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
          scale 12s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate;
}
.chartYuan .circle:nth-child(4){
	top: 30px;
    left: 584px;
    animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate,
          animY 6s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
           scale 12s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
}

css旋转2

在这里插入图片描述

html

<div id="container">
	 <div class="ball" id="ball_planet"></div>
	  <div class='wrap' id='wrap1'>
	    <div class='ball' id='ball1'><span class='nameTip'>一类用户</span><span class='nameNum'>2188</span></div>
	  </div>

	  <div class='wrap' id='wrap2'>
	    <div class='ball' id='ball2'><span class='nameTip'>2类用户</span><span class='nameNum'>2188</span></div>
	  </div>
	  
	  <div class='wrap' id='wrap3'>
	    <div class='ball' id='ball3'><span class='nameTip'>3类用户</span><span class='nameNum'>2188</span></div>
	  </div>
	  
	  <div class='wrap' id='wrap4'>
	    <div class='ball' id='ball4'><span class='nameTip'>4类用户</span><span class='nameNum'>2188</span></div>
	  </div>
</div>

css

#container {
  width: 250px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
 /*  opacity: 0; */
 /*  animation: fadeIn 6s 1, rotate 20s infinite;
  animation-fill-mode: forwards; */
}
/* .wrap:hover,.ball:hover,#container:hover{
	animation-play-state: paused
} */
.wrap {
  animation: translate 6000ms infinite ease-in-out alternate, zindex 12000ms infinite ease-in-out;
  animation-delay: 0, -12000ms; 
  position: absolute;
  top:-60px
}
.nameTip{
	position:absolute;
	bottom: 31%;
    z-index: 1;
    width:100%;
    text-align:center
}
.nameNum{
	position: absolute;
    top: -29px;
    width: 90%;
    text-align: center;
    height: 24px;
    background: url(../images/earthNum.png) no-repeat center center;
    background-size: 100% 100%;
    line-height: 24px;
    margin-left: 5%;
}
.ball {
  width: 9rem;
  height: 9rem;
  box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.15) inset;
 background: url(../images/eacthTip.png) no-repeat center center;
    background-size: 100% 100%;
   animation: scale2 6000ms infinite ease-in-out alternate;
  animation-delay: -3000ms;
  transform: scale(0.5); 
}

#ball_planet {
  width: 20rem;
  height:20rem;
  box-shadow: 0 -11.25px 0 rgba(0, 0, 0, 0.01) inset;
 	background: url(../images/earthbar.png) no-repeat center center;
   background-size: 100% 100%;
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  animation: none;
  transform: none;
}

.ball:after {
  content: '';
  width: 100%;
  height: 13px;
  background: rgba(204, 204, 204, 0.1);
  position: absolute;
  top: 150px;
  border-radius: 50%;
}

#wrap2 {
  animation-delay: -6000ms;
}

#ball2 {
  animation-delay: -9000ms;
}

#wrap3 {
  animation-delay: -9000ms;
}

#ball3 {
  animation-delay: -12000ms;
}

#wrap4 {
  animation-delay: -15000ms;
}

#ball4 {
  animation-delay: -18000ms;
}

@keyframes translate {
  0% {
    transform: translateX(-12rem);
  }
  100% {
    transform: translateX(24rem);
  }
}
@keyframes scale2 {
  100% {
    transform: scale(1);
  }
}
@keyframes zindex {
  25% {
    z-index: 1;
  }
  75% {
    z-index: -1;
  }
}
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

js旋转

html

<div class="flexbox wh " id="imgContainer">
	<div class='imgDiv daxiang'><img class='box1' src='images/gov/daxiang.png'/></div>
	<div class='imgDiv networkBtn'><img class='box1 ' src='images/gov/zywh.png'/></div>
	<div class='imgDiv networkBtn2'><img class='box1 ' src='images/gov/zhongyuanwenhua.png'/></div>
	<div class='imgDiv henanBtn'><img class='box1 box2' src='images/gov/henanzhapshenban.png'/></div>
</div>

js

//图标旋转
let w=$('#imgContainer').width()
let rt=new imgRound("imgContainer",60,120,w/2.1,0,300,0.01,0.2);
setInterval(function(){rt.roundMove()},20)
//旋转
function imgRound(id,w,h,x,y,r,dv,rh,ah){
	if (ah==undefined) ah=1;
	if (rh==undefined) rh=10;
	var dv=-dv*ah; //旋转速度
	var pi=3.1415926575;
	var d=pi/2;
	var pd=Math.asin(w/2/r);
	var smove=true;
	var imgArr=new Array();
	var objectId=id;
	var o=document.getElementById(objectId);
	o.style.position="relative";
	var arrimg=o.getElementsByClassName('imgDiv');
	var pn=arrimg.length; //图片数量
	var ed=pi*2/pn;
	for (n=0;n<arrimg.length;n++){
		arrimg[n].onmouseout=function(){smove=true;}
		arrimg[n].onmouseover=function(){smove=false;}
		arrimg[n].style.position="absolute";
		imgArr.push(arrimg[n]);
	}
	this.roundMove=function(){
		for (n=0;n<=pn-1;n++){
			let o=imgArr[n];
			let ta=Math.sin(d+ed*n),strFilter;
			let left=Math.cos(d+ed*n-pd)*r+x;
			if (ta<0) o.style.left=left+"px";
			else o.style.left=Math.cos(d+ed*n+pd)*r+x+"px";
			o.style.top=ta*rh+rh+y+"px";
			//let zoom=Math.abs(Math.sin((d+ed*n)/2+pi/4))*0.5+0.5;
			//o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*zoom*r+"px";
			//o.style.width="80px";
			//o.style.height=zoom*h+"px";
			if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}
			else {ta=100;o.style.zIndex=1}
			if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
			else strFilter="FlipH(enabled:false)";
			strFilter=strFilter+" alpha(opacity="+ta+")";
			o.style.opacity=ta/100;
			o.style.filter=strFilter;
			//console.log(o.firstChild)
			let f=o.firstChild;
			if((left<(r+100)&&left>(r-100))&&ta/100==1){
				f.classList.remove("pause");
			}else{
				f.classList.add("pause");
			}

		}
		if (smove) d=d+dv;
	}
}

相关推荐

three js模型旋转

蓝哆啦呀 61 0 0

Three.js风机旋转

mm_tang 69 0 0

js中的各种遍历

清冷的蓝天天 43 0 0

leetcode-48. 旋转图像-js

JakietYu 59 0 0

js中的各种遍历方式

笙烛 94 0 0

js关于时间的各种转换

互联网码农 78 0 0

各种JS jQuery CSS资源等

忆北文学摄影爱好员 33 0 0

js实现太极图高速旋转

架构大数据双料架构师 39 0 0

js瀑布流之各种型号美女

吃面多放酱 108 0 0

实现图片旋转、缩放、移动的js插件Viewer.js

Silence潇湘夜雨 94 0 0

精彩评论（0）

0 0 举报