精华内容
下载资源
问答
  • html相册代码大全

    千次阅读 多人点赞 2021-03-15 15:10:45
    本文共有七个相册效果,都十分好看,照片可以替换成女朋友照片。 ...有些需要加照片,注意一下命名和...html相册代码大全 代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

    本文共有八个相册效果,照片可以替换成女朋友照片,背景音乐也可以换。代码3和7都是可以直接用的,其他代码的css或者js文件没有给出,所以打开可能是空白的,只有背景音乐。可以去我的资源下载所有代码------->html相册代码大全
    在这里插入图片描述
    第一个有详细的使用说明,其他的修改方法也是类似的。
    在这里插入图片描述

    最新效果可以去看我的视频—>>>女朋友炫酷照片墙 绝对高大上!!!绝对好看!!

    女朋友生日快乐代码—>>>html生日快乐代码
    html表白代码大全—>>>html表白代码大全

    电脑桌面新建一个文本文档,把代码复制进去,然后保存;再重命名文件后缀为html,就可以双击查看效果了。
    代码1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>致青春</title>
    	<style>
    		*{margin: 0;padding: 0;}
    		html,body{height: 100%;}
    		body{
    			overflow: hidden;
    			display: flex;
    			background: #000;
    			perspective: 1000px;
    			transform-style: preserve-3d; 
    		}
    		#box{
    			position: relative;
    			display: flex;
    			width: 130px;
    			height: 200px;
    			margin: auto;
    			transform-style: preserve-3d; 
    			transform: rotateX(-10deg);
    		}
    
    		#box p{
    			position: absolute;
    			left: 0;
    			top: 0;
    			bottom: 0;
    			right: 0;
    			margin: auto;
    			width: 1200px;
    			height: 1200px;
    			background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
    			border-radius: 50%;
    			transform: rotateX(90deg) translate3d(-600px,0,-105px);
    		}
    	</style>
    </head>
    <body>
    <div id="box">
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<div></div>
    	<p></p>
    </div>
    <script>
    ...
    </script>
    <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=526464145.mp3">       
    </audio>
    
    </body>
    </html>
    

    代码1说明:
    不是完整代码,需要去我的资源下载。
    代码1效果:
    在这里插入图片描述

    代码2:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>相册</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/snow.js"></script>
    <link type="text/css" href="css/style.css" rel="stylesheet">
    </head>
    <body>
    <div class="snow-container">
      <div class="ziti">
           <span>
           </span>
      </div>
    <div class="dongtai">
    <ul>
    <li><img src="image/1.jpg" alt=""></li>
    <li><img src="image/2.jpg" alt=""></li>
    <li><img src="image/3.jpg" alt=""></li>
    <li><img src="image/4.jpg" alt=""></li>
    <li><img src="image/5.jpg" alt=""></li>
    <li><img src="image/6.jpg" alt=""></li>
    </ul>
    </div>
    </div>
    <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=1827600686.mp3">       
    </audio>
    </body>
    </html>
    

    代码2说明:
    css文件和js文件没有给出来,可以去我的资源下载。
    代码2效果:
    在这里插入图片描述
    代码3:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>照片墙</title>
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
    html {
    overflow: hidden;
    }
    body {
    position: absolute;
    margin: 0px;
    padding: 0px;
    background: #fff;
    width: 100%;
    height: 100%;
    }
    #screen {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    }
    #screen img {
    position: absolute;
    cursor: pointer;
    width: 0px;
    height: 0px;
    -ms-interpolation-mode:nearest-neighbor;
    }
    #bankImages {
    visibility: hidden;
    }
    #FPS {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 10px;
    color: #666;
    font-family: verdana;
    }
    
    </style>
    
    <script type="text/javascript">
    /* ==== Easing function ==== */
    var Library = {};
    Library.ease = function () {
    this.target = 0;
    this.position = 0;
    this.move = function (target, speed) {
    this.position += (target - this.position) * speed;
    }
    }
    
    var tv = {
    /* ==== variables ==== */
    O : [],
    fps : 0,
    screen : {},
    angle : {
    x : new Library.ease(),
    y : new Library.ease()
    },
    camera : {
    x : new Library.ease(),
    y : new Library.ease()
    },
    create3DHTML : function (i, x, y, z, sw, sh) {
    /* ==== create HTML image element ==== */
    var o = document.createElement('img');
    o.src = i.src;
    tv.screen.obj.appendChild(o);
    /* ==== 3D coordinates ==== */
    o.point3D = {
    x : x,
    y : y,
    z : new Library.ease(),
    sw : sw,
    sh : sh,
    w : i.width,
    h : i.height
    };
    o.point3D.z.target = z;
    /* ==== push object ==== */
    o.point2D = {};
    tv.O.push(o);
    
    /* ==== on mouse over event ==== */
    o.onmouseover = function () {
    if (this != tv.o) {
    this.point3D.z.target = tv.mouseZ;
    tv.camera.x.target = this.point3D.x;
    tv.camera.y.target = this.point3D.y;
    if (tv.o) tv.o.point3D.z.target = 0;
    tv.o = this;
    }
    return false;
    }
    
    /* ==== on mousedown event ==== */
    o.onmousedown = function () {
    if (this == tv.o) {
    if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
    else {
    tv.o = false;
    this.onmouseover();
    }
    }
    }
    
    /* ==== main 3D function ==== */
    o.animate = function () {
    /* ==== 3D coordinates ==== */
    var x = this.point3D.x - tv.camera.x.position;
    var y = this.point3D.y - tv.camera.y.position;
    this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
    /* ==== rotations ==== */
    var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
    var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
    var yz = tv.angle.cy * xz - tv.angle.sy * x;
    var yx = tv.angle.sy * xz + tv.angle.cy * x;
    /* ==== 2D transform ==== */
    var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
    x = yx * scale;
    y = xy * scale;
    var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
    var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
    /* ==== HTML rendering ==== */
    var o = this.style;
    o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
    o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
    o.width = w + 'px';
    o.height = h + 'px';
    o.zIndex = 10000 + Math.round(scale * 1000);
    }
    },
    
    /* ==== init script ==== */
    init : function (structure, FL, mouseZ, rx, ry) {
    this.screen.obj = document.getElementById('screen');
    this.screen.obj.onselectstart = function () { return false; }
    this.screen.obj.ondrag = function () { return false; }
    this.mouseZ = mouseZ;
    this.camera.focalLength = FL;
    this.angle.rx = rx;
    this.angle.ry = ry;
    /* ==== create objects ==== */
    var i = 0, o;
    while( o = structure[i++] )
    this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
    /* ==== start script ==== */
    this.resize();
    mouse.y = this.screen.y + this.screen.h;
    mouse.x = this.screen.x + this.screen.w;
    /* ==== loop ==== */
    setInterval(tv.run, 16);
    setInterval(tv.dFPS, 1000);
    },
    
    /* ==== resize window ==== */
    resize : function () {
    var o = tv.screen.obj;
    if (o) {
    tv.screen.w = o.offsetWidth / 2;
    tv.screen.h = o.offsetHeight / 2;
    for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
    tv.screen.x += o.offsetLeft;
    tv.screen.y += o.offsetTop;
    }
    }
    },
    
    /* ==== main loop ==== */
    run : function () {
    tv.fps++;
    /* ==== motion ease ==== */
    tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
    tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
    tv.camera.x.move(tv.camera.x.target, .025);
    tv.camera.y.move(tv.camera.y.target, .025);
    /* ==== angles sin and cos ==== */
    tv.angle.cx = Math.cos(tv.angle.x.position);
    tv.angle.sx = Math.sin(tv.angle.x.position);
    tv.angle.cy = Math.cos(tv.angle.y.position);
    tv.angle.sy = Math.sin(tv.angle.y.position);
    /* ==== loop through images ==== */
    var i = 0, o;
    while( o = tv.O[i++] ) o.animate();
    },
    
    /* ==== trace frames per seconds ==== */
    dFPS : function () {
    document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
    tv.fps = 0;
    }
    }
    
    /* ==== global mouse position ==== */
    var mouse = {
    x : 0,
    y : 0
    }
    document.onmousemove = function(e) {
    if (window.event) e = window.event;
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    return false;
    }
    
    /* ==== starting script ==== */
    onload = function() {
    onresize = tv.resize;
    /* ==== build grid ==== */
    var img = document.getElementById('bankImages').getElementsByTagName('img');
    var structure = [];
    for (var i = -300; i <= 300; i += 120)
    for (var j = -300; j <= 300; j += 120)
    structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });
    /* ==== let's go ==== */
    tv.init(structure, 350, -200, .005, .0025);
    }
    
    </script>
    </head>
    
    <body>
    
    <div id="screen"></div>
    
    <div id="bankImages">
    <img alt="" src="https://c-ssl.duitang.com/uploads/item/202004/01/20200401203445_udvuq.jpg">
    </div>
    <div id="FPS"></div>
    <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=1827600686.mp3">       
    </audio>
    </body>
    </html>
    

    代码3说明:
    电脑桌面新建一个txt文本,把代码复制进去,保存后右击重命名,把后缀改为html。怎么换图片?换代码第八行的图片地址,换成本地的照片地址就可以了。
    代码3效果:
    在这里插入图片描述

    代码4:

    <!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">
        <title>Document</title>
        <style>
            *{margin:0;padding:0;}
            body{
                overflow: hidden;
                background-color: #000;
            }
            ul{list-style-type: none;}
            .wrap{
                perspective: 800px;
                width: 1120px;
                height: 630px;
                margin:50px auto;
            }
            .con{
                position:relative;
                width: 100%;
                height: 100%;
            }
            .con > li{
                transform-style: preserve-3d;
            }
            .wrap > button{
                position: absolute;
                z-index:1;
                width: 30px;
                height: 50px;
                top:50%;
                background-color: rgba(250,250,250,.5);
                border:none;
                font-size: 25px;
                color:#000;
                cursor: pointer;
                transform: translateY(-50%);
                outline:none;
            }
            .left{
                left:0;
            }
            .right{
                right:0;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <button class="left">&lt;</button>
            <ul class="con"></ul>
            <button class="right">&gt;</button>
        </div>
        <script src="js/animation.js"></script>
        <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=1824025894.mp3">       
    </audio>
    </body>
    </html>
    

    代码4说明:
    js文件没有给出,可以去我的资源下载。
    代码4效果:
    在这里插入图片描述

    代码5:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <div id="midground" class="wall"></div> 
    <div id="foreground" class="wall"></div> 
    <div class="wrap">
    
    	<img src="images/1.jpg" alt="" class="box">
    	<img src="images/2.jpg" alt="" class="box">
    	<img src="images/3.jpg" alt="" class="box">
    	<img src="images/4.jpg" alt="" class="box">
    	<img src="images/5.jpg" alt="" class="box">
    	<img src="images/6.jpg" alt="" class="box"> 
    	
    	<img src="images/7.jpg" alt="" class="square ">
    	<img src="images/8.jpg" alt="" class="square ">
    	<img src="images/9.jpg" alt="" class="square ">
    	<img src="images/10.jpg" alt="" class="square "> 
    	<img src="images/11.jpg" alt="" class="square ">
    	<img src="images/12.jpg" alt="" class="square ">
    	
    </div>
        <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=1497588709.mp3">       
    </audio>
    </body>
    </html>
    

    代码5说明:
    css文件没有给出,可以去我的资源下载。
    代码5效果:
    在这里插入图片描述
    代码6:

    <!DOCTYPE html>
    <html>
    	<head>
    		<title>允儿照片墙</title>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    		<style>
    			html, body {
    				height: 100%;
    			}
    
    				.element .details {
    					position: absolute;
    					bottom: 15px;
    					left: 0px;
    					right: 0px;
    					font-size: 12px;
    					color: rgba(127,255,255,0.75);
    				}
    
    			button {
    				color: rgba(127,255,255,0.75);
    				background: transparent;
    				outline: 1px solid rgba(127,255,255,0.75);
    				border: 0px;
    				padding: 5px 10px;
    				cursor: pointer;
    			}
    			button:hover {
    				background-color: rgba(0,255,255,0.5);
    			}
    			button:active {
    				color: #000000;
    				background-color: rgba(0,255,255,0.75);
    			}
    			.show_info{position:fixed;background-color:rgba(0,0,0,.6);padding:10px;width:300px;margin:0 auto;left: 0;right:0;border-radius: 5px;box-shadow: 0 0 10px 0 #fff;top:30%;}
    			.show_info img{display:block;margin:auto;border-radius: 5px;box-shadow: 0 0 10px 0 #888;}
    			.show_info .intro{color:#fff;text-indent:20px;margin-top:10px;height:65px;overflow:hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
    			.show_info .info_my{text-align: center;}
    			.show_info .info_my > *{display:inline-block !important;vertical-align: middle;}
    			.show_info .info_my .info_mem{color:#fff;max-width:120px;}
    			.show_info .info_my .info_mem > div{text-align: left;}
    			.show_info .info_my .info_mem > div.nickname{max-width: 120px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
    		</style>
    		<link rel="stylesheet" href="css/animate.min.css">
    	</head>
    	<body>
    		<script src="js/jquery.min.js"></script>
    		<script src="js/three.js"></script>
    		<script src="js/tween.min.js"></script>
    		<script src="js/TrackballControls.js"></script>
    		<script src="js/CSS3DRenderer.js"></script>
    
    		<div id="container"></div>
    		<div id="info">允儿照片墙</div>
    		<div id="menu">
    			<button id="table">表格</button>
    			<button id="sphere">球球</button>
    			<button id="helix">螺旋</button>
    			<button id="grid">格子</button>
    		</div>
    
    		<div class="show_info animated" style="display:none;">
    			<div class="info_my">
    				<img src="img/c.jpg" />
    				<div class="info_mem">
    					<div class="nickname">林允儿</div>
    					<div class="id">ID:兮夜女朋友</div>
    					<div class="vote">性别:女</div>
    				</div>
    			</div>
    			<div class="intro">想成为一个可以承担起责任的人</div>
    		</div>
    
    		<script>
    。。。
    
    		</script>
    	    <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=1828026086.mp3">       
    </audio>	
    	</body>
    </html>
    
    

    代码6说明:
    css和js文件没有给出,可以去我的资源下载。
    代码6效果:
    在这里插入图片描述
    代码7:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			*{
    				padding: 0;
    				margin: 0;
    			}
    			img{
    				width:200px;
    				height: 300px;
    			}
    			body{ background-color: #313131; }
    			@keyframes fn{
    				0% {transform:rotateX(-15deg) rotateY(0deg);}
    			    100%{transform:rotateX(-15deg) rotateY(360deg);}
    
    			}
    			@-moz-keyframes fn{
    				0% {transform:rotateX(-15deg) rotateY(0deg);}
    			    100%{transform:rotateX(-15deg) rotateY(360deg);}
    			}
    			@-ms-keyframes fn{
    				0% {transform:rotateX(-15deg) rotateY(0deg);}
    			    100%{transform:rotateX(-15deg) rotateY(360deg);}
    			}
    			@-webkit-keyframes fn{
    				0% {transform:rotateX(-15deg) rotateY(0deg);}
    			    100%{transform:rotateX(-15deg) rotateY(360deg);}
    			}
    			.box{				
    		    	width:200px;
                	height:300px;
                	position:relative;
                	margin:auto;
                	margin-top:150px;
                	transform-style:preserve-3d;
                	transform:rotateX(-10deg);
                	animation: fn 10s;
                	animation-iteration-count: infinite;
    		    	animation-timing-function: linear;
    		    	position: relative
    			}
    			.box:hover{
    				animation-play-state: paused;
    			}
    			.box>div{
    				width:200px;
    				height:300px;
    				position: absolute;
    				left:0;
    				top:0;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<div style="transform: rotateY(0deg) translateZ(275px);">
    				<img src="img/1.jpg" >
    			</div>
    			<div style="transform: rotateY(40deg) translateZ(275px);">
    				<img src="img/2.jpg">
    			</div>
    			<div style="transform: rotateY(80deg) translateZ(275px);">
    				<img src="img/3.jpg">
    			</div>
    			<div style="transform: rotateY(120deg) translateZ(275px);">
    				<img src="img/4.jpg">
    			</div>
    			<div style="transform: rotateY(160deg) translateZ(275px);">
    				<img src="img/5.jpg">
    			</div>
    			<div style="transform: rotateY(200deg) translateZ(275px);">
    				<img src="img/6.jpg">
    			</div>
    			<div style="transform: rotateY(240deg) translateZ(275px);">
    				<img src="img/7.jpg">
    			</div>
    			<div style="transform: rotateY(280deg) translateZ(275px);">
    				<img src="img/8.jpg">
    			</div>
    			<div style="transform: rotateY(320deg) translateZ(275px);">
    				<img src="img/9.jpg" >
    			</div>					
    		</div>
    			    <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=1828026086.mp3">       
    </audio>
    	</body>
    </html>
    
    

    代码7说明:
    电脑桌面新建一个txt文本,把代码复制进去,保存后右击重命名,把后缀改为html。最后需要自己建一个img文件夹存放图片。(和html文件放在一个文件夹下,里面的图片命名为1.jpg、2.jpg等,一共9张)
    代码7效果:
    在这里插入图片描述
    代码8:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>爱心</title>
        <style type="text/css">
            *{
                margin: 0px;
                border: 0px;
            }
            body{
    			overflow: hidden;
                background-color: #000000;
            }
            .container{
                position: relative;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                height: 260px;
                width: 200px;
                transform-origin: 50% 130%;
                transform-style: preserve-3d;
                animation: 8s rotate linear infinite;
            }
            @keyframes rotate{
                from{
                    transform:rotateX(0deg) rotateY(0deg);
                }
                to{
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            .square{
                position: relative;
                width: 100px;
                height: 100px;
                transform:translateX(50px) translateY(300px) translateZ(50px);
                transform-style: preserve-3d;
            }
            .square div{
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100px;
            }
            .square div:nth-child(1){
                top: 100px;
                transform-origin: top;
                transform:rotateX(-90deg);
            }
            .square div:nth-child(2){
                left: 100px;
                transform-origin: left;
                transform:rotateY(90deg);
            }
            .square div:nth-child(3){
                left: -100px;
                transform-origin: right;
                transform:rotateY(-90deg);
            }
            .square div:nth-child(4){
                top: -100px;
                transform-origin: bottom;
                transform:rotateX(90deg);
            }
            .square div:nth-child(6){
                top:0;
                transform:translateZ(-100px);
            }
            .square div:nth-child(5){
    
            }
            .heart{
                position: absolute;
                top:0;
                left:0;
                height: 260px;
                width: 200px;
                border: 2px solid red;
                margin: 200px auto;
                border-radius: 50% 50% 0%/50% 50% 0%;
                border-bottom: 0;
                border-left: 0;
            }
            img{
                width: 100px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="square">
                <div><img src="https://c-ssl.duitang.com/uploads/item/202004/01/20200401124333_qspom.jpg"></div>
                <div><img src="https://c-ssl.duitang.com/uploads/item/202004/01/20200401124340_rimpa.jpeg"></div>
                <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608466964941&di=79097818e33bb2b7cf01d4911db7be02&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F26%2F20190926135456_L4NeB.thumb.400_0.jpeg"></div>
                <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608466964941&di=1f5ee0885c6b3b5568240a581256abe6&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F24%2F20180624082734_otodl.jpg"></div>
                <div><img src="https://c-ssl.duitang.com/uploads/item/202003/31/20200331135146_ddrvg.jpg"></div>
                <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608466964941&di=86ccf8b49b111bbf178b95d054ac8f72&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F20%2F20181120104318_rtrct.jpg"></div>
            </div>
        </div>
    <audio autoplay="autopaly" loop="loop" id="audios" preload="auto">
        <source src="http://music.163.com/song/media/outer/url?id=1474411443.mp3" type="audio/mp3" />
    </audio>
    </body>
    </html>
    
    

    代码8补充说明:
    代码太长没有全部贴出,里面的图片地址是网上找,你也可以换成本地图片的地址。(比如女朋友的照片哈哈哈)**
    效果8:
    在这里插入图片描述

    最新效果可以去看我的视频—>>>女朋友炫酷照片墙 绝对高大上!!!绝对好看!!
    可以去我的资源下载所有代码------->html相册代码大全

    女朋友生日快乐代码—>>>html生日快乐代码
    html表白代码大全—>>>html表白代码大全

    展开全文
  • 相册实现效果如图:html和css及js 代码如下:石健涛body{background: url(images/bg.jpg);background-size: cover;/*overflow: hidden;*/}#piclist{width: 750px;height: 560px;margin: 35px auto;}#piclist img{...

    相册实现效果如图:

    20180724223958922641.jpg

    html和css及js 代码如下:

    石健涛

    body{

    background: url(images/bg.jpg);

    background-size: cover;

    /*overflow: hidden;*/

    }

    #piclist{

    width: 750px;

    height: 560px;

    margin: 35px auto;

    }

    #piclist img{

    width: 230px;

    height: 160px;

    padding: 5px;

    border: 5px solid black;

    float: left;

    display: block;

    /*设置为3D元素*/

    transform-style: preserve-3d;

    /*过度*/

    transition: 2s;

    /*阴影*/

    box-shadow: 0px 0px 20px black;

    }

    #piclist img:hover{

    transform: rotateY(360deg);

    }

    #mask{

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    position: absolute;

    background: #000000;

    /*透明度*/

    opacity: 0.5;

    /*隐藏*/

    display: none;

    }

    /*图片展开部分*/

    #show{

    display: none;

    }

    #showImage{

    width: 650px;

    height: 450px;

    position: absolute;

    left: 50%;

    top: 70px;

    box-shadow: 0px 0px 20px black;

    margin-left: -325px;

    }

    #showImage img{

    width: 650px;

    height: 450px;

    position: absolute;

    border:5px solid black;

    }

    #show span{

    width: 50px;

    position: absolute;

    height: 80px;

    box-shadow: 0px 0px 20px black;// 0:阴影水平偏移值(可取正负值); 0px:阴影垂直偏移值(可取正负值); 0px:阴影模糊值; rgba(0,0,0,0.8):阴影颜色;

    z-index: 20px;//层级

    border-radius: 10px;//边框圆角

    color: black;

    text-align: center;

    line-height: 80px;

    }

    #next{

    right: 110px;

    top: 230px;

    }

    #pre{

    left: 100px;

    top: 230px;

    }

    1.jpg

    2.jpg

    3.jpg

    4.jpg

    5.jpg

    6.jpg

    7.jpg

    8.jpg

    9.jpg

    1.jpg

    2.jpg

    3.jpg

    4.jpg

    5.jpg

    <

    >

    原文:https://www.cnblogs.com/taoda/p/9363104.html

    展开全文
  • HTML相册.zip

    2020-05-28 22:48:21
    通过HTML,CSS,JS制作的电子相册,之间也用到了jQuery库,没有涉及到后端语言,非常适合学习前端练手
  • 将目录中的所有照片处理成html相册的简单python程序。 将为索引页创建缩略​​图。 大图像将被缩小。 Exif 信息将被删除。 使用索引页模板和图像页模板,这样您就可以创建以获得您喜欢的任何设计风格颜色。 这是一个...
  • 超炫html相册

    2016-08-12 18:23:55
    微信签到背景墙
  • 基于html相册xt.zip

    2021-05-27 17:32:08
    自己没事做的一个相册欢迎指导
  • HTML相册效果实现

    千次阅读 2020-02-03 20:25:35
    最终实现的效果如下,可进入展示页面查看 展示页面:...--相册--> <div id="albums"> <a href="day_1.html"> <div class="smallpicshow"> <div cla...

    最终实现的效果如下,可进入展示页面查看
    展示页面:http://xyy9.gitee.io/roll/album.html
    相册

    HTML

    都是一样的 div 自行复制即可

    <!--相册-->
    <div id="albums">
    <a href="day_1.html">
    	<div class="smallpicshow">
    		<div class="smallpicshow_zoom">
    			<img class="smallpic" src="img/day1.jpg" >
    		</div>
    	</div>
    </a>
    <a href="day_2.html">
    	<div class="smallpicshow">
    		<div class="smallpicshow_zoom">
    			<img class="smallpic" src="img/day2.jpg" >
    		</div>
    	</div>
    </a>
    <a href="day_3.html">
    	<div class="smallpicshow">
    		<div class="smallpicshow_zoom">
    			<img class="smallpic" src="img/day3.jpg" >
    		</div>
    	</div>
    </a>
    <a href="day_1.html">
    	<div class="smallpicshow">
    		<div class="smallpicshow_zoom">
    			<img class="smallpic" src="img/1571642606356.jpeg" >
    		</div>
    	</div>
    </a>
    <a href="day_1.html">
    	<div class="smallpicshow">
    		<div class="smallpicshow_zoom">
    			<img class="smallpic" src="img/1571642606356.jpeg" >
    		</div>
    	</div>
    </a>
    

    album.css

    #context{
    	margin: 0 auto;
    	margin-top: 448px;
    	width: auto;
    	height: auto;
    	background-color: #FFFFFF;
    }
    
    #albums{
    	margin: 0 auto;
    	padding: 70px 50px 50px 140px;
    	text-align: center;
    	width: auto;
    	height: auto;
    	
    }
    
    #bgimage_album{
    	margin:0px;
    	padding:0px;
    	position: fixed;
    	right:0px;
    	bottom:200px;
    	min-width: 100%;
    	min-height: 100%;
    	width: auto;
    	height: auto;
    	z-index: -11;
    }
    
    .smallpicshow{
    	width: 200px;
    	height: 200px;
    	float: left;
    	text-align: center;
    	vertical-align: middle;
    	margin: 60px;
    }
    .smallpicshow_zoom{
    	width: 200px;
    	height: 200px;
    	box-shadow: 10px 10px 10px 10px #E5DFD3;
    	float: left;
    	overflow: hidden;
    	text-align: center;
    	vertical-align: middle;
    	transition: all 0.3s;
    }
    .smallpicshow:hover .smallpicshow_zoom{
    	width: 250px;
    	height: 250px;
    	transform: rotate(3deg);
    	box-shadow: 0px 0px 35px 35px #D6CCB7;
    }
    .smallpic{
    	width: 100%;
    	height: 100%;
    }
    

    网站源码:码云仓库
    图片:https://gitee.com/xyy9/roll/blob/master/img/1571642606356.jpeg

    展开全文
  • 今天心情大好,再发一篇最进前端实现的相册模仿功能。...下面是实现这个功能的截图如果你是一个前端,这个功能对你来说除了逻辑复杂点,其他的可能实现起都比较简单,我不是做前端的,所以前端HTML这块遇到了一...

    今天心情大好,再发一篇最进前端实现的相册模仿功能。

    这个相册是在一个网站的案例展示页面上实现的,没单独写出来,没时间,重用性也很差,以后有时间了再单独提取出来,

    写这个玩意前,我在网上找了一些案例,但是一看代码都比较傻眼,固不想去研究,所以自己写了.....

    下面是实现这个功能的截图

    00a3f3420ae73ea932aee349175292ad.png

    10c65c7f6bd489c8b193cf1f33285b60.png

    5989d27575045c19044999adbb1f5396.png

    9ba3bc5e7a8867ac77c2a6f13dd45666.png

    de32e6fae8b1259ec4873d88b1472797.png

    如果你是一个前端,这个功能对你来说除了逻辑复杂点,其他的可能实现起都比较简单,我不是做前端的,所以前端HTML这块遇到了一些问题。下面我会将我遇到的这些问题的解决方法分享出来。

    首先说下:postion这个属性 以前我要用一般是用这个属性值一般是absolute和relative相对定位和绝对定位,但是相对用得都比较少,如果你是前端你应该知道,多数用的是Margin-.....Padding-......,这次用到了postion的fixed:他被用在我的弹出层背景层里面,当然用absolute和relative也可以,但是实践证明fixed在弹出层遮罩中使用更加精准合理。为什么我知道勒,这个是由于中途出现的一个BUG后被我发现的..关于BUG我这里就不谈了,反正你记弹出层背景定位时用POSTION的fixed就对了。(下面是css样式表代码:)

    /*相册背景层 PhoneTeamrTransperantDiv这个是DIV,他的父节点是BODY,在不使用时你需要设置他的display:none*/

    .PhoneTeamrTransperantDiv{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:black; opacity: 0.7; z-index: 2147000002;}

    接着说下:拼接table表单, 呵呵关于这种玩法,做PHP的比较多,ASP.NET的是比较少的,因为ASP.NET有相应的控件,我现在虽然在ASP.NET的开发工具平台下开发网站,但是

    我已经多久没使用过拖控件的方式了。。。一般都是ASP.NET页面+HTML+AJAX做网站。 关于这个拼接table中所遇被我解决的问题,是我1-2年前做网站没解决的, 这次被我解决了呵呵,这个问题就是使用jquery来操作拼接中的标签,上次没解决我使用了javascript方法代替。这次MD标签多了,我是死了心要用jquery,没想到,功夫不负有心人,这问题就这样被我给解决了。  解决方法:将操作拼接table标签的juqery方法写在拼接table标签方法的的内部(下面我贴代码):

    /*------------------------点击后将相册需要加载的这个项目的所有图片展示到一个弹出层中(小图片)---------------------------------*/

    $(function () {

    $(".transparentDiv").click(function (e) {

    var el = e.srcElement || e.target;

    var transparentBackViewArray = $(".transparentDiv");

    var AppTitleArray = $(".appDetialTitleClass");

    for (var i = 0; i < transparentBackViewArray.length; i++) {

    var focusTransparentBackView = transparentBackViewArray[i];

    if (el == focusTransparentBackView) {

    var pointTitle = AppTitleArray[i];//根据title去查询需要加载的说明图片

    //transParentLawyer全屏幕遮蔽层

    $("#masterDiv").after('

    /* .transParentLawyer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000;}*/

    var addPxWidth = document.documentElement.clientWidth;

    var addPxHeight = document.documentElement.clientHeight;

    var alertBackDivWidth = 555;

    var alertBackDivHeight = 525;

    var alertBackStyleMarginLeft = (addPxWidth - alertBackDivWidth) / 2;

    var alertBackStyleMarginTop = (addPxHeight - alertBackDivHeight) / 2;

    var createLeft = alertBackStyleMarginLeft.toString() + 'px';

    var createTop = alertBackStyleMarginTop.toString() + 'px';

    var ProjectName = "捉大毛APP";

    var combindTable = "

    " + ProjectName + "

    "

    combindTable += "

    for (var i = 0; i < 5; i++) {

    combindTable += "

    webSite.jpg
    phoneAppBackPanel1.jpg
    phoneAppBackPanel1.jpg
    phoneAppBackPanel1.jpg
    phoneAppBackPanel1.jpg
    ";

    }

    //overFlow-y:scroll;overFlow-x:scroll;

    combindTable += '

    '

    $(".transParentLawyer").after('

    ' + combindTable + '
    ')

    break;

    }

    }//将jquery方法写在拼接table标签的jquery方法体内,而且要放在拼接操作的后面

    /*-----------弹出相册加载图片监听(为什么写在这里勒应为,我们上面的方法执行了完毕了(将我们需要加载的标签拼接好,才有我们需要操作的标签,-------------------* /

    $(".showPorjectAppImg").click(function(e)

    {

    var imageArray = $(".showPorjectAppImg");

    var el = e.srcElement || e.target;

    //相册遮罩层

    var imagePath;

    for (var i = 0; i < imageArray.length; i++)

    {

    var obj = imageArray[i];

    if(el==obj)

    {

    currentAlbumIndex = i;

    imagePath = obj.src;

    break;

    }

    }

    var addPxWidth = document.documentElement.clientWidth;

    var addPxHeight = document.documentElement.clientHeight;

    var alertBackDivWidth = 320;

    var alertBackDivHeight = 560;

    var alertBackStyleMarginLeft = (addPxWidth - alertBackDivWidth) / 2;

    var alertBackStyleMarginTop = (addPxHeight - alertBackDivHeight) / 2;

    var createLeft = alertBackStyleMarginLeft.toString() + 'px';

    var createTop = alertBackStyleMarginTop.toString() + 'px';

    $("#masterDiv").after('

    //src="+'"'+ imagePath +'"'+"/> 呵呵拼接的弹出图片

    $(".PhoneTeamrTransperantDiv").after('

    ' + "+'" + '
    ')

    $(".appProjectPrevious").click(function (e) {//上一页

    var imageArray = $(".showPorjectAppImg");

    var el = e.srcElement || e.target;

    var imagePath;

    if (currentAlbumIndex > 0)

    {

    currentAlbumIndex = currentAlbumIndex + 1;

    }

    else {

    currentAlbumIndex = imageArray.length - 1;

    }

    var obj = imageArray[currentAlbumIndex];

    imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg";//obj.src;

    // $("#rollAblumImage").attr("src", imagePath);

    $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () {

    $("#rollAblumImage").attr("src", imagePath);

    $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow");

    //var image = $("#rollAblumImage");

    // resizeimg(image, 320, 560);

    });

    })

    $(".appProjectNext").click(function (e)

    {

    // alert("adad");

    var imageArray = $(".showPorjectAppImg");

    var el = e.srcElement || e.target;

    var imagePath;

    if (currentAlbumIndex < imageArray.length-1) {

    currentAlbumIndex = currentAlbumIndex + 1;

    }

    else {

    currentAlbumIndex = 0;

    }

    var obj = imageArray[currentAlbumIndex];

    imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg";

    $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () {

    $("#rollAblumImage").attr("src", imagePath);

    $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow");

    });

    // $("#rollAblumImage").attr("src", imagePath);

    })

    })

    });

    });

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • html相册(可以送女友^_^)

    万次阅读 多人点赞 2013-10-09 00:09:01
    html相册 1.新建*.txt,把代码拷入,重命名为*.html。 2.新建文件夹,命名为11。放入6张照片,分别命名为:1.jpg,2.jpg,3.jpg,4.jpg,5.jpg,6.jpg。 3.用浏览器打开*.html 即可。 给亲爱的编的 ...
  • 程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这...本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。
  • 内容摘要:随着数码相机的普及,每次出游回来都会面对数量上百的照片整理,处理效率...照片的汇总和批量重命名:将多个相机中的图片按数字统一排序照片的编辑:无损的将JPEG图片进行翻转/反转HTML相册生成:自动生成...
  • 内容摘要:随着数码相机的普及,每次出游回来都会面对数量上百的照片整理,处理效率...照片的汇总和批量重命名:将多个相机中的图片按数字统一排序照片的编辑:无损的将JPEG图片进行翻转/反转HTML相册生成:自动生成...
  • 抖音上火爆的3D旋转相册代码,纯H5写出来效果是这样的:鼠标移动上去裂变。直接上代码css部分:html{background:linear-gradient(#FF66660%,#33669920%);/*背景渐变颜色*/height:100%;color:#99cc33;/*文字颜色*/}/*...
  • photoalbum 0.4.0 发布,支持子相册,包含一个...photoalbum 使用 ImageMagick 来生成一系列的 HTML 页面相册,它只需要一个包含图片的输入目录(可以包括多个子目录),就可以输出一个静态的 ./dist 目录,其中有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,795
精华内容 1,518
关键字:

html相册