HTML：在动态背景登陆界面中加入图片轮播

项目老板专门找人做了UI登录界面,做出来之后导师拿给我们看.

你们也做一个,如果做的比他好,说不定以后他们就不找UI公司了,就会更多的靠我们了!

…
…
…
…
…

怎么才能显得高大上一点呢?最起码要有个图片轮播吧.
于是我就找了一个轮播的效果源码拿来研究.
哎.
粗心让人晚睡.

最初的轮播效果图是:

我加入到我的登陆界面后的效果图是这样的:

(我随便找了几张图片代替一下= =看着比较丑,有兴趣可以贴一下我文末的源码自己试一下)

我得到的收获:

CSS方面

属性	作用
margin	设置外边距
padding	设置内边距
margin-top	设置上外边距
position	元素位置详解
overflow	当内容溢出时操作
text-decoration	对文本进行修饰(比如是否有下划线)
text-align	设置元素中文本对齐方式
cursor	设置鼠标光标
opacity	设置透明度
transition	设置元素过渡效果(在固定秒数内变化效果)
transform	设置元素2D、3D属性(旋转、缩放、移动或倾斜)
z-index	显示层级
display	规定元素显示效果类型
float	规定元素浮动方向

JavaScript方面

.click(function(){}) 监听元素,当点击元素的时候,会触发click内部的function函数。
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
pop() 方法用于删除并返回数组的最后一个元素。
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
removeClass() 方法从被选元素移除一个或多个类。
addClass() 方法向被选元素添加一个或多个类。
each() 方法规定为每个匹配元素规定运行的函数。
$(selector).each(function(index,element))
element - 当前的元素（也可使用 “this” 选择器） index - 选择器的 index 位置
index() 方法返回指定元素相对于其他指定元素的 index 位置。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
merge() 函数用于合并两个数组内容到第一个数组。 .
reverse() 方法用于颠倒数组中元素的顺序。
eq() 方法将匹配元素集缩减值指定 index 上的一个。
.eq(index) index 整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。
siblings() 方法返回被选元素的所有同级元素。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

原效果图源码(自己把jquery放到同级目录下):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;
}.box{margin-top: 300px;width: 100%;height: 340px;position: relative;
}.list{width: 1200px;height: 300px;overflow: hidden;position: absolute;left: 50%;margin-left: -600px;
}.btn{position: absolute;top: 50%;margin-top: -50px;width: 60px;height: 100px;line-height: 100px;font-size: 30px;color: white;text-decoration: none;text-align: center;background: rgba(0,255,0,.5);cursor: pointer;
}
.next{right: 0;
}li{position: absolute;top: 0;left: 0;list-style: none;opacity: 0;transition: all 0.3s ease-out;
}
img{width: 751px;height: 300px;border:none;float: left;
}
.p1{transform:translate3d(-224px,0,0) scale(0.81);
}
.p2{transform:translate3d(0px,0,0) scale(0.81);transform-origin:0 50%;opacity: 0.8;z-index: 2;
}
.p3{transform:translate3d(224px,0,0) scale(1);z-index: 3;opacity: 1;
}
.p4{transform:translate3d(449px,0,0) scale(0.81);transform-origin:100% 50%;opacity: 0.8;z-index: 2;
}
.p5{transform:translate3d(672px,0,0) scale(0.81);
}
.p6{transform:translate3d(896px,0,0) scale(0.81);
}
.p7{transform:translate3d(1120px,0,0) scale(0.81);
}.buttons{position: absolute;width: 1200px;height: 30px;bottom: 0;left: 50%;margin-left: -600px;text-align: center;padding-top: 10px;
}
.buttons a{display: inline-block;width: 35px;height: 5px;padding-top: 4px;cursor: pointer;
}
span{display: block;width: 35px;height: 1px;background: red;
}
.blue{background: blue;
}
</style>
</head>
<body><div class="box"><div class="list"><ul><li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li><li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li><li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li><li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li><li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li><li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li><li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li></ul></div><a href="javascript:;" class="prev btn"><</a><a href="javascript:;" class="next btn">></a><div class="buttons"><a href="javascript:;"><span class="blue"></span></a><a href="javascript:;"><span></span></a><a href="javascript:;"><span></span></a><a href="javascript:;"><span></span></a><a href="javascript:;"><span></span></a><a href="javascript:;"><span></span></a><a href="javascript:;"><span></span></a></div>
</div><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(function(){nextimg();}
)
$(".prev").click(function(){previmg();}
)
function previmg(){cArr.unshift(cArr[6]);cArr.pop();$("li").each(function(i,e){$(e).removeClass().addClass(cArr[i]);})index--;if (index<0) {index=6;}show();
}
function nextimg(){cArr.push(cArr[0]);cArr.shift();$("li").each(function(i,e){$(e).removeClass().addClass(cArr[i]);})index++;if (index>6) {index=0;}show();
}
$a.each(function(){$(this).click(function(){var myindex=$(this).index();var b=myindex-index;if(b==0){return;}else if(b>0) {var newarr=cArr.splice(0,b);cArr=$.merge(cArr,newarr);$("li").each(function(i,e){$(e).removeClass().addClass(cArr[i]);})index=myindex;show();}else if(b<0){cArr.reverse();var oldarr=cArr.splice(0,-b)cArr=$.merge(cArr,oldarr);cArr.reverse();$("li").each(function(i,e){$(e).removeClass().addClass(cArr[i]);})index=myindex;show();}})
});
function show(){$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
}
$(document).on("click",".p2",function(){previmg();return false;
});
$(document).on("click",".p4",function(){nextimg();return false;
});
$(".box").mouseover(function(){clearInterval(timer);
});
$(".box").mouseleave(function(){timer=setInterval(nextimg,4000);
});
timer=setInterval(nextimg,4000);
</script></body>
</html>

