整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多特效代碼請添加HTML5前端交流群581549454
廢話不多說，上代碼！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">
<html xmlns="http://www.aaa-cg.com.cn?lcc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>非常酷的3D立體圖片相冊展示代碼</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/lanrenzhijia.js"></script>
</head>
<body>
<div id="screen" style="zoom:1">
<span><img src="images/pr04.jpg" title="One morning" alt="-2,-1,-.8,1.5,2"></span>
<span><img src="images/pr03.jpg" title="hailing the Sun" alt="-1,-.8,0,1.2,1.6"></span>
<a target="_blank" ><img src="images/3D-eyes-big.jpg" title="befriending death" alt="-1.5,-.9,.8,3,1.8"></a>
<span><img src="images/pr01.jpg" title="world at myfingertips" alt="1,-.6,.2,1,.75"></span>
<span><img src="images/pr02.jpg" title="gathering strength" alt="-1.7,0,.4,1.4,1"></span>
<span><img src="images/pr07.jpg" title="I said, all right." alt=".5,-1,-.4,1.5,2"></span>
</div>
</body>
</html>
代碼很簡單，但是能實現的效果很強大
果圖
各位媛猿大家好
今天給大家帶來的是 CSS3 3D圖片相冊特效
大家可以按照自己的意愿 修改成喜歡的樣子！
廢話不多說，上源碼！
@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%
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 3D圖片相冊特效 - 網頁特效庫 - jquery特效</title>
<link rel='stylesheet' href='css/style.css' type='text/css' />
<script type='text/javascript' src='js/jquery.min.js'></script>
</head>
<body class="keBody">
<h1 class="keTitle">CSS3 3D圖片相冊特效</h1>
<div class="kePublic">
<!--效果html開始-->
<div class="warper">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><a target="_blank" href="#"><img title="高級職位都在這里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互聯網設計布道者馮鐵看診把脈" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="顏值不高別裝“表”" src="images/bimg3.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="高級職位都在這里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互聯網設計布道者馮鐵看診把脈" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="顏值不高別裝“表”" src="images/bimg3.jpg" /></a></li>
</ul>
</div>
<div class="ws_thumbs">
<div>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="js/slider.js"></script>
</div>
<!--效果html結束-->
<div class="clear"></div>
</div>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei'; color: #fff;">
<p>T</p>
</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>
這張是小圖片，可以下載后置于源碼中使用。
這張是大圖片，可以下載后置于源碼中使用。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
