html +js 实现 3D 相册自动旋转+流星雨背景+轮播图

标题 3D 相册自动旋转+流星雨背景+轮播图

效果图
在相对应的位置插入图片就行了

<!--  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <embed src="1.mp3" hidden="true" autostart="true" loop="true"> -->
    <title>相册</title>
    <style>
    *{ padding:0; margin:0; list-style:none; border:0;}
    html,body #stars .abc{
            margin: 0;
            padding: 0;
        }
        body,#stars .abc{
            width: 100%;
            height: 100%;
             perspective: 1000px;
            background-color:black;
        }
        .abc
        {
            position:absolute;
             /* overflow: hidden;*/
             margin:20px auto;
        }
         #stars
        
        {
          position: absolute;

          overflow: hidden;
        
        }
    .all{
            width:250px;
            height:400px;
            padding:1px;
            border:1px solid #ccc;
            margin:120px 0px 0px 35px;
            position:relative;
            float :left;
             background-size:contain;
        }
        .screen{
          width:250px;
            height:400px;
            overflow:hidden;
            position:relative;
        }
        .screen li{ width:250px;height:400px; overflow:hidden; float:left;}
        .screen ul{ position:absolute; left:0; top:0px; width:3000px;}
        .all1{
           width:250px;
           height:400px;
            padding:1px;
            border:1px solid #ccc;
            margin:120px auto;
            position:relative;
            left:300px;
            float :right;
            background-size:contain;
        }
        .screen1{
           width:250px;
           height:400px;
             padding:0px;
            overflow:hidden;
            position:relative;
        }
        .screen1 li{ width:250px;height:400px;overflow:hidden; float:left;}
        .screen1 ul{ position:absolute; left:-10; top:0px; width:3000px;}
    
         .album
         {
            width: 546px;
            height: 546px;
         margin: 300px 0px 0px 0px;
         }
        .album,#stars{
            perspective: 2000px; 
        }
        .album .photos{
            position:relative ;
            width: 246px;
            height: 246px;
            margin: 0px 300px;
            transform-style: preserve-3d; /*设置3d风格*/
            transform: rotateX(-10deg) rotateY(0deg);
        }
        .album .photos .photo{
            display: inline-block;
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            /*background-color: ;*/
            background-size:contain;
            transition: 2s;
        }
</style>
</head>
<body >
<div class="abc" >
<!-- <p> <marquee style="background-color: white "> 时光 </marquee></p> -->
<canvas id="stars"></canvas>
<div class="all" id='all'>
    <div class="screen" id="screen">
        <ul id="ul">
            <li><img src="1.1.jpg" width="250" height="400" /></li>
            <li><img src="1.2.jpg" width="250" height="400"/></li>
            <li><img src="1.3.jpg" width="250" height="400" /></li>
            <li><img src="1.4.jpg" width="250" height="400"/></li>
            <li><img src="1.5.jpg" width="250" height="400"/></li>
        </ul>
    </div>
</div>
    <div class="album " style="float: left"  >
        <div class="photos" >
            <div class="photo" style="background-image:url(1.jpg)" >1</div>
            <div class="photo" style="background-image:url(2.jpg)" >2</div>
            <div class="photo" style="background-image:url(3.jpg)" >3</div>
            <div class="photo" style="background-image:url(4.jpg)" >4</div>
            <div class="photo" style="background-image:url(5.jpg)" >5</div>
            <div class="photo" style="background-image:url(6.jpg)" >6</div>
            <div class="photo" style="background-image:url(7.jpg)" >7</div>
            <div class="photo" style="background-image:url(8.jpg)" >8</div>
            <div class="photo" style="background-image:url(9.jpg)" >9</div>
            <div class="photo" style="background-image:url(10.jpg)">10</div>
            <div class="photo" style="background-image:url(11.jpg)">11</div>
            <div class="photo" style="background-image:url(12.jpg)">12</div>
        </div>
    </div>
     <div class="all1" id='all1'>
     <div class="screen1" id="screen1">
        <ul id="ull1">
            <li><img src="1.jpg" width="270" height="400" /></li>
            <li><img src="2.jpg" width="270" height="400" /></li>
            <li><img src="3.jpg" width="270" height="400"/></li>
            <li><img src="4.jpg" width="270" height="400"/></li>
            <li><img src="5.jpg" width="370" height="450" /></li>
        </ul>
    </div>
</div>
</div> 
<p> <marquee style="background-color: white "> ***************</marquee></p>   //跑马灯
</body>
<script>
 var context;