我的登陆界面源码:

<!DOCTYPE html>
<html lang="ch">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta http-equiv="content-type" content="text/html;charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="vector.js"></script>
</head>
<body>
<nav class="header" id="head"><img class="Logo" src="LOGO.png"><h1 class="LogoName">123</h1>
</nav>
<div id="container"><div id="output"><div class="box_box" style="float: left"><ul ><li class="p5p5"><a href="#"><img  src="1.png" alt=""style="width: 500px;height: 280px;border: none;float: left;position:absolute;top:0"/></a></li><li class="p4p4"><a href="#"><img  src="2.png" alt=""style="width: 500px;height: 280px;border: none;float: left;position:absolute;top:0" /></a></li><li class="p3p3"><a href="#"><img  src="3.png" alt=""style="width: 500px;height: 280px;border: none;float: left;position:absolute;top:0" /></a></li></ul></div><div class="containerT" style="float: left"><h1>用户登录</h1><form class="form" id="entry_form"><div><img src="user_account.png" width="33px" height="33px" style="vertical-align:middle;" /><input class="usernameInput" name="UserName" type="text" placeholder="请输入用户名" required="" /></div><div><img src="user_password.png" width="33" height="33" style="vertical-align:middle;" /><input class="userpasswordInput" name="Password" type="password" placeholder="请输入密码" required="" /></div><div class="memoryPasswordBox"><input type="checkbox" class="checkInput" /><span class="tipSpan">记住密码</span></div></form><div ><input class="button" type="submit" value="登录" /></div></div></div>}
</div>
<div><script type="text/javascript">$(function () {Victor("container", "output");$("#entry_name").focus();$(document).keydown(function (event) {if (event.keyCode == 13) {$("#entry_btn").click();}});});var cArr=["p5p5","p4p4","p3p3"];var index=0;function previmg(){cArr.unshift(cArr[2]);cArr.pop();$("li").each(function(i){$(this).removeClass().addClass(cArr[i]);});index--;if (index<0) {index=2;}show();}function nextimg(){cArr.push(cArr[0]);cArr.shift();$("li").each(function(i,e){$(e).removeClass().addClass(cArr[i]);});index++;if (index>2) {index=0;}show();}$(document).on("click",".p5p5",function(){previmg();return false;});$(document).on("click",".p3p3",function(){nextimg();return false;});$(".box_box").mouseover(function(){clearInterval(timer);});$(".box_box").mouseleave(function(){timer=setInterval(nextimg,2000);});timer=setInterval(nextimg,2000);</script>
</div>
<div id="foot"><span class="titleSpan">123</span>
</div></body>
</html>

