HTML5与JS制作非常炫酷的3D立体图片相册展示代码

多特效代码请添加HTML5前端交流群581549454

废话不多说，上代码！

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">

<head>

<title>非常酷的3D立体图片相册展示代码</title>

</head>

<body>

</div>

</body>

</html>

代码很简单，但是能实现的效果很强大

需要文档版本源码，可以加我的HTML5前端交流群581549454

果图

各位媛猿大家好

今天给大家带来的是 CSS3 3D图片相册特效

大家可以按照自己的意愿修改成喜欢的样子！

想要文件版源码的，请加穷581549454

废话不多说，上源码！

CSS源码：

@charset "utf-8";

/*科e互联特效基本框架CSS*/

body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}

h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}

body>div{margin:0 auto}

div {text-align:left}

a img {border:0}

body { color: #333; text-align: center; font: 12px "微软雅黑"; }

ul, ol, li {list-style-type:none;vertical-align:0}

a {outline-style:none;color:#535353;text-decoration:none}

a:hover { color: #D40000; text-decoration: none}

.clear{height:0; overflow:hidden; clear:both}

.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');

}

.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}

.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}

.cor_bs,.cor_bs:hover{color:#ffffff;}

.keBody{background:url(../images/bodyBg.jpg) repeat #333;}

.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}

.kePublic{background:#FFF; padding:50px;}

.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}

.keTxtP{font-size:16px; color:#ffffff;}

.keUrl{color:#FFF; font-size:30px;}

.keUrl:hover{ text-decoration: underline; color: #FFF; }

.mKeBanner,.mKeBanner div{text-align:center;}

/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/

.warper{ width: 860px; height: 300px; border: 2px solid #efefef; margin: 0 auto; padding: 3px 3px 0px 0px; }

#wowslider-container1 { zoom: 1; position: relative; max-width: 716px; float:right; z-index: 90 }

* html #wowslider-container1 { width: 716px }

#wowslider-container1 .ws_images ul { position: relative; width: 10000%; height: auto; left: 0; list-style: none; margin: 0; padding: 0; border-spacing: 0; overflow: visible }

#wowslider-container1 .ws_images ul li { width: 1%; line-height: 0; float: left; font-size: 0; padding: 0!important; margin: 0!important }

#wowslider-container1 .ws_images { position: relative; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden }

#wowslider-container1 .ws_images a { width: 100%; display: block; color: transparent }

#wowslider-container1 img { max-width: none!important }

#wowslider-container1 .ws_images img { width: 100%; border: none 0; max-width: none; padding: 0; margin: 0 }

#wowslider-container1 a { text-decoration: none; outline: 0; border: 0 }

#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position: absolute; display: none; top: 50%; margin-top: -3.5em; z-index: 60; height: 7.1em; width: 7.1em; background-image: url(../images/arrows.png); background-size: 200% }

#wowslider-container1 a.ws_next { background-position: 100% 0; right: 1em }

#wowslider-container1 a.ws_prev { left: 1em; background-position: 0 0 }

#wowslider-container1 a.ws_next:hover { background-position: 100% 100% }

#wowslider-container1 a.ws_prev:hover { background-position: 0 100% }

* html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev { display: block }

#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev { display: block }

#wowslider-container1 .ws_playpause { display: none; width: 7.1em; height: 7.1em; position: absolute; top: 50%; left: 50%; margin-left: -3.5em; margin-top: -3.5em; z-index: 59; background-size: 100% }

#wowslider-container1:hover .ws_playpause { display: block }

#wowslider-container1 .ws_pause { background-image: url(../images/pause.png) }

#wowslider-container1 .ws_play { background-image: url(../images/play.png) }

#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover { background-position: 100% 100%!important }

#wowslider-container1 .ws-title { position: absolute; display: block; bottom: 3.5em; left: 1em; margin-right: 1em; padding: 1em .9em .9em .9em; background-color: rgba(0,0,0,0.4); color: #fff; z-index: 50; font-weight: bold; text-transform: uppercase; border-radius: .2em; -moz-border-radius: .2em; -webkit-border-radius: .2em }

#wowslider-container1 .ws-title div { margin-top: .3em; font-size: 1.6em; line-height: 1.15em; font-weight: normal; text-transform: none; color: #fff }

#wowslider-container1 .ws-title span { font-size: 2.4em }

#wowslider-container1 .ws_thumbs { font-size: 0; position: absolute; overflow: auto; z-index: 70; left: -19.51%; top: 0; width: 18.72%; height: 100% }

#wowslider-container1 .ws_thumbs img { text-decoration: none; border: 0; width: 100% }

#wowslider-container1 .ws_thumbs a { position: relative; text-indent: -4000px; color: transparent; opacity: .85; text-decoration: none; display: inline-block; border: 0; margin-bottom: 4%; text-indent: 0; padding: 2.99%; width: 89.54%; background-color: #fff }

#wowslider-container1 .ws_thumbs a:hover { opacity: 1 }

#wowslider-container1 .ws_thumbs a:hover img { visibility: visible }

#wowslider-container1 .ws_thumbs div { position: relative; width: 100% }

#wowslider-container1 .ws_thumbs a.ws_selthumb { background-color: #bce0dd }

#wowslider-container1 .ws_images ul { animation: wsBasic 16s infinite; -moz-animation: wsBasic 16s infinite; -webkit-animation: wsBasic 16s infinite }

@keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

@-moz-keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

@-webkit-keyframes wsBasic { 0% {

left:-0%

}

12.5% {

left:-0%

}

25% {

left:-100%

}

37.5% {

left:-100%

}

50% {

left:-200%

}

62.5% {

left:-200%

}

75% {

left:-300%

}

87.5% {

left:-300%

}

index：

<!DOCTYPE HTML>

<html>

<head>

<title>CSS3 3D图片相册特效 - 网页特效库 - jquery特效</title>

</head>

<h1 class="keTitle">CSS3 3D图片相册特效</h1>

<ul>

</ul>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

作放大镜，首先必须要掌握常见的六大尺寸值。如果这六个值不太熟悉的话，可能有点吃力，不过下图已经分析的很清楚了，应该能看懂。需要注意的一点是，除了鼠标位置是按照窗口来进行定位的，如图绿色画线，其他四项尺寸值是按照父元素——子元素关系来计算尺寸，如body和div1，div1和div2 。

offsetLeft和style.left主要有三点不同：

现在来分析：当放大镜（鼠标）在小图片上移动 x 距离时，大图片移动的距离Y是多少呢？

其实根据等比关系，有图中的关系：

下图中关系式，其实就是由核心公式转化而来：X/?=B/D=A/C.

（为了方便，只讨论单方向和横轴方向距离）

X:放大镜向左移动的距离；

?：大图片向右（反方向）移动的距离；

A：放大镜的宽；

B：小容器的宽，为了兼容，实际为mark的宽，不过与小容器宽相等的；

C：大容器的宽；

D：大图片的宽；

图中数字代表距离，则x的值应该如下计算：

上面就是放大镜核心原理。明白了原理后，对于放大镜的移动范围，浏览器的兼容性等细节再进行优化可以咯。

代码还是要贴上来的：

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <style>
 * {
 margin: 0;
 padding: 0
 }
 // 最外层，包裹所有元素
 #demo {
 display: block;
 width: 400px;
 height: 255px;
 margin: 50px;
 position: relative;
 border: 1px solid #ccc;
 }
 // 小容器
 #small-box {
 position: relative;
 z-index: 1;
 }
 // 放大镜
 #float-box {
 display: none;
 width: 160px;
 height: 120px;
 position: absolute;
 background: #ffffcc;
 border: 1px solid #ccc;
 filter: alpha(opacity=50);
 opacity: 0.5;
 }
 // 为了兼容IE，把添加在小图片的特性全部移到mark
 #mark {
 position: absolute;
 display: block;
 width: 400px;
 height: 255px;
 background-color: #fff;
 filter: alpha(opacity=0);
 opacity: 0;
 z-index: 10;
 }
 // 大容器
 #big-box {
 display: none;
 position: absolute;
 top: 0;
 left: 460px;
 width: 400px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #ccc;
 z-index: 1;
 ;
 }
 // 大图片
 #big-box img {
 position: absolute;
 z-index: 5
 }
 </style>
 <script>
 //页面加载完毕后执行
 window.onload = function() {
 var objDemo = document.getElementById("demo");
 var objSmallBox = document.getElementById("small-box");
 var objMark = document.getElementById("mark");
 var objFloatBox = document.getElementById("float-box");
 var objBigBox = document.getElementById("big-box");
 var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
 // 鼠标移入时触发的事件
 objMark.onmouseover = function() {
 objFloatBox.style.display = "block"
 objBigBox.style.display = "block"
 }
 // 鼠标离开时触发的事件
 objMark.onmouseout = function() {
 objFloatBox.style.display = "none"
 objBigBox.style.display = "none"
 }
 // 鼠标在小图片上移动时触发的事件
 objMark.onmousemove = function(ev) {
 // 兼容浏览器
 var _event = ev || window.event; 
 // 鼠标移动的 变化距离
 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
 var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
 // 把放大镜限制在小容器内
 if (left < 0) {
 left = 0;
 } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
 left = objMark.offsetWidth - objFloatBox.offsetWidth;
 }
 if (top < 0) {
 top = 0;
 } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
 top = objMark.offsetHeight - objFloatBox.offsetHeight;
 }
 //放大镜跟随鼠标发生移动后的当前位置
 objFloatBox.style.left = left + "px";
 objFloatBox.style.top = top + "px";
 //发生移动后，产生的 等比例 关系。
 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
 var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
 //利用等比例关系计算 大图片 反向 移动的距离
 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
 objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
 }
 }
 </script>
</head>
<body>
 <div id="demo">
 <div id="small-box">
 <div id="mark"></div>
 <div id="float-box"></div>
 <img src="macbook-small.jpg" /> // 这张是小图片。
 </div>
 <div id="big-box">
 <img src="macbook-big.jpg" /> // 这张是大图片。
 </div>
 </div>
</body>
</html>

这张是小图片，可以下载后置于源码中使用。

这张是大图片，可以下载后置于源码中使用。

在线咨询

上一篇：十天学会html+css第九天悬浮窗口固定定位 #网站
下一篇：几款非常实用的在线编辑网站，功能非常强大

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5与JS制作非常炫酷的3D立体图片相册展示代码

源代码：

需要文档版本源码，可以加我的HTML5前端交流群581549454

想要文件版源码的，请加穷581549454

CSS源码：

index：

您的项目需求