var arr = new Array();
var starCount = 800;
var rains = new Array();
var rainCount =20;
//初始化画布及context
function init(){
//获取canvas
var stars = document.getElementById("stars");
windowWidth = window.innerWidth; //当前的窗口的高度
stars.width=windowWidth;
stars.height=window.innerHeight;
//获取context
context = stars.getContext("2d");
}
//创建一个星星对象
var Star = function (){
this.x = windowWidth * Math.random();//横坐标
this.y = 5000 * Math.random();//纵坐标
this.text=".";//文本
this.color = "white";//颜色
//产生随机颜色
this.getColor=function(){
var _r = Math.random();
if(_r<0.5){
this.color = "#333";
}else{
this.color = "white";
}
}
//初始化
this.init=function(){
this.getColor();
}
//绘制
this.draw=function(){
context.fillStyle=this.color;
context.fillText(this.text,this.x,this.y);
}
}
function drawMoon(){
var moon = new Image();
context.drawImage(moon,-5,-10);
}
//页面加载的时候
//星星闪起来
function playStars(){
for (var n = 0; n < starCount; n++){ 
arr[n].getColor(); 
arr[n].draw(); 
} 
setTimeout("playStars()",100);
}

/*流星雨开始*/
var MeteorRain = function(){
this.x = -1;
this.y = -1;
this.length = -1;//长度
this.angle = 30; //倾斜角度
this.width = -1;//宽度
this.height = -1;//高度
this.speed = 1;//速度
this.offset_x = -1;//横轴移动偏移量
this.offset_y = -1;//纵轴移动偏移量
this.alpha = 1; //透明度
this.color1 = "";//流星的色彩
this.color2 = ""; //流星的色彩
/****************初始化函数********************/
this.init = function () //初始化
{
this.getPos();
this.alpha = 1;//透明度
this.getRandomColor();
//最小长度,最大长度
var x = Math.random() * 80 + 150;
this.length = Math.ceil(x);
// x = Math.random()*10+30;
this.angle = 30; //流星倾斜角
x = Math.random()+0.5;
this.speed = Math.ceil(x); //流星的速度
var cos = Math.cos(this.angle*3.14/180);
var sin = Math.sin(this.angle*3.14/180) ;
this.width = this.length*cos ; //流星所占宽度
this.height = this.length*sin ;//流星所占高度
this.offset_x = this.speed*cos ;
this.offset_y = this.speed*sin;
}
/**************获取随机颜色函数*****************/
this.getRandomColor = function (){
var a = Math.ceil(255-240* Math.random()); 
//中段颜色
this.color1 = "rgba("+a+","+a+","+a+",1)";
//结束颜色
this.color2 = "black";
}
/***************重新计算流星坐标的函数******************/
this.countPos = function ()//
{
//往左下移动,x减少,y增加
this.x = this.x - this.offset_x;
this.y = this.y + this.offset_y;
}
/*****************获取随机坐标的函数*****************/
this.getPos = function () //
{
//横坐标200--1200
this.x = Math.random() * window.innerWidth; //窗口高度
//纵坐标小于600
this.y = Math.random() * window.innerHeight; //窗口宽度
}
/****绘制流星***************************/
this.draw = function () //绘制一个流星的函数
{
context.save();
context.beginPath();
context.lineWidth = 1; //宽度
context.globalAlpha = this.alpha; //设置透明度
//创建横向渐变颜色,起点坐标至终点坐标
var line = context.createLinearGradient(this.x, this.y, 
this.x + this.width, 
this.y - this.height);
//分段设置颜色
line.addColorStop(0, "white");
line.addColorStop(0.3, this.color1);
line.addColorStop(0.6, this.color2);
context.strokeStyle = line;
//起点
context.moveTo(this.x, this.y);
//终点
context.lineTo(this.x + this.width, this.y - this.height);
context.closePath();
context.stroke();
context.restore();
}
this.move = function(){
//清空流星像素
var x = this.x+this.width-this.offset_x;
var y = this.y-this.height;
context.clearRect(x-3,y-3,this.offset_x+5,this.offset_y+5); 
// context.strokeStyle="red";
// context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
//重新计算位置,往左下移动
this.countPos();
//透明度增加
this.alpha -= 0.002;
//重绘
this.draw(); 
}
}
//绘制流星
function playRains(){

for (var n = 0; n < rainCount; n++){ 
var rain = rains[n];
rain.move();//移动
if(rain.y>window.innerHeight){//超出界限后重来
context.clearRect(rain.x,rain.y-rain.height,rain.width,rain.height);
rains[n] = new MeteorRain();
rains[n].init();
}
} 
setTimeout("playRains()",2);
}
    var embed=document.querySelector("embed");
    var photos = document.querySelector(".photos");
    var photo = photos.querySelectorAll(".photo");
     window.onload = function(){
          var screen1 = document.getElementById("screen1");
            var ul1 = screen1.children[0];
            var div1 = screen1.children[2];
            var imgWidth1 = screen1.offsetWidth;
            var tempLi1 = ul1.children[0].cloneNode(true);
            ul1.appendChild(tempLi1);
            var key1 = 0;
            var square1 = 0;
            var timer1 = setInterval(autoPlay1, 2000);
         
            function autoPlay1() {
                key1++;
                if(key1 > ul1.children.length - 1) {
                    ul1.style.left = 0;
                    key1 = 1;
                }
                animate1(ul1, -key1* imgWidth1);
                square1++;
                if(square1 > 4) {
                    square1 = 0;
                }
            }
              function animate1(ele,target){
                    clearInterval(ele.timer);
                    var speed = target>ele.offsetLeft?10:-10;
                    ele.timer = setInterval(function () {
                        var val = target - ele.offsetLeft;
                        ele.style.left = ele.offsetLeft + speed + "px";
                        if(Math.abs(val)<Math.abs(speed)){
                            ele.style.left = target + "px";
                            clearInterval(ele.timer1);
                        }
                    },10)  
            }
       var screen = document.getElementById("screen");
            var ul = screen.children[0];
            var div = screen.children[2];
            var imgWidth = screen.offsetWidth;
            var tempLi = ul.children[0].cloneNode(true);
            ul.appendChild(tempLi);
            var key = 0;
            var square = 0;
            var timer = setInterval(autoPlay, 2000);
            function autoPlay() {
                key++;
                if(key > ul.children.length - 1) {
                    ul.style.left = 0;
                    key = 1;
                }
                animate(ul, -key * imgWidth);
                square++;
                if(square > 4) {
                    square = 0;
                }
            }
            function animate(ele,target){
                    clearInterval(ele.timer);
                    var speed = target>ele.offsetLeft?10:-10;
                    ele.timer = setInterval(function () {
                        var val = target - ele.offsetLeft;
                        ele.style.left = ele.offsetLeft + speed + "px";
                        if(Math.abs(val)<Math.abs(speed)){
                            ele.style.left = target + "px";
                            clearInterval(ele.timer);
                        }
                    },10)  
            }
        for(var i=0;i<4;i=i+1){
            photo[i].style.transform = "rotateY("+90*(i+1)+"deg) translateZ(100px)";
                  //这里需要明白   transform的用法
            photo[i+6].style.transform = "rotateY("+90*(i+1)+"deg) translateZ(100px)";
           }
             photo[4].style.transform = "rotateX("+90+"deg)  translateZ(100px)";
             photo[10].style.transform = "rotateX("+90+"deg) translateZ(100px)";
             photo[5].style.transform = "rotateX("+270+"deg)  translateZ(100px)";
             photo[11].style.transform = "rotateX("+270+"deg) translateZ(100px)";
    
	        kaishi= function(e){// 实现外层照片的变大功能
	       for(var i=0;i<4;i=i+1){
	        photo[i+6].style.transform = "rotateY("+90*(i+1)+"deg) translateZ(250px)";
	        photo[i+6].style.width="400px";
	        photo[i+6].style.height="400px";
	        photo[i+6].style.margin= "-110px -110px";
	        photo[i+6].style.opacity="0.85";
	           }
              photo[10].style.transform = "rotateX("+90+"deg) translateZ(250px)";
              photo[10].style.width="400px";
              photo[10].style.height="400px";
              photo[10].style.margin= "-110px -110px";
              photo[10].style.opacity="0.85";
              photo[11].style.transform = "rotateX("+270+"deg) translateZ(250px)";
              photo[11].style.width="400px";
              photo[11].style.height="400px";
              photo[11].style.margin= "-110px -110px";
              photo[10].style.opacity="0.85";//照片的透明度
             var t=0; 

           show=function(){
               t++;
            photos.style.transform = "rotateX("+t*0.3+"deg) rotateY("+t*0.15+"deg)";
           
            }
             var t1=setInterval('show()',20);          
}
init();
//画星星
for (var i=0;i<starCount;i++) {
var star = new Star();
star.init();
star.draw();
arr.push(star);
}
//画流星
for (var i=0;i<rainCount;i++) {
var rain = new MeteorRain();
rain.init();
rain.draw();
rains.push(rain);
}
drawMoon();//绘制月亮
playStars();//绘制闪动的星星
playRains();//绘制流星
}
 var t2=setTimeout('kaishi()',3000);
</script>
</html >

流星雨的相对位置容易出错
流星雨是借鉴的别人的
还遗留了一个问题 就是屏幕的自适应问题

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页