样式文件:

* {margin: 0;padding: 0;font-size: 13px;font-family: 黑体, Arial, sans-serif
}
html, body {width: 100%;height: 100%;background: #fff
}
#head {height: 90px;
}
.Logo {width: 90px;height: 90px;vertical-align: middle;
}
.LogoName {width: 90%;font-family: 华文行楷, Arial, sans-serif;white-space: nowrap; /* 不换行*/overflow: hidden; /*超出部分隐藏*/font-size: 60px;text-align:center;color: #00BFFF;display: inline;position: absolute;top: 18px;
}
#container {width: 100%;height: 80%;z-index: 999
}
#output {width: 100%;height: 100%
}
.box_box{width: 500px;height: 800px;text-align: center;position: absolute;margin: -150px 0 0 -200px;border-radius: 3px
}
.p3p3{transform:translate3d(-100px,30px,0) scale(0.8,1.2);z-index: 1;opacity: 1;
}
.p4p4{transform:translate3d(0,0,0) scale(1,1.4);z-index: 2;opacity: 1;
}
.p5p5{transform:translate3d(200px,30px,0) scale(0.8,1.2);z-index: 1;opacity: 1;
}
li{background: #00BFFF;position: fixed;top: 35%;left: 15%;list-style: none;transition: all 0.3s ease-out;
}
.containerT {width: 500px;height: 400px;text-align: center;position: absolute;top: 55%;left: 75%;margin: -150px 0 0 -200px;border-radius: 3px
}.containerT h1 {font-size: 35px;font-family: 华文行楷, Arial, sans-serif;font-weight: 500}form {/*所有form元素*/padding: 20px 0;position: relative;z-index: 2
}form input[class^="user"] {/*form元素中所有input*/-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, .4);background-color: rgba(255, 255, 255, .2);width: 200px;border-radius: 10px;padding: 8px 15px;margin: 0 auto 10px;display: inline-block;text-align: center;font-size: 15px;-webkit-transition-duration: .25s;transition-duration: .25s;}form input[type^="text"]:hover {background-color: rgba(255, 255, 255, .4)}form input[type^="text"]:focus {background-color: #fff;width: 230px;color: #333}.tipSpan {font-size: 20px;font-family: 华文行楷, Arial, sans-serif;
}.button {font-family: 华文行楷, Arial, sans-serif;background-color: #21a4ee;border: none;padding: 15px 32px;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 50%;
}.button:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}#foot {background-color: #2e9bff;border: 0;height: 80px;width: 100%;position: fixed;}.titleSpan {position: absolute;top: 20px;font-size: 20px;right: 40%;left: 40%;text-align: center;display: block;
}

动图背景js文件:

