给大家分享一个由原生JS实现的苹果官网产品展示特效，看起来很不错，效果如下：
以下是代码实现，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>苹果官网产品展示特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #EBEBED;
}
li {
list-style: none;
}
img {
border: none;
display: block;
}
.link {
height: 36px;
width: 980px;
overflow: hidden;
margin: 0 auto;
}
.link a {
line-height: 36px;
color: #777;
}
.link a:hover {
color: #555;
}
.link .left {
float: left;
}
.link .right {
float: right;
}
#box {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
background: #FFFFFF;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
margin: 5px auto 0;
width: 980px;
}
.box-header {
overflow: hidden;
position: relative;
width: 820px;
z-index: 0;
height: 160px;
margin: 0 70px;
}
.header-child {
width: 1680px;
height: 160px;
}
.header-child li {
width: 140px;
height: 160px;
float: left;
text-align: center;
}
.header-child li a {
display: inline-block;
text-decoration: none;
width:100%;
height: 140px;
font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
color: #7F7F7F;
}
.header-child li a:hover {
color: #333;
}
.header-child li a img{
width:100%;
height:100%;
}
.box-footer {
height: 30px;
text-align: center;
background: #fff;
overflow: hidden;
border-bottom: 1px solid #ebebeb;
position: relative;
}
.caret {
background: url(images/caret.gif) no-repeat scroll 0 0;
display: block;
height: 8px;
margin: 0 0 -8px -7px;
position: absolute;
width: 15px;
}
.box-footer a {
display: inline-block;
margin: 0 15px;
padding: 8px 0 6px;
cursor: pointer;
text-shadow: 0 1px 0 #FFFFFF;
}
.box-footer .show {
cursor: default;
color: #2B2B2B;
}
.box-footer a:hover {
color: #000;
}
</style>
</head>
<body>
<div class="link">
<a target="_blank" class="left"></a>
<a target="_blank" class="right"></a>
</div>
<div id="box">
<div class="box-header">
<ul class="header-child">
<li>
<a>
<img src="images/1.jpg" alt="" />iPod shuffle
</a>
</li>
<li>
<a>
<img src="images/2.jpg" alt="" />iPod nano
</a>
</li>
<li>
<a>
<img src="images/3.jpg" alt="" />iPod classic
</a>
</li>
<li>
<a>
<img src="images/4.jpg" alt="" />iPod touch
</a>
</li>
<li>
<a>
<img src="images/5.jpg" alt="" />Apple TV
</a>
</li>
<li>
<a>
<img src="images/6.jpg" alt="" />Accessories
</a>
</li>
<li>
<a>
<img src="images/7.jpg" alt="" />Download iTunes 10
</a>
</li>
<li>
<a>
<img src="images/8.jpg" alt="" />iTunes Gift Cards
</a>
</li>
<li>
<a>
<img src="images/9.jpg" alt="" />Nike + iPod
</a>
</li>
<li>
<a>
<img src="images/10.jpg" alt="" />(PRODUCT) RED
</a>
</li>
<li>
<a>
<img src="images/11.jpg" alt="" />MobileMe
</a>
</li>
<li>
<a>
<img src="images/12.jpg" alt="" />In-Ear Headphones
</a>
</li>
</ul>
</div>
<div class="box-footer">
<span style="left:424px;" class="caret"></span>
<a class="show">Products</a>
<a>iTunes and more</a>
</div>
</div>
<!-- 运动函数 -->
<script type="text/javascript">
// 移动类型
var MOVE_TYPE = {
BUFFER:1,
FLEX: 2
};
// 属性函数
function css(obj, attr, value) {
// 获取属性值
if (arguments.length == 2){
return parseFloat(obj.currentrentStyle ? obj.currentrentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
// 设置属性值
}else if (arguments.length == 3){
switch (attr) {
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value = Math.max(value, 0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr] = value + 'px';
break;
case 'opacity':
obj.style.filter = "alpha(opacity:" + value * 100 + ")";
obj.style.opacity = value;
break;
default:
obj.style[attr] = value;
};
// 返回方法方便链式调用
return function (attr, value) {
css(obj, attr, value)
};
}
};
// 开始移动
function startMove(obj, target, type, callback, during) {
var functionMove = null;
if (obj.timer) {
clearInterval(obj.timer);
};
switch (type) {
// 缓冲运动
case MOVE_TYPE.BUFFER:
functionMove = doMoveBuffer;
break;
// 弹性运动
case MOVE_TYPE.FLEX:
functionMove = doMoveFlex;
break;
};
obj.timer = setInterval(function () {
functionMove(obj,target,callback,during);
}, 15);
};
// 缓冲运动
function doMoveBuffer(obj, target, callback, during) {
var stop = true;
var attr = "";
var speed = 0;
var current = 0;
for (attr in target) {
current = css(obj,attr);
if (target[attr]!=current) {
stop = false;
speed = (target[attr] - current) / 5;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
css(obj, attr, current + speed);
}
};
if (during){during.call(obj)};
if (stop) {
clearInterval(obj.timer);
obj.timer = null;
if (callback){callback.call(obj)};
};
};
// 弹性运动
function doMoveFlex(obj, target, callback, during) {
var stop = true;
var attr = "";
var speed = 0;
var current = 0;
for (attr in target) {
if (!obj.speed) {obj.speed = {}};
if (!obj.speed[attr]){obj.speed[attr] = 0};
current = css(obj, attr);
if (Math.abs(target[attr] - current) > 1 || Math.abs(obj.speed[attr]) > 1) {
stop = false;
obj.speed[attr] += (target[attr] - current) / 5;
obj.speed[attr] *= 0.7;
var maxSpeed = 65;
if (Math.abs(obj.speed[attr]) > maxSpeed) {
obj.speed[attr] = obj.speed[attr] > 0 ? maxSpeed : -maxSpeed;
};
css(obj, attr, current + obj.speed[attr]);
}
};
if (during){during.call(obj)};
if (stop) {
clearInterval(obj.timer);
obj.timer = null;
if (callback){callback.call(obj)};
}
};
</script>
<!-- 页面逻辑 -->
<script type="text/javascript">
// 通过样式类选取元素
function getByClass(parent,name) {
var elements = parent.getElementsByTagName('*');
var result = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == name) {
result.push(elements[i]);
}
}
return result;
};
window.onload = function () {
var box = document.getElementById('box');
var list = getByClass(box, 'header-child')[0].getElementsByTagName('li');
var link = getByClass(box, 'box-footer')[0].getElementsByTagName('a');
var caret = getByClass(box, 'caret')[0];
var position = [];
var timer = null;
var i = 0;
for (i = 0; i < list.length; i++) {
list[i].index = i;
position[i] = list[i].offsetLeft;
};
for (i = 0; i < list.length; i++) {
list[i].style.position = "absolute";
list[i].style.left = position[i] + "px";
};
// 左点击
link[0].onclick = function () {
var i = list.length - 1;
clearTimeout(timer);
function next() {
var obj = list[i];
if (i >= list.length / 2) {
startMove(list[i], { left: 900 }, MOVE_TYPE.FLEX);
timer = setTimeout(next, 100);
i--;
}else {
timer = setTimeout(nextTo, 150);
}
};
function nextTo() {
if (i >= 0) {
startMove(list[i], { left: position[i] }, MOVE_TYPE.FLEX);
timer = setTimeout(nextTo, 100);
}
i--;
};
next();
link[1].className = "";
this.className = "show";
startMove(caret, { left: this.offsetLeft + this.offsetWidth / 2 }, MOVE_TYPE.BUFFER);
};
// 右点击
link[1].onclick = function (){
var i = 0;
clearTimeout(timer);
function next() {
var obj = list[i];
if (i < list.length / 2) {
startMove(list[i], { left: -200 }, MOVE_TYPE.FLEX);
timer = setTimeout(next, 100);
i++;
}else if (i == list.length / 2) {
timer = setTimeout(nextTo, 150);
}
};
function nextTo() {
if (i < list.length) {
startMove(list[i], { left: position[i - list.length / 2] }, MOVE_TYPE.FLEX);
timer = setTimeout(nextTo, 100);
};
i++;
};
next();
link[0].className = "";
this.className = "show";
startMove(caret, { left: this.offsetLeft + this.offsetWidth / 2 }, MOVE_TYPE.BUFFER);
};
};
</script>
</body>
</html>
