猫#1369
展开↯#1370
作者：广西南宁市
CSS3实现 三阶魔方模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三阶魔方模型展示</title>
<style>
body{
background: rgb(0,0,0);
}
/*星星效果start*/
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -447px 387px red, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
animation: fly 60s linear infinite;
transform-style: preserve-3d;
}
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: rotateZ(360deg);
opacity: .6;
}
to {
transform: rotateZ(0deg);
opacity: 1;
}
}
/*星星效果end*/
.big-box{
width:300px;
height:300px;
position: relative;
margin:150px auto;
color:rgba(0,0,0,0.5);
-webkit-perspective: 600px;
perspective: 600px;
}
@-webkit-keyframes spin {
from{transform:rotateX(-45deg) rotateY(0deg)}
to{transform:rotateX(-45deg) rotateY(360deg)}
}
@-webkit-keyframes spin-vertical {
from{transform:rotateX(0deg) rotateY(0deg)}
to{transform:rotateX(360deg) rotateY(0deg)}
}
.big-box .model-box{
position: relative;
-webkit-transform-style: preserve-3d;
transform-style:preserve-3d;
animation: spin 5s infinite linear;
/*transform-origin: 0 150px;*/
}
.model-box .small-box{
width:100px;
height:100px;
float: left;
opacity: 0.9;
}
.front .small-box{
/*box-shadow:0 0 30px 1px red inset;*/
background: red;
box-shadow:0 0 30px 1px black inset;
}
.back .small-box{
background: orange;
box-shadow:0 0 30px 1px black inset;
}
.left .small-box{
background: green;
box-shadow:0 0 30px 1px black inset;
}
.right .small-box{
background: blue;
box-shadow:0 0 30px 1px black inset;
}
.top .small-box{
background: white;
box-shadow:0 0 30px 1px black inset;
}
.bottom .small-box{
background: yellow;
box-shadow:0 0 30px 1px black inset;
}
.surface{
position: absolute;
/*box-shadow:0 0 30px 1px red inset;*/
width:300px;
height:300px;
}
.front{
transform: translateZ(150px);
}
.back{
transform: translateZ(-150px) rotateY(180deg);
}
.left{
transform: rotateY(270deg) translateX(-150px);
transform-origin:left;
}
.right{
transform: rotateY(90deg) translateX(150px) ;
transform-origin:right;
}
.top{
transform: rotateX(-90deg) translateY(-150px) ;
transform-origin:top;
}
.bottom{
transform: rotateX(90deg) translateY(150px) ;
transform-origin:bottom;
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="big-box">
<div class="model-box">
<!-- 前 -->
<div class="front surface">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
<!-- 后 -->
<div class="back surface">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
<!-- 左 -->
<div class="left surface">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
<!-- 右 -->
<div class="right surface">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
<!-- 上 -->
<div class="top surface">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
<!-- 下 -->
<div class="bottom surface">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
</div>
</div>
</body>
</html>Run code
Cut to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三阶魔方 three.js</title>
<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
<!--视角控制类库 轨道控件-->
<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<style type="text/css">
div#canvas-frame {
cursor: move;
width:100%;
height:100%;
background-color: black;
}
body{
background: rgb(0,0,0);
overflow: hidden;
}
/*星星效果start*/
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -447px 387px red, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
animation: fly 60s linear infinite;
transform-style: preserve-3d;
}
.stars:before,
.stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: rotateZ(360deg);
opacity: .6;
}
to {
transform: rotateZ(0deg);
opacity: 1;
}
}
/*星星效果end*/
</style>
</head>
<script>
var renderer;//渲染器
var width;//宽度
var height;//高度
var raycaster = new THREE.Raycaster();//光线碰撞检测器
var mouse = new THREE.Vector2();//存储鼠标坐标或者触摸坐标
var isRotating = false;//魔方是否正在转动
var intersect;//碰撞光线穿过的元素
var normalize;//触发平面法向量
var startPoint;//触发点
var movePoint;
var initStatus = [];//魔方初始状态
//魔方转动的六个方向
var xLine = new THREE.Vector3( 1, 0, 0 );//X轴正方向
var xLineAd = new THREE.Vector3( -1, 0, 0 );//X轴负方向
var yLine = new THREE.Vector3( 0, 1, 0 );//Y轴正方向
var yLineAd = new THREE.Vector3( 0, -1, 0 );//Y轴负方向
var zLine = new THREE.Vector3( 0, 0, 1 );//Z轴正方向
var zLineAd = new THREE.Vector3( 0, 0, -1 );//Z轴负方向
//兼容requestAnimationFrame
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.webkitRequestAnimationFrame;
})();
//根据页面宽度和高度创建渲染器，并添加容器中
function initThree() {
width = window.innerWidth;
height = window.innerHeight;
renderer = new THREE.WebGLRenderer({antialias : true});//生成渲染器对象
renderer.setSize(width, height);//指定渲染器的高宽
renderer.setClearColor(0x000000, 1.0);//设置canvas背景色
document.getElementById('canvas-frame').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中
}
//创建相机，并设置正方向和中心点
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.x = 300;
camera.position.y = 300;
camera.position.z = 300;
camera.up.x = 0;//正方向
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
//视角控制
controller = new THREE.OrbitControls(camera, renderer.domElement);
controller.target = new THREE.Vector3(0, 0, -75);//设置控制点
}
//创建场景，后续元素需要加入到场景中才会显示出来
var scene;
function initScene() {
scene = new THREE.Scene();
}
//创建光线
var light;
function initLight() {
light = new THREE.AmbientLight(0xfefefe);
scene.add(light);
}
var cubeParams = {//魔方参数
x:-75,
y:75,
z:75,
num:3,
len:50,
colors:['green','blue',
'orange','red',
'yellow','white']
};
/**
* 魔方
* x、y、z 魔方正面左上角坐标
* num 魔方单位方向上数量
* len 魔方单位正方体宽高
* colors 魔方六面体颜色
*/
function SimpleCube(x,y,z,num,len,colors){
var cubes = [];
for(var i=0;i<num;i++){
for(var j=0;j<num*num;j++){
var cubegeo = new THREE.BoxGeometry(len,len,len);
var materials = [];
var myFaces = [];
//一个小正方体有六个面，每个面使用相同材质的纹理，但是颜色不一样
myFaces.push(faces(colors[0]));
myFaces.push(faces(colors[1]));
myFaces.push(faces(colors[2]));
myFaces.push(faces(colors[3]));
myFaces.push(faces(colors[4]));
myFaces.push(faces(colors[5]));
for (var k = 0; k < 6; k++) {
var texture = new THREE.Texture(myFaces[k]);
texture.needsUpdate = true;
materials.push(new THREE.MeshLambertMaterial({
map: texture
}));
}
var cubemat = new THREE.MeshFaceMaterial(materials);
var cube = new THREE.Mesh( cubegeo, cubemat );
//假设整个魔方的中心在坐标系原点，推出每个小正方体的中心
cube.position.x = (x+len/2)+(j%3)*len;
cube.position.y = (y-len/2)-parseInt(j/3)*len;
cube.position.z = (z-len/2)-i*len;
cubes.push(cube)
}
}
return cubes;
}
//生成canvas素材
function faces(rgbaColor) {
var canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext('2d');
if (context) {
//画一个宽高都是256的黑色正方形
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0, 0, 256, 256);
//在内部用某颜色的16px宽的线再画一个宽高为224的圆角正方形并用改颜色填充
context.rect(16, 16, 224, 224);
context.lineJoin = 'round';
context.lineWidth = 16;
context.fillStyle = rgbaColor;
context.strokeStyle = rgbaColor;
context.stroke();
context.fill();
} else {
alert('您的浏览器不支持Canvas无法预览.\n');
}
return canvas;
}
//创建展示场景所需的各种元素
var cubes
function initObject() {
//生成魔方小正方体
cubes = SimpleCube(cubeParams.x,cubeParams.y,cubeParams.z,cubeParams.num,cubeParams.len,cubeParams.colors);
for(var i=0;i<cubes.length;i++){
var item = cubes[i];
/**
* 由于筛选运动元素时是根据物体的id规律来的，但是滚动之后位置发生了变化；
* 再根据初始规律筛选会出问题，而且id是只读变量；
* 所以这里给每个物体设置一个额外变量cubeIndex，每次滚动之后更新根据初始状态更新该cubeIndex；
* 让该变量一直保持初始规律即可。
*/
initStatus.push({
x:item.position.x,
y:item.position.y,
z:item.position.z,
cubeIndex:item.id
});
item.cubeIndex = item.id;
scene.add(cubes[i]);//并依次加入到场景中
}
//透明正方体
var cubegeo = new THREE.BoxGeometry(150,150,150);
var hex = 0x000000;
for ( var i = 0; i < cubegeo.faces.length; i += 2 ) {
cubegeo.faces[ i ].color.setHex( hex );
cubegeo.faces[ i + 1 ].color.setHex( hex );
}
var cubemat = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors,opacity: 0, transparent: true});
var cube = new THREE.Mesh( cubegeo, cubemat );
cube.cubeType = 'coverCube';
scene.add( cube );
}
//渲染
function render(){
renderer.clear();
renderer.render(scene, camera);
window.requestAnimFrame(render);
}
//开始 入口
function threeStart(){
initThree();
initCamera();
initScene();
initLight();
initObject();
render();
//监听鼠标事件
window.addEventListener('mousedown', startCube, false);
window.addEventListener('mousemove', moveCube, false );
window.addEventListener('mouseup', stopCube,false);
//监听触摸事件
window.addEventListener('touchstart', startCube, false);
window.addEventListener('touchmove', moveCube, false);
window.addEventListener('touchmove', moveCube, false);
}
//魔方操作结束
function stopCube(){
intersect = null;
startPoint = null
}
//绕着世界坐标系的某个轴旋转
function rotateAroundWorldY(obj,rad){
var x0 = obj.position.x;
var z0 = obj.position.z;
/**
* 因为物体本身的坐标系是随着物体的变化而变化的，
* 所以如果使用rotateZ、rotateY、rotateX等方法，
* 多次调用后就会出问题，先改为Quaternion实现。
*/
var q = new THREE.Quaternion();
q.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), rad );
obj.quaternion.premultiply( q );
//obj.rotateY(rad);
obj.position.x = Math.cos(rad)*x0+Math.sin(rad)*z0;
obj.position.z = Math.cos(rad)*z0-Math.sin(rad)*x0;
}
function rotateAroundWorldZ(obj,rad){
var x0 = obj.position.x;
var y0 = obj.position.y;
var q = new THREE.Quaternion();
q.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), rad );
obj.quaternion.premultiply( q );
//obj.rotateZ(rad);
obj.position.x = Math.cos(rad)*x0-Math.sin(rad)*y0;
obj.position.y = Math.cos(rad)*y0+Math.sin(rad)*x0;
}
function rotateAroundWorldX(obj,rad){
var y0 = obj.position.y;
var z0 = obj.position.z;
var q = new THREE.Quaternion();
q.setFromAxisAngle( new THREE.Vector3( 1, 0, 0 ), rad );
obj.quaternion.premultiply( q );
//obj.rotateX(rad);
obj.position.y = Math.cos(rad)*y0-Math.sin(rad)*z0;
obj.position.z = Math.cos(rad)*z0+Math.sin(rad)*y0;
}
//滑动操作魔方
function moveCube(event){
getIntersects(event);
if(intersect){
if(!isRotating&&startPoint){//魔方没有进行转动且满足进行转动的条件
movePoint = intersect.point;
if(!movePoint.equals(startPoint)){//和起始点不一样则意味着可以得到转动向量了
isRotating = true;//转动标识置为true
var sub = movePoint.sub(startPoint);//计算转动向量
var direction = getDirection(sub);//获得方向
var elements = getBoxs(intersect,direction);
var startTime = new Date().getTime();
window.requestAnimFrame(function(timestamp){
rotateAnimation(elements,direction,timestamp,0);
});
}
}
}
event.preventDefault();
}
/**
* 旋转动画
*/
function rotateAnimation(elements,direction,currentstamp,startstamp,laststamp){
var totalTime = 500;//转动的总运动时间
if(startstamp===0){
startstamp = currentstamp;
laststamp = currentstamp;
}
if(currentstamp-startstamp>=totalTime){
currentstamp = startstamp+totalTime;
isRotating = false;
startPoint = null;
updateCubeIndex(elements);
//转动之后需要更新魔方此时所处的状态
console.log(updateCubeStatus());
}
switch(direction){
//绕z轴顺时针
case 0.1:
case 1.2:
case 2.4:
case 3.3:
for(var i=0;i<elements.length;i++){
rotateAroundWorldZ(elements[i],-90*Math.PI/180*(currentstamp-laststamp)/totalTime);
}
break;
//绕z轴逆时针
case 0.2:
case 1.1:
case 2.3:
case 3.4:
for(var i=0;i<elements.length;i++){
rotateAroundWorldZ(elements[i],90*Math.PI/180*(currentstamp-laststamp)/totalTime);
}
break;
//绕y轴顺时针
case 0.4:
case 1.3:
case 4.3:
case 5.4:
for(var i=0;i<elements.length;i++){
rotateAroundWorldY(elements[i],-90*Math.PI/180*(currentstamp-laststamp)/totalTime);
}
break;
//绕y轴逆时针
case 1.4:
case 0.3:
case 4.4:
case 5.3:
for(var i=0;i<elements.length;i++){
rotateAroundWorldY(elements[i],90*Math.PI/180*(currentstamp-laststamp)/totalTime);
}
break;
//绕x轴顺时针
case 2.2:
case 3.1:
case 4.1:
case 5.2:
for(var i=0;i<elements.length;i++){
rotateAroundWorldX(elements[i],90*Math.PI/180*(currentstamp-laststamp)/totalTime);
}
break;
//绕x轴逆时针
case 2.1:
case 3.2:
case 4.2:
case 5.1:
for(var i=0;i<elements.length;i++){
rotateAroundWorldX(elements[i],-90*Math.PI/180*(currentstamp-laststamp)/totalTime);
}
break;
default:
break;
}
if(currentstamp-startstamp<totalTime){
window.requestAnimFrame(function(timestamp){
rotateAnimation(elements,direction,timestamp,startstamp,currentstamp);
});
}
}
//更新位置索引
function updateCubeIndex(elements){
for(var i=0;i<elements.length;i++){
var temp1 = elements[i];
for(var j=0;j<initStatus.length;j++){
var temp2 = initStatus[j];
if( Math.abs(temp1.position.x - temp2.x)<=cubeParams.len/2 &&
Math.abs(temp1.position.y - temp2.y)<=cubeParams.len/2 &&
Math.abs(temp1.position.z - temp2.z)<=cubeParams.len/2 ){
temp1.cubeIndex = temp2.cubeIndex;
break;
}
}
}
}
/**
* 更新魔方状态
* 假设初始化时按固定位置给魔方编号，还原之后位置和编号不变
*/
function updateCubeStatus(){
for(var i=0;i<cubes.length;i++){
var item = cubes[i];
if(item.id!==item.cubeIndex){
return false;
}
}
return true;
}
//根据方向获得运动元素
function getBoxs(target,direction){
var targetId = target.object.cubeIndex;
var ids = [];
for(var i=0;i<cubes.length;i++){
ids.push(cubes[i].cubeIndex);
}
var minId = min(ids);
targetId = targetId-minId;
var numI = parseInt(targetId/9);
var numJ = targetId%9;
var boxs = [];
//根据绘制时的规律判断 no = i*9+j
switch(direction){
//绕z轴
case 0.1:
case 0.2:
case 1.1:
case 1.2:
case 2.3:
case 2.4:
case 3.3:
case 3.4:
for(var i=0;i<cubes.length;i++){
var tempId = cubes[i].cubeIndex-minId;
if(numI===parseInt(tempId/9)){
boxs.push(cubes[i]);
}
}
break;
//绕y轴
case 0.3:
case 0.4:
case 1.3:
case 1.4:
case 4.3:
case 4.4:
case 5.3:
case 5.4:
for(var i=0;i<cubes.length;i++){
var tempId = cubes[i].cubeIndex-minId;
if(parseInt(numJ/3)===parseInt(tempId%9/3)){
boxs.push(cubes[i]);
}
}
break;
//绕x轴
case 2.1:
case 2.2:
case 3.1:
case 3.2:
case 4.1:
case 4.2:
case 5.1:
case 5.2:
for(var i=0;i<cubes.length;i++){
var tempId = cubes[i].cubeIndex-minId;
if(tempId%9%3===numJ%3){
boxs.push(cubes[i]);
}
}
break;
default:
break;
}
return boxs;
}
//获得旋转方向
function getDirection(vector3){
var direction;
//判断差向量和x、y、z轴的夹角
var xAngle = vector3.angleTo(xLine);
var xAngleAd = vector3.angleTo(xLineAd);
var yAngle = vector3.angleTo(yLine);
var yAngleAd = vector3.angleTo(yLineAd);
var zAngle = vector3.angleTo(zLine);
var zAngleAd = vector3.angleTo(zLineAd);
var minAngle = min([xAngle,xAngleAd,yAngle,yAngleAd,zAngle,zAngleAd]);//最小夹角
switch(minAngle){
case xAngle:
direction = 0;//向x轴正方向旋转90度（还要区分是绕z轴还是绕y轴）
if(normalize.equals(yLine)){
direction = direction+0.1;//绕z轴顺时针
}else if(normalize.equals(yLineAd)){
direction = direction+0.2;//绕z轴逆时针
}else if(normalize.equals(zLine)){
direction = direction+0.3;//绕y轴逆时针
}else{
direction = direction+0.4;//绕y轴顺时针
}
break;
case xAngleAd:
direction = 1;//向x轴反方向旋转90度
if(normalize.equals(yLine)){
direction = direction+0.1;//绕z轴逆时针
}else if(normalize.equals(yLineAd)){
direction = direction+0.2;//绕z轴顺时针
}else if(normalize.equals(zLine)){
direction = direction+0.3;//绕y轴顺时针
}else{
direction = direction+0.4;//绕y轴逆时针
}
break;
case yAngle:
direction = 2;//向y轴正方向旋转90度
if(normalize.equals(zLine)){
direction = direction+0.1;//绕x轴逆时针
}else if(normalize.equals(zLineAd)){
direction = direction+0.2;//绕x轴顺时针
}else if(normalize.equals(xLine)){
direction = direction+0.3;//绕z轴逆时针
}else{
direction = direction+0.4;//绕z轴顺时针
}
break;
case yAngleAd:
direction = 3;//向y轴反方向旋转90度
if(normalize.equals(zLine)){
direction = direction+0.1;//绕x轴顺时针
}else if(normalize.equals(zLineAd)){
direction = direction+0.2;//绕x轴逆时针
}else if(normalize.equals(xLine)){
direction = direction+0.3;//绕z轴顺时针
}else{
direction = direction+0.4;//绕z轴逆时针
}
break;
case zAngle:
direction = 4;//向z轴正方向旋转90度
if(normalize.equals(yLine)){
direction = direction+0.1;//绕x轴顺时针
}else if(normalize.equals(yLineAd)){
direction = direction+0.2;//绕x轴逆时针
}else if(normalize.equals(xLine)){
direction = direction+0.3;//绕y轴顺时针
}else{
direction = direction+0.4;//绕y轴逆时针
}
break;
case zAngleAd:
direction = 5;//向z轴反方向旋转90度
if(normalize.equals(yLine)){
direction = direction+0.1;//绕x轴逆时针
}else if(normalize.equals(yLineAd)){
direction = direction+0.2;//绕x轴顺时针
}else if(normalize.equals(xLine)){
direction = direction+0.3;//绕y轴逆时针
}else{
direction = direction+0.4;//绕y轴顺时针
}
break;
default:
break;
}
return direction;
}
//获取数组中的最小值
function min(arr){
var min = arr[0];
for(var i=1;i<arr.length;i++){
if(arr[i]<min){
min = arr[i];
}
}
return min;
}
//开始操作魔方
function startCube(event){
getIntersects(event);
//魔方没有处于转动过程中且存在碰撞物体
if(!isRotating&&intersect){
startPoint = intersect.point;//开始转动，设置起始点
}
}
//获取操作焦点以及该焦点所在平面的法向量
function getIntersects(event){
//触摸事件和鼠标事件获得坐标的方式有点区别
if(event.touches){
var touch = event.touches[0];
mouse.x = (touch.clientX / width)*2 - 1;
mouse.y = -(touch.clientY / height)*2 + 1;
}else{
mouse.x = (event.clientX / width)*2 - 1;
mouse.y = -(event.clientY / height)*2 + 1;
}
raycaster.setFromCamera(mouse, camera);
//Raycaster方式定位选取元素，可能会选取多个，以第一个为准
var intersects = raycaster.intersectObjects(scene.children);
//如果操作焦点在魔方上则取消移动，反之恢复移动
if(intersects.length){
try{
if(intersects[0].object.cubeType==='coverCube'){
intersect = intersects[1];
normalize = intersects[0].face.normal;
}else{
intersect = intersects[0];
normalize = intersects[1].face.normal;
}
}catch(err){
//nothing
}
controller.enabled = false;//焦点在魔方上时禁止视角变换
}else{
controller.enabled = true;
}
}
</script>
<body onload="threeStart();">
<div class="stars"></div>
<div id="canvas-frame"></div>
</body>
</html>Run code
Cut to clipboard
文章：JavaScript的if判断的四种书写方式 发表时间：2017-06-06, 14:26:59
#1372
作者：广西南宁市
<canvas id="myCanvas" width="300" height="300" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
ctx.drawImage(img,30,30); //在画布坐标（30,30）的位置绘制图片
}
</script>Run code
Cut to clipboard
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
ctx.drawImage(img,30,30,250,150); //在画布坐标（30,30）的位置绘制一张宽度为250，高度为150的图片
}Run code
Cut to clipboard
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
ctx.drawImage(img,10,20,300,300,30,30,250,150); //在画布坐标（30,30）的位置绘制一张宽度为250、高度150的图片，这种图片是在img上坐标为（10,20）的位置所裁剪出来的宽高均为300的区域
}Run code
Cut to clipboard
HTML5- Canvas入门（五） - vajoy
如何让你的动画更自然
文章：HTML5之图片上传预处理缩略图预览 发表时间：2017-06-06, 17:23:08
#1373
作者：广西南宁市
根据：色环中任何两色混所得的新色与另一原色互为补色（也有称为相反色），也称余色。如绿与红、黄与紫、蓝与橙，皆属补色关系，绿的补色是红色，红的补色是绿色。
文章：jQuery仿Facebook网格图片画廊 发表时间：2017-06-06, 17:21:55
#1374
作者：广西南宁市
有选择的拿，为我所用的拿，不卑不亢的拿
—鲁迅《拿来主义》
—鲁迅《拿来主义》
文章：jQuery仿Facebook网格图片画廊 发表时间：2017-06-06, 11:28:31
#1375
作者：广西南宁市
文章：jQuery仿Facebook网格图片画廊 发表时间：2017-06-06, 11:08:26
#1376
作者：广西南宁市
各种响应式 Web UI 框架汇总
1. Bootstrap
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
官方网站: http://twitter.github.com/bootstrap/
github: https://github.com/twitter/bootstrap
2. Foundation
Foundation 是一个易用、强大而且灵活的框架，用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。
官方网站: http://foundation.zurb.com/
github: https://github.com/zurb/foundation
3. Skeleton
Skeleton 是一个小的 JS 和 CSS 文件的集合，可帮你快速开发漂亮的网站，适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。
官方网站: http://www.getskeleton.com/
github: https://github.com/dhgamache/Skeleton
4. Less Framework
Less框架是一个用于设计自适应网站的CSS网格系统，它包含4个布局和3套预设布局，这些都以一个单一网格为基础。Less框架的目标是更高效地创建多布局网站，并在布局之间保持一致。
官方网站: http://lessframework.com/
github: https://github.com/jonikorpi/Less-Framework
5. ResponsiveAeon
ResponsiveAeon 是一个HTML5/CSS3的框架，可以非常快速的创建响应的布局。它有一个网格系统是基于总1104px宽度12列，提供了3个非常容易理解的基本类供 使用。该框架使使用@mediaqueries的，支持任何尺寸的设备。除了网格系统，也有排版，列表，表格，按钮和表格的样式。
官方网站: http://www.newaeonweb.com.br/responsiveaeon/
github: https://github.com/newaeonweb/ResponsiveAeon-Cssgrid
6. Gumby
Gumby 是一个响应式的以及 960 像素宽度的 CSS 网格框架，支持 PC、平板和手机屏幕显示。类似 Twitter 的 Bootstrap，它包括一个Web UI工具包，有好看按钮，表格，导航+标签和一个很小的JavaScript文件。
官方网站: http://www.gumbyframework.com/
github: https://github.com/dsurgeons/Gumby
7. Gridpak
Gridpak 的目的是实现了响应式的 Web 页面设计，提高工作流程，节省了时间。通过生成PNG图像，CSS和JavaScript,让 Gridpak 创建响应式的简单界面。Gridpak 产生的CSS 兼容 IE 8+，但它使用很多实验性的CSS属性，如媒体查询，盒大小和背景剪辑属性，所以建议结合 Modernizer 来使用，确保向后兼容性。
官方网站: http://gridpak.com/
8. Responsive GS
Responsive GS 是一个流体网格 CSS 框架，用于快速开发响应式的 Web 网站。 Responsive GS 提供三种风格：12、16 和 24 列，使用 media queries 支持所有标准设备。
官方网站: http://responsive.gs/
github: https://github.com/StudioSnapsize/responsive-gs
9. Amazium
Amazium 是一个基于 960 Grid System 的响应式 CSS 框架，使用 960px 宽度，以适应大多数 1024*768 分辨率的屏幕。Amazium 使用 4 个主要的 media queries 来调整所适应的分辨率大小。
官方网站: http://www.amazium.co.uk/
10. Golden Grid System
Golden grid system是为增强网页兼容性设计的折叠式grid。具有四个特征：列、跨页、底线、script。
官方网站: http://goldengridsystem.com/
github: https://github.com/jonikorpi/Golden-Grid-System
11. Centurion
Centurion 是一个基于 SASS 和 CSS3 构建的响应式 Web 框架。
官方网站: http://jhough10.github.com/Centurion/
github: https://github.com/jhough10/Centurion
12.inuit.css
该框架用于使用较少的代码实现在较小屏幕（平板电脑、手机）上运行的项目，支持IE6+。
官方网站: http://inuitcss.com/
github: https://github.com/csswizardry/inuit.css
13. Fluid Baseline Grid
Fluid Baseline网格系统是一个HTML5 & CSS3开发工具包，为网站快速设计提供了坚实的基础。
官方网站: http://fluidbaselinegrid.com/
github: https://github.com/thedayhascome/Fluid-Baseline-Grid
14. HTML5 Boilerplate
HTML5 Boilerplate基于HTML/CSS/JS模板，可以帮助开发者使用HTML5技术快速开发稳健、功能齐全的网站。你可以把它当作自己的新项目模板，在此基础上建立自己的项目。
该模板包含了帮助开发HTML5站点和应用程序的组件和一些优秀的最佳实践，只需开发者最少的前期工作，就能为项目提供一个非常稳固的基础。另外，该模板是高度可定制，可轻松删除不需要的一些特性。
官方网站: http://html5boilerplate.com/
github: https://github.com/h5bp/html5-boilerplate
15.Semantic
Semantic UI是完全语义化的前端界面开发框架，支持 Sass 和 LESS 动态样式语言,文档和演示非常完善,易于学习和使用,配备网格布局,有一些非常实用的附加配置，例如inverted类。
有一个非常好的按钮实现，情态动词，和进度条。在许多功能上使用图标字体。
官方网站: http://semantic-ui.com/
github: https://github.com/semantic-org/semantic-ui/
16.Zui
ZUI继承了Bootstrap 3中的大部分基础内容作了相应的改进，简单美观，易于使用，快速构建简洁大方的现代web应用。
采用HTML5且支持所有流行的移动及桌面浏览器平台，一些旧的浏览器也能够降级支持，轻快独立稳定，最佳的可用性能，最大限度的不依赖于外部组件，全平台响应，一次编写，响应任何尺寸的设备。
官方网站: http://www.zui.sexy/
17.Amaze
Amaze UI 是一个轻量级、采用mobile first理念的前端框架，中国首个开源 HTML5 跨屏前端框架，适配所有屏幕，可快速构建界面出色、体验优秀的跨屏页面，可提升开发效率，对于常用浏览器及App内置浏览器提供更好的兼容性支持，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备。
官方网站: http://amazeui.org/
github: http://git.oschina.net/amazeui/amazeui
18.MUI
MUI（Mobile User Interface）是一套基于Html5的，遵循Html5+规范的,用于手机端界面开发的一套框架,是目前最高性能和最接近原生体验的手机端框架,体积小不到100k,可直接使用class编写，性能远高于data-方式，又通过代码块的编写方式降低了编码的复杂度。
例如在HBuilder里敲m，会拉出一排控件mList、mButton等，选一个回车，就会自动产生div和class。
19.OniUI
OniUI是基于avalon的UI库，是一个MVVM架构的前端框架，兼容主流浏览器。
官方网站: http://ued.qunar.com/oniui/home.htm
github: https://github.com/RubyLouvre/avalon.oniui
20.Vanilla JS
Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架，也是浏览器内置框架。
官方网站: http://vanilla-js.com/
21.Zepto
Zepto是专门为移动 WebKit 浏览器，如 Chrome 和 Safari 打造的。凭借其独特的简约发展的特点，它可以帮助开发人员轻松地完成他们的工作。Zepto 最大的特点是保持事情的简单性。这个框架的目标是精确的，便于下载和快速执行。
官方网站: http://zeptojs.com/
22.Framework7
Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。
官方网站: http://www.idangero.us/framework7/
github: https://github.com/nolimits4web/framework7/
25.Ionic
Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。js部分是基于AngularJS框架，大量使用了Css3，css生成基于Sass，构建工具基于最新的gulp，版本升级基于bower，原生层无缝封装了cordova。使用Ionic框架，可以有效利用AngularJs的特性，极大的提供HTML5应用开发效率，质量，模块化程度。
官方网站:http://ionicframework.com/
github:https://github.com/driftyco/ionicRun code
Cut to clipboard
jQuery Mobile和Zepto是移动端的js库。jQuery Mobile相当于PC端的jQuery UI，它提供了很多页面的UI库，能够很快的开发出漂亮的界面，适合公司没有UI设计师的前端开发人员来进行移动端的开发。Zepto相当于PC端的jQuery，它提供了很多方法和功能，能够很快的实现各种需求和功能，适合公司有UI设计师的前端开发人员来进行移动端的开发。
jQuery Mobile性能上没有zepto好。
zepto.js是一个专为mobile WebKit浏览器(如：Safari和Chrome)而开发的一个JavaScript框架。它标榜自己在其简约的开发理念，能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JS框架，是超轻量级的，只有5KB。zepto.js的语法借鉴并且兼容jQuery。
jQuery Mobile这个框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。
jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。虽然jQuery Mobile相对较新，但开发人员可以用jQuery Mobile为许多移动设备（包括智能手机和平板电脑）开发网站应用程序，RSS阅读器等应用。
jQuery Mobile是目前最流行的一个移动开发的框架，文档丰富，社区活跃，有很多的UI控件供我们使用，并且提供对多页面的支持（通过Ajax方式读取内容，并提供页面切换的过渡动画）。我认为jQuery Mobile的最强大之处就在于其UI方面的支持，但这一部分恰恰不是我所需要的，它对UI的限制比较多。Sencha Touch是ExtJs的移动版，对于不熟悉ExtJs的人来说有一定的学习成本。
jQuery Mobile的缺点，主要有两点：一是重，二是UI限制太大。
我们选择了zepto.js作为底层库，使用sea.js进行模块的管理和发布，当然也可以使用requirejs来进行模块的管理和发布，
requirejs比seajs的对应的工具多一些，因为requirejs是外国的，而其他相应的工具也是外国的，因此使用seajs，相对应的工具会少一些。但是开发起来容易一些，都是中文资料。此外，我们使用backbone.js为基础的MVC架构，用来剥离应用的数据部分；使用underscore.js做为前端模板引擎（backbone重度依赖）；使用iScroll.js为我们提供模拟滚动的功能（此库在低端移动设备上，反应慢）。这些都是一些专业的“小库”，很适合移动端的开发。当然，具体情况需要具体分析，没有万能的框架，只有万能的开发者。如果时间允许，也可以自己来定制一套满足自身需求的基础库。毕竟在移动端，一切以 “精简”为主。
对于单页应用来说，iScroll确实是一个非常优秀的解决方案，但是iScroll却有一个最大的缺陷——慢，滚动的性能与浏览器原生实现相比，在低端的移动设备上有明显卡顿。
不过要兼容低端的移动设备，原生的滚动还是有优势的。尝试放弃使用iScroll组件，使用原生的Scroll。因为较新的浏览器已支持 {overflow: scroll; -webkit-overflow-scrolling: touch;}。
iScroll的诞生，主要是因为早期的webkit内核浏览器没有一种原生支持固定高度的容器。到目前为止，iScroll最大的问题就是慢，在千元以下Android设备上表现尤为突出。使用局部滚动来替代iScroll滚动是最好的一种方式，但很可惜，现在只有iOS5、6支持局部滚动，并且支持程度并不好，而Android压根就不打算支持。这样，我们就不得不使用iScroll。
问题来了，现在到底使用iScroll呢？还是不使用？使用的话，大部分Android设备在滚动时会很卡，如不使用，部分功能又实现不了。其实，这个问题也不必太纠结。
首先， 对于header、footer需要固定位置的页面，可以直接使用position:fixed实现。部分不支持fixed定位的浏览器问题也不大，这部分设备一般都是Android2.x的系统，配置也较低，相对交互而言，速度显然更加重要；
对于需要依赖固定高度实现切换动画效果的交互，应尽量保证滚动条在页面顶部时处理。必要时做出一些牺牲，舍弃部分影响用户使用流畅的交互；
尽量使用浏览器原生支持代替iScroll；
如果必须使用iScroll才能实现的功能，一定要控制在最小范围，不要在常用场景应用iScroll；
虽然iScroll在iOS下表现得非常出色，但是都应当尽量使用浏览器原生支持特性来实现功能，这样才能最大化保证交互操作的流畅性。
很长一段时间都有一个争论，有页面跳转是不是WebApp？我认为单独讨论single page webapp还是页面跳转是没有意义的，所有产品都是建立在用户需求之上。对于现有的single page webapp产品，浏览器没有准备好，硬件配置也没有准备好，函数运算效率、页面渲染都跟不上，尤其是Android设备。基于用户需求出发，一些意识形态的东西该抛弃就抛弃，放开的使用页面跳转，只要能让程序运行流畅的东西，就应该毫不犹豫的使用。
但凡事也没有绝对，在一定的功能范围之内，也可以使用炫一些的切换动画，在一个页面实现多个子功能。
基于以上对移动端浏览器混乱程度的理解，移动web产品要做到全平台适配，工作量无遗是巨大的，并且，由于HTML5的支持程度，也会导致大部分低端用户无法使用到一些高级特性，或表现效果不佳。而且，没必要为了适应低端Android用户让高端iOS用户也忍受着简陋无比的交互及界面。那么，将iOS、Android、Windows Phone分为不同的版本，做相应的功能适配还是很有必要的。
在iOS下，自由度比较高，能随意发挥，很多有创意的交互及设计，都能在Safari下表现得比较好；
Android下由于设备硬件配置及浏览器版本差异比较大，就会选择相应保守的方式，舍弃部分影响用户使用流畅的交互，以及影响页面渲染的界面设计；
对于Windows Phone我们是从WP8起步，这样会更好做浏览器兼容。 做分版本适配的目的，是为了在保证功能交互的前提下让每个用户都能得到最流畅的操作体验。
用原生控件做外壳和交互，保证流畅的用户体验和完整的推广渠道；使用HTML5来展示内容，保证内容的迅速迭代更新，即时响应用户需求。于是就诞生了Hybrid App，这也是目前最流行最合适的一种App形式。
下面提出我个人的建议：
如果你的团队刚刚组建或者框架知识了解不深入，那么开发移动端，使用单一的库就行了。
比如：jQuery mobile或Zepto。
使用jQuery mobile可以省略很多UI设计或者说重构的一些工作，在公司团队中，如果没有这方面的成员时，可以使用此库。但是此库性能不好，兼容性一般，UI限制大，请慎重使用。
使用Zepto开发，性能上最好的，而兼容性比较好，跟jQuery有同样的API，只是需要自己设计UI，以及重构。touch功能上有一定的兼容性问题。推荐使用此库，这样你可以任意发挥你的想法。
如果你的团队具有一定的框架基础，像模块化开发的代表requirejs和seajs，那么，完全可以把这个项目进行模块化开发，把这两个库的任意一个加入到项目中，将对你项目的协同开发，以后的代码维护都将有很好的贡献。这两个库的学习成本不大，很容易上手。
如果你的团队，个个都是高手了，那么就可以进行mvc模式的开发了。在你的项目中，加入backbone+underscore，这是目前为止，最简单的mvc模式的开发组合。但是大家都知道，使用backbone，你就必须按照backbone的模式来进行项目的开发，具有一定的限制。也就是说，开发和维护，都需要了解backbone这个框架。
如果你的团队，个个是大牛的话，那么就可以使用angularjs或react了。这种模式的开发，现阶段是前端开发的最新研究成果了。此种框架，学习成本大，但是代表着公司的实力和创新。
当然，除了以上这些基础库和基础框架，我们可能还需要添加一些第三方库，比如iscroll，此库兼容性好，唯一缺点就是在低端设备上，会卡，所以项目不能全局使用iscroll实现滚动效果。我们需要添加原生的scroll来实现项目中的滚动效果，如果使用原生scroll不能实现的，那么才使用iscroll来实现。
比如：faskClick，它解决点击事件延迟的bug，当然zepto的touch模块也可以解决。
比如：模板引擎，像underscore，handlerbars等。
比如：HTML5的application cache本地缓存机制。
移动开发总结：
（1）jQuery mobile或者Zepto+自己设计UI
（2）seajs或requirejs+Zepto
（3）seajs或requirejs+Zepto+Backbone+underscore
（4）angularjs或react
我个人希望能够使用第三种，然后项目成熟了，再使用第四种。毕竟新技术的实践，还是很有想象空间的。
当然，如果对技术不需要深入，只要实现功能，那么使用第二种我觉得还是不错的。 至于第一种，我个人觉得模块化开发还是非常必要的，之前在公司里面看之前的前端负责人开发的一套系统，代码写的太混乱了，简直看不得，维护起来非常不方便，所以模块化开发，我个人觉得，必须使用。
关于移动端的UI组件，我推荐腾讯的frontUI。百度的gmu很久没更新了，也没人维护了，而且耦合性比frontUI大，不推荐。
关于移动端的调试工具，我暂时只用过weinre。由于公司网络不行，我使用的是低版本的weinre，只支持safari调试，而且反应比较慢。但是，还是能够解决问题的，只是效率不高。网上有很多教程，百度一下就知道怎么用了。Run code
Cut to clipboard
文章：JavaScript的if判断的四种书写方式 发表时间：2017-06-06, 14:28:53
#1377
作者：广西南宁市
css实现横向带箭头步骤流程效果
这是通过纯css实现的步骤流程效果，扩展性强，可以随意增加减少数量，兼容性ie6+。
这是通过纯css实现的步骤流程效果，扩展性强，可以随意增加减少数量，兼容性ie6+。
<style type="text/css">
ul{margin:0px; padding:0px; list-style:none;}
.wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;}
.step-case{height:40px;}
.step-case li{ float:left; margin:0px; width:12.5%;position:relative; cursor:pointer;}
.step-case li span{display:block; background-color:#ccc; height:40px; line-height:40px; text-align:center; color:#fff; font-weight:bold;}
.step-case b{position:absolute; font-size:0px; line-height:0px; top:0px;}
.step-case .b-l{border-width:2px 2px 2px 0; border-style:dashed solid dashed dashed; border-color:transparent #ccc transparent transparent; height:36px; left:-2px;}
.step-case .b-r{border-width:2px 0 2px 2px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; height:36px; right:-2px;}
.step-case .b-1{border-width:20px 0 20px 20px; border-style:solid dashed solid solid; border-color:#ccc transparent #ccc #ddd; left:-20px;}
.step-case .b-2{border-width:20px 0 20px 20px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; left:-21px;}
/*当前状态*/
.step-case .s-cur span{background-color:orange;}
.step-case .s-cur .b-l{border-right-color:orange;}
.step-case .s-cur .b-r{border-left-color:orange;}
.step-case .s-cur .b-1{border-color:orange orange orange #FABF55;}
.step-case .s-cur .b-2{border-left-color:#FADBA5;}
/*当前状态后*/
.step-case .s-cur-next .b-2{border-color:transparent transparent transparent orange;}
/*完成的状态*/
.step-case .s-finish span{background-color:#FADBA5; color:#000;}
.step-case .s-finish .b-l{border-right-color:#FADBA5;}
.step-case .s-finish .b-r{border-left-color:#FADBA5;}
.step-case .s-finish .b-1{border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;}
.step-case .s-finish .b-2{border-left-color:#FADBA5;}
</style>
<script type="text/javascript">
window.onload = function(){
var step = document.getElementById("step"),li = step.getElementsByTagName("li");
for(var i = 0;i<li.length;i++){
//(function(i){
li[i].index = i;
li[i].onclick = function(){
var i = this.index;
for(var j = 0;j<i;j++){
li[j].className = "s-finish";
}
for(var j = li.length;j>i;){
li[--j].className = "";
if(j==i+1){
li[j].className = "s-cur-next";
}
}
this.className = "s-cur";
}
//})(i);
}
};
</script>
<div class="wrap">
<ul class="step-case" id="step">
<li class="s-finish"><span>第1步</span><b class="b-l"></b></li>
<li class="s-finish"><span>第2步</span><b class="b-1"></b><b class="b-2"></b></li>
<li class="s-finish"><span>第3步</span><b class="b-1"></b><b class="b-2"></b></li>
<li class="s-finish"><span>第4步</span><b class="b-1"></b><b class="b-2"></b></li>
<li class="s-cur"><span>第5步</span><b class="b-1"></b><b class="b-2"></b></li>
<li class="s-cur-next"><span>第6步</span><b class="b-1"></b><b class="b-2"></b></li>
<li><span>第7步</span><b class="b-1"></b><b class="b-2"></b></li>
<li><span>第8步</span><b class="b-1"></b><b class="b-2"></b><b class="b-r"></b></li>
</ul>
</div>
Run code
Cut to clipboard
文章：JavaScript的if判断的四种书写方式 发表时间：2017-06-06, 14:23:27
#1378
作者：广西南宁市
nginx No input file specified.
是配置php环境变量导致,删除去掉即可.
是配置php环境变量导致,删除去掉即可.
文章：Windows服务器环境下多版本php环境安装php的imagick和imagemagick扩展尝试多版本成功安装运行实现图片平铺水印代码 发表时间：2017-03-01, 11:21:16
#1383
作者：广西南宁市
a fake WannaCry
假装自己是个病毒3 , 5 , 6 , 7 , 12 , 你来说下谁是潘金莲2 ,
假装自己是个病毒
文章：@意见反馈/技术支持/伊网/安企网 发表时间：2017-05-16, 09:21:00
#1387
作者：广西南宁市
css扇形菜单
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
#sector {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
margin: 150px auto;
background-color: #ddd;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
#sector ul li {
list-style: none;
position: absolute;
width: 200px;
height: 100px;
right: 50%;
top: 0;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
#sector .sector1 {
background-color: #fef4ac;
-webkit-transform: skew(54deg);
-moz-transform: skew(54deg);
-ms-transform: skew(54deg);
transform: skew(54deg);
}
#sector .sector2 {
background-color: #FCF6E6;
-webkit-transform: rotate(36deg) skew(54deg);
-moz-transform: rotate(36deg) skew(54deg);
-ms-transform: rotate(36deg) skew(54deg);
transform: rotate(36deg) skew(54deg);
}
#sector .sector3 {
background-color: #faf2cc;
-webkit-transform: rotate(72deg) skew(54deg);
-moz-transform: rotate(72deg) skew(54deg);
-ms-transform: rotate(72deg) skew(54deg);
transform: rotate(72deg) skew(54deg);
}
#sector .sector4 {
background-color: #f9f1e9;
-webkit-transform: rotate(108deg) skew(54deg);
-moz-transform: rotate(108deg) skew(54deg);
-ms-transform: rotate(108deg) skew(54deg);
transform: rotate(108deg) skew(54deg);
}
#sector .sector5 {
background-color: #f5e79e;
-webkit-transform: rotate(144deg) skew(54deg);
-moz-transform: rotate(144deg) skew(54deg);
-ms-transform: rotate(144deg) skew(54deg);
transform: rotate(144deg) skew(54deg);
}
#sector ul li p {
position: absolute;
top: 50px;
left: 150px;
-webkit-transform: skew(-54deg) rotate(-70deg);
-moz-transform: skew(-54deg) rotate(-70deg);
-ms-transform: skew(-54deg) rotate(-70deg);
transform: skew(-54deg) rotate(-70deg);
}
</style>
</head>
<body>
<div id="sector">
<ul>
<li class="sector1"><p>A</p></li>
<li class="sector2"><p>B</p></li>
<li class="sector3"><p>C</p></li>
<li class="sector4"><p>D</p></li>
<li class="sector5"><p>E</p></li>
</ul>
<a></a>
</div>
</body>
</html>Run code
Cut to clipboard
window.onload = function(){
var sector = document.getElementById('sector');
var oli = document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].style.cssText += 'transform:rotate('+( i*36 )+'deg) skew(54deg)';
console.log(oli[i]);
}
}; Run code
Cut to clipboard
文章：JavaScript的if判断的四种书写方式 发表时间：2017-06-06, 10:13:37
dom.hasClass(className) ? dom.removeClass(className) : dom.addClass(className);简单粗暴的JavaScript的if 判断的正确打开方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .active{ background: #ccc; } </style> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script> <script> $(function(){ //上移 var $Up=$(".up"); $Up.click(function(){ var $oP=$(this).parents("p"); $oP.fadeOut().fadeIn(); $oP.addClass("active").siblings().removeClass("active"); $oP.prev().before($oP); }); //下移 var $Down=$(".down"); $Down.click(function(){ var $oP=$(this).parents("p"); $oP.fadeOut().fadeIn(); $oP.addClass("active").siblings().removeClass("active"); $oP.next().after($oP); }) //置顶 var $Top=$(".top"); $Top.click(function(){ var $oP=$(this).parents("p"); $oP.fadeOut().fadeIn(); $oP.addClass("active").siblings().removeClass("active"); $("div").prepend($oP); }); //置底 var $Bottom=$(".bottom"); $Bottom.click(function(){ var $oP=$(this).parents("p"); $oP.fadeOut().fadeIn(); $oP.addClass("active").siblings().removeClass("active"); $("#main").append($oP); }) //删除 var $Delete=$(".delete"); $Delete.click(function(){ var $oP=$(this).parents("p"); $oP.fadeOut().fadeIn(); $oP.addClass("active").siblings().removeClass("active"); $oP.remove(); }); //全选 $("button").eq(0).click(function(){ $("input").attr("checked",true); }); //不选 $("button").eq(1).click(function(){ $("input").attr("checked",false); }); //反选 $("button").eq(2).click(function(){ $("input").each(function(){ $(this).attr("checked",!$(this).attr("checked")); }) }); //删除 $("button").eq(3).click(function(){ $("input[checked]").parents("p").remove(); }) }) </script> </head> <body> <span> <button>全选</button> <button>不选</button> <button>反选</button> <button>删除</button> </span> <div id="main"> <p> <input type="checkbox"> <span class="nav">用玻璃做个椒盐饼？这是新技术展示</span> <a href="javascript:;" class="up" javascript:;>上移</a> <a href="javascript:;" class="down">下移</a> <a href="javascript:;" class="top">置顶</a> <a href="javascript:;" class="bottom">置底</a> <a href="javascript:;" class="delete">删除</a> </p> <p> <input type="checkbox"> <span class="nav">为什么迷信也是民俗的研究对象之一？</span> <a href="javascript:;"class="up">上移</a> <a href="javascript:;"class="down">下移</a> <a href="javascript:;"class="top">置顶</a> <a href="javascript:;" class="bottom">置底</a> <a href="javascript:;" class="delete">删除</a> </p> <p> <input type="checkbox"> <span class="nav">地铁会被暴雨淹没吗？如何自救？</span> <a href="javascript:;"class="up">上移</a> <a href="javascript:;"class="down">下移</a> <a href="javascript:;"class="top">置顶</a> <a href="javascript:;" class="bottom">置底</a> <a href="javascript:;" class="delete">删除</a> </p> <p> <input type="checkbox"> <span class="nav">如何优雅地成为德意志古典哲学的追随者</span> <a href="javascript:;"class="up">上移</a> <a href="javascript:;"class="down">下移</a> <a href="javascript:;"class="top">置顶</a> <a href="javascript:;" class="bottom">置底</a> <a href="javascript:;" class="delete">删除</a> </p> <p> <input type="checkbox"> <span class="nav">什么？你把瓷器上的图案抹掉了?</span> <a href="javascript:;"class="up">上移</a> <a href="javascript:;"class="down">下移</a> <a href="javascript:;"class="top">置顶</a> <a href="javascript:;" class="bottom">置底</a> <a href="javascript:;" class="delete">删除</a> </p> </div> </body> </html>