CAV = { FRONT: 0, BACK: 1, DOUBLE: 2, SVGNS: "http://www.w3.org/2000/svg" };
CAV.Array = typeof Float32Array === "function" ? Float32Array : Array;
CAV.Utils = {isNumber: function (a) {return !isNaN(parseFloat(a)) && isFinite(a)}
};
(function () {for (var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"];if (!window.requestAnimationFrame) window.requestAnimationFrame = function (b) {var c = (new Date).getTime(), f = Math.max(0, 16 - (c - a)), g = window.setTimeout(function () {b(c + f)}, f);a = c + f;return g};if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (a) {clearTimeout(a)}
})();
Math.PIM2 = Math.PI * 2;
Math.PID2 = Math.PI / 2;
Math.randomInRange = function (a, b) {return a + (b - a) * Math.random()
};
Math.clamp = function (a, b, c) {a = Math.max(a, b);return a = Math.min(a, c)
};
CAV.Vector3 = {create: function (a, b, c) {var d = new CAV.Array(3);this.set(d, a, b, c);return d}, clone: function (a) {var b = this.create();this.copy(b, a);return b}, set: function (a, b, c, d) {a[0] = b || 0;a[1] = c || 0;a[2] = d || 0;return this}, setX: function (a, b) {a[0] = b || 0;return this}, setY: function (a, b) {a[1] = b || 0;return this}, setZ: function (a, b) {a[2] = b || 0;return this}, copy: function (a, b) {a[0] = b[0];a[1] = b[1];a[2] = b[2];return this}, add: function (a, b) {a[0] += b[0];a[1] += b[1];a[2] += b[2];return this}, addVectors: function (a, b, c) {a[0] = b[0] +c[0];a[1] = b[1] + c[1];a[2] = b[2] + c[2];return this}, addScalar: function (a, b) {a[0] += b;a[1] += b;a[2] += b;return this}, subtract: function (a, b) {a[0] -= b[0];a[1] -= b[1];a[2] -= b[2];return this}, subtractVectors: function (a, b, c) {a[0] = b[0] - c[0];a[1] = b[1] - c[1];a[2] = b[2] - c[2];return this}, subtractScalar: function (a, b) {a[0] -= b;a[1] -= b;a[2] -= b;return this}, multiply: function (a, b) {a[0] *= b[0];a[1] *= b[1];a[2] *= b[2];return this}, multiplyVectors: function (a, b, c) {a[0] = b[0] * c[0];a[1] = b[1] * c[1];a[2] = b[2] * c[2];return this}, multiplyScalar: function (a, b) {a[0] *= b;a[1] *= b;a[2] *= b;return this}, divide: function (a, b) {a[0] /= b[0];a[1] /= b[1];a[2] /= b[2];return this}, divideVectors: function (a, b, c) {a[0] = b[0] / c[0];a[1] = b[1] / c[1];a[2] = b[2] / c[2];return this}, divideScalar: function (a, b) {b !== 0 ? (a[0] /= b, a[1] /= b, a[2] /= b) : (a[0] = 0, a[1] = 0, a[2] = 0);return this}, cross: function (a, b) {var c = a[0], d = a[1], e = a[2];a[0] = d * b[2] - e * b[1];a[1] = e * b[0] - c * b[2];a[2] = c * b[1] - d * b[0];return this}, crossVectors: function (a, b, c) {a[0] = b[1] * c[2] - b[2] * c[1];a[1] = b[2] * c[0] - b[0] * c[2];a[2] = b[0] * c[1] - b[1] * c[0];return this}, min: function (a, b) {a[0] < b && (a[0] = b);a[1] < b && (a[1] = b);a[2] < b && (a[2] = b);return this}, max: function (a, b) {a[0] > b && (a[0] = b);a[1] > b && (a[1] = b);a[2] > b && (a[2] = b);return this}, clamp: function (a, b, c) {this.min(a, b);this.max(a, c);return this}, limit: function (a, b, c) {var d = this.length(a);b !== null && d < b ? this.setLength(a, b) : c !== null && d > c && this.setLength(a, c);return this}, dot: function (a, b) {return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]}, normalise: function (a) {return this.divideScalar(a, this.length(a))}, negate: function (a) {return this.multiplyScalar(a, -1)}, distanceSquared: function (a, b) {var c = a[0] - b[0], d = a[1] - b[1], e = a[2] - b[2];return c * c + d * d + e * e}, distance: function (a, b) {return Math.sqrt(this.distanceSquared(a, b))}, lengthSquared: function (a) {return a[0] * a[0] + a[1] * a[1] + a[2] * a[2]}, length: function (a) {return Math.sqrt(this.lengthSquared(a))}, setLength: function (a, b) {var c = this.length(a);c !== 0 && b !== c && this.multiplyScalar(a, b / c);return this}
};
CAV.Vector4 = {create: function (a, b, c) {var d = new CAV.Array(4);this.set(d, a, b, c);return d}, set: function (a, b, c, d, e) {a[0] = b || 0;a[1] = c || 0;a[2] = d || 0;a[3] = e || 0;return this}, setX: function (a, b) {a[0] = b || 0;return this}, setY: function (a, b) {a[1] = b || 0;return this}, setZ: function (a, b) {a[2] = b || 0;return this}, setW: function (a, b) {a[3] = b || 0;return this}, add: function (a, b) {a[0] += b[0];a[1] += b[1];a[2] += b[2];a[3] += b[3];return this}, multiplyVectors: function (a, b, c) {a[0] = b[0] * c[0];a[1] = b[1] * c[1];a[2] = b[2] * c[2];a[3] = b[3] * c[3];return this}, multiplyScalar: function (a, b) {a[0] *= b;a[1] *= b;a[2] *= b;a[3] *= b;return this}, min: function (a, b) {a[0] < b && (a[0] = b);a[1] < b && (a[1] = b);a[2] < b && (a[2] = b);a[3] < b && (a[3] = b);return this}, max: function (a, b) {a[0] > b && (a[0] = b);a[1] > b && (a[1] = b);a[2] > b && (a[2] = b);a[3] > b && (a[3] = b);return this}, clamp: function (a, b, c) {this.min(a, b);this.max(a, c);return this}
};
CAV.Color = function (a, b) {this.rgba = CAV.Vector4.create();this.hex = a || "#000000";this.opacity = CAV.Utils.isNumber(b) ? b : 1;this.set(this.hex, this.opacity)
};
CAV.Color.prototype = {set: function (a, b) {var a = a.replace("#", ""), c = a.length / 3;this.rgba[0] = parseInt(a.substring(c * 0, c * 1), 16) / 255;this.rgba[1] = parseInt(a.substring(c * 1, c * 2), 16) / 255;this.rgba[2] = parseInt(a.substring(c * 2, c * 3), 16) / 255;this.rgba[3] = CAV.Utils.isNumber(b) ? b : this.rgba[3];return this}, hexify: function (a) {a = Math.ceil(a * 255).toString(16);a.length === 1 && (a = "0" + a);return a}, format: function () {var a = this.hexify(this.rgba[0]), b = this.hexify(this.rgba[1]), c = this.hexify(this.rgba[2]);return this.hex = "#" +a + b + c}
};
CAV.Object = function () {this.position = CAV.Vector3.create()
};
CAV.Object.prototype = {setPosition: function (a, b, c) {CAV.Vector3.set(this.position, a, b, c);return this}
};
CAV.Light = function (a, b) {CAV.Object.call(this);this.ambient = new CAV.Color(a || "#FFFFFF");this.diffuse = new CAV.Color(b || "#FFFFFF");this.ray = CAV.Vector3.create()
};
CAV.Light.prototype = Object.create(CAV.Object.prototype);
CAV.Vertex = function (a, b, c) {this.position = CAV.Vector3.create(a, b, c)
};
CAV.Vertex.prototype = {setPosition: function (a, b, c) {CAV.Vector3.set(this.position, a, b, c);return this}
};
CAV.Triangle = function (a, b, c) {this.a = a || new CAV.Vertex;this.b = b || new CAV.Vertex;this.c = c || new CAV.Vertex;this.vertices = [this.a, this.b, this.c];this.u = CAV.Vector3.create();this.v = CAV.Vector3.create();this.centroid = CAV.Vector3.create();this.normal = CAV.Vector3.create();this.color = new CAV.Color;this.polygon = document.createElementNS(CAV.SVGNS, "polygon");this.polygon.setAttributeNS(null, "stroke-linejoin", "round");this.polygon.setAttributeNS(null, "stroke-miterlimit", "1");this.polygon.setAttributeNS(null, "stroke-width", "1");this.computeCentroid();this.computeNormal()
};
CAV.Triangle.prototype = {computeCentroid: function () {this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];CAV.Vector3.divideScalar(this.centroid, 3);return this}, computeNormal: function () {CAV.Vector3.subtractVectors(this.u, this.b.position, this.a.position);CAV.Vector3.subtractVectors(this.v, this.c.position, this.a.position);CAV.Vector3.crossVectors(this.normal, this.u, this.v);CAV.Vector3.normalise(this.normal);return this}
};
CAV.Geometry = function () {this.vertices = [];this.triangles = [];this.dirty = false
};
CAV.Geometry.prototype = {update: function () {if (this.dirty) {var a, b;for (a = this.triangles.length - 1; a >= 0; a--) b = this.triangles[a], b.computeCentroid(), b.computeNormal();this.dirty = false}return this}
};
CAV.Plane = function (a, b, c, d) {CAV.Geometry.call(this);this.width = a || 100;this.height = b || 100;this.segments = c || 4;this.slices = d || 4;this.segmentWidth = this.width / this.segments;this.sliceHeight = this.height / this.slices;var e, f, g, c = [];e = this.width * -0.5;f = this.height * 0.5;for (a = 0; a <= this.segments; a++) {c.push([]);for (b = 0; b <= this.slices; b++) d = new CAV.Vertex(e + a * this.segmentWidth, f - b * this.sliceHeight), c[a].push(d), this.vertices.push(d)}for (a = 0; a < this.segments; a++) for (b = 0; b < this.slices; b++) d = c[a + 0][b + 0], e = c[a + 0][b +1], f = c[a + 1][b + 0], g = c[a + 1][b + 1], t0 = new CAV.Triangle(d, e, f), t1 = new CAV.Triangle(f, e, g), this.triangles.push(t0, t1)
};
CAV.Plane.prototype = Object.create(CAV.Geometry.prototype);
CAV.Material = function (a, b) {this.ambient = new CAV.Color(a || "#444444");this.diffuse = new CAV.Color(b || "#FFFFFF");this.slave = new CAV.Color
};
CAV.Mesh = function (a, b) {CAV.Object.call(this);this.geometry = a || new CAV.Geometry;this.material = b || new CAV.Material;this.side = CAV.FRONT;this.visible = true
};
CAV.Mesh.prototype = Object.create(CAV.Object.prototype);
CAV.Mesh.prototype.update = function (a, b) {var c, d, e, f, g;this.geometry.update();if (b) for (c = this.geometry.triangles.length - 1; c >= 0; c--) {d = this.geometry.triangles[c];CAV.Vector4.set(d.color.rgba);for (e = a.length - 1; e >= 0; e--) f = a[e], CAV.Vector3.subtractVectors(f.ray, f.position, d.centroid), CAV.Vector3.normalise(f.ray), g = CAV.Vector3.dot(d.normal, f.ray), this.side === CAV.FRONT ? g = Math.max(g, 0) : this.side === CAV.BACK ? g = Math.abs(Math.min(g, 0)) : this.side === CAV.DOUBLE && (g = Math.max(Math.abs(g), 0)), CAV.Vector4.multiplyVectors(this.material.slave.rgba, this.material.ambient.rgba, f.ambient.rgba), CAV.Vector4.add(d.color.rgba, this.material.slave.rgba), CAV.Vector4.multiplyVectors(this.material.slave.rgba, this.material.diffuse.rgba, f.diffuse.rgba), CAV.Vector4.multiplyScalar(this.material.slave.rgba, g), CAV.Vector4.add(d.color.rgba, this.material.slave.rgba);CAV.Vector4.clamp(d.color.rgba, 0, 1)}return this
};
CAV.Scene = function () {this.meshes = [];this.lights = []
};
CAV.Scene.prototype = {add: function (a) {a instanceof CAV.Mesh && !~this.meshes.indexOf(a) ? this.meshes.push(a) : a instanceof CAV.Light && !~this.lights.indexOf(a) && this.lights.push(a);return this}, remove: function (a) {a instanceof CAV.Mesh && ~this.meshes.indexOf(a) ? this.meshes.splice(this.meshes.indexOf(a), 1) : a instanceof CAV.Light && ~this.lights.indexOf(a) && this.lights.splice(this.lights.indexOf(a), 1);return this}
};
CAV.Renderer = function () {this.halfHeight = this.halfWidth = this.height = this.width = 0
};
CAV.Renderer.prototype = {setSize: function (a, b) {if (!(this.width === a && this.height === b)) return this.width = a, this.height = b, this.halfWidth = this.width * 0.5, this.halfHeight = this.height * 0.5, this}, clear: function () {return this}, render: function () {return this}
};
CAV.CanvasRenderer = function () {CAV.Renderer.call(this);this.element = document.createElement("canvas");this.element.style.display = "block";this.context = this.element.getContext("2d");this.setSize(this.element.width, this.element.height)
};
CAV.CanvasRenderer.prototype = Object.create(CAV.Renderer.prototype);
CAV.CanvasRenderer.prototype.setSize = function (a, b) {CAV.Renderer.prototype.setSize.call(this, a, b);this.element.width = a;this.element.height = b;this.context.setTransform(1, 0, 0, -1, this.halfWidth, this.halfHeight);return this
};
CAV.CanvasRenderer.prototype.clear = function () {CAV.Renderer.prototype.clear.call(this);this.context.clearRect(-this.halfWidth, -this.halfHeight, this.width, this.height);return this
};
CAV.CanvasRenderer.prototype.render = function (a) {CAV.Renderer.prototype.render.call(this, a);var b, c, d, e, f;this.clear();this.context.lineJoin = "round";this.context.lineWidth = 1;for (b = a.meshes.length - 1; b >= 0; b--) if (c = a.meshes[b], c.visible) {c.update(a.lights, true);for (d = c.geometry.triangles.length - 1; d >= 0; d--) e = c.geometry.triangles[d], f = e.color.format(), this.context.beginPath(), this.context.moveTo(e.a.position[0], e.a.position[1]), this.context.lineTo(e.b.position[0], e.b.position[1]), this.context.lineTo(e.c.position[0], e.c.position[1]), this.context.closePath(), this.context.strokeStyle = f, this.context.fillStyle = f, this.context.stroke(), this.context.fill()}return this
};function Victor(container, anitOut) {if (!!document.createElement("canvas").getContext) {var t = {width: 1.5,height: 1.5,depth: 10,segments: 12,slices: 6,xRange: 0.8,yRange: 0.1,zRange: 1,ambient: "#525252",diffuse: "#A5A5A5",speed: 0.0002};var G = {count: 2,xyScalar: 1,zOffset: 100,ambient: "#1c8bff",diffuse: "#1c8bff",speed: 0.001,gravity: 1200,dampening: 0.95,minLimit: 10,maxLimit: null,minDistance: 20,maxDistance: 400,autopilot: false,draw: false,bounds: CAV.Vector3.create(),step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))};var m = "canvas";var E = "svg";var x = { renderer: m };var i, n = Date.now();var L = CAV.Vector3.create();var k = CAV.Vector3.create();var z = document.getElementById(container || "container");var w = document.getElementById(anitOut || "anitOut");var D, I, h, q, y;var g;var r;function C() {F();p();s();B();v();K(z.offsetWidth, z.offsetHeight);o()}function F() {g = new CAV.CanvasRenderer();H(x.renderer)}function H(N) {if (D) {w.removeChild(D.element)}switch (N) {case m:D = g;break}D.setSize(z.offsetWidth, z.offsetHeight);w.appendChild(D.element)}function p() {I = new CAV.Scene()}function s() {I.remove(h);D.clear();q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);y = new CAV.Material(t.ambient, t.diffuse);h = new CAV.Mesh(q, y);I.add(h);var N, O;for (N = q.vertices.length - 1; N >= 0; N--) {O = q.vertices[N];O.anchor = CAV.Vector3.clone(O.position);O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));O.time = Math.randomInRange(0, Math.PIM2)}}function B() {var O, N;for (O = I.lights.length - 1; O >= 0; O--) {N = I.lights[O];I.remove(N)}D.clear();for (O = 0; O < G.count; O++) {N = new CAV.Light(G.ambient, G.diffuse);N.ambientHex = N.ambient.format();N.diffuseHex = N.diffuse.format();I.add(N);N.mass = Math.randomInRange(0.5, 1);N.velocity = CAV.Vector3.create();N.acceleration = CAV.Vector3.create();N.force = CAV.Vector3.create()}}function K(O, N) {D.setSize(O, N);CAV.Vector3.set(L, D.halfWidth, D.halfHeight);s()}function o() {i = Date.now() - n;u();M();requestAnimationFrame(o)}function u() {var Q, P, O, R, T, V, U, S = t.depth / 2;CAV.Vector3.copy(G.bounds, L);CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);CAV.Vector3.setZ(k, G.zOffset);for (R = I.lights.length - 1; R >= 0; R--) {T = I.lights[R];CAV.Vector3.setZ(T.position, G.zOffset);var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);var W = G.gravity * T.mass / N;CAV.Vector3.subtractVectors(T.force, k, T.position);CAV.Vector3.normalise(T.force);CAV.Vector3.multiplyScalar(T.force, W);CAV.Vector3.set(T.acceleration);CAV.Vector3.add(T.acceleration, T.force);CAV.Vector3.add(T.velocity, T.acceleration);CAV.Vector3.multiplyScalar(T.velocity, G.dampening);CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);CAV.Vector3.add(T.position, T.velocity)}for (V = q.vertices.length - 1; V >= 0; V--) {U = q.vertices[V];Q = Math.sin(U.time + U.step[0] * i * t.speed);P = Math.cos(U.time + U.step[1] * i * t.speed);O = Math.sin(U.time + U.step[2] * i * t.speed);CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);CAV.Vector3.add(U.position, U.anchor)}q.dirty = true}function M() {D.render(I)}function J(O) {var Q, N, S = O;var P = function (T) {for (Q = 0, l = I.lights.length; Q < l; Q++) {N = I.lights[Q];N.ambient.set(T);N.ambientHex = N.ambient.format()}};var R = function (T) {for (Q = 0, l = I.lights.length; Q < l; Q++) {N = I.lights[Q];N.diffuse.set(T);N.diffuseHex = N.diffuse.format()}};return {set: function () {P(S[0]);R(S[1])}}}function v() {window.addEventListener("resize", j)}function A(N) {CAV.Vector3.set(k, N.x, D.height - N.y);CAV.Vector3.subtract(k, L)}function j(N) {K(z.offsetWidth, z.offsetHeight);M()}C();}return J;
}

HTML：在动态背景登陆界面中加入图片轮播相关推荐

js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
使用三方框架FlashView在自己的项目中实现图片轮播
1 在gitHub中下载FlashView的Module 2 在安卓studio中通过 new-import Module,将flashView所在的文件夹目录导入,将名字改为lib_flashVie ...
Android fragment中广告图片轮播效果的实现（附图）
作者刚刚接触android小白一枚,这是本人在CSDN上写的第一篇博客..出于写博客的目的:一也是最重要的想让像我这样的android初学者少走点弯路,本以为这个功能实现起来挺简单的,但是项目要求在f ...
axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现工具/原料 axure7.0 方法/步骤下载需要轮播的图片将图片引入至axure中,将引入的第一张图片转为动态面板将动态 ...
在html中如何设置图片轮显,css中怎么让图片轮播？
css中让图片轮播的方法:将多个大小相同的图片横排放在一个图片中,然后在图片容器外加一个展示容器,并为图片容器添加自定义动画,在动画不同阶段设置递增的偏移值即可实现图片轮播. css让图片轮播实现思想 ...
matlab中gui界面如何保存为图片,如何保存MATLAB GUI界面中的图片
如何保存MATLAB GUI界面中的图片代码来源自网络,作者未知,侵删. 原生支持png,bmp,jpg格式.另外自行添加了清晰度比较高的eps格式(荐). 新建一个按钮,按钮的代码如下. 其中第二 ...
怎么才可以在jsp界面中插入图片
这篇文章主要介绍了如何在jsp界面中插入图片,文章通过示例代码和运行结果图介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧最近初学Java Web ...
unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析此效果的层次结构比较清楚: 1. c ...

HTML：在动态背景登陆界面中加入图片轮播

HTML：在动态背景登陆界面中加入图片轮播相关推荐

最新文章

热门文章