以下是 CSS3鼠标悬停线条遮罩效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3鼠标悬停线条遮罩效果代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/tl-album.css">
<script src="js/timelineAlbum.min.js"></script>
</head>
<body>
<div class="section">
<ul class="time-album" data-rows="6" id="a">
<ul ta-name="我们非常专业">
<li class="photo">
<img data-src="img/bsb1.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsb2.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsb3.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsb4.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsb5.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
</ul>
<ul ta-name="我们非常专业">
<li class="photo">
<img data-src="img/bsc2.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsc4.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsc5.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
</ul>
<ul ta-name="我们非常专业">
<li class="photo">
<img data-src="img/bsy5.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsy2.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsy4.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
<li class="photo">
<img data-src="img/bsy5.jpg" alt="">
<p class="description">www.abc.com</p>
</li>
</ul>
</ul>
</div>
</body>
</html>
JS代码(timelineAlbum.min.js):
function init(){
var albums = document.getElementsByClassName("time-album");
document.querySelectorAll("li.photo > img");
[].forEach.call(albums,function(album){
var tlAlbum = new Tl.Albums(album);
tlAlbum.initTimeline();
}
);
}
!function(global,factory){
"function" == typeof define && define.amd ? define(factory):"object" == typeof module ? module.exports = factory():global.augment = factory();
}
(this,function(){
"use strict";
var Factory = function(){
}
,slice = Array.prototype.slice,augment = function(base,body){
var uber = Factory.prototype = "function" == typeof base ? base.prototype:base,prototype = new Factory(),properties = body.apply(prototype,slice.call(arguments,2).concat(uber));
if ("object" == typeof properties) for (var key in properties) prototype[key] = properties[key];
if (!prototype.hasOwnProperty("constructor")) return prototype;
var constructor = prototype.constructor;
return constructor.prototype = prototype,constructor;
}
;
return augment.defclass = function(prototype){
var constructor = prototype.constructor;
return constructor.prototype = prototype,constructor;
}
,augment.extend = function(base,body){
return augment(base,function(uber){
return this.uber = uber,body;
}
);
}
,augment;
}
),!function(e,r,a){
"function" == typeof define && define.amd ? define([],a):"object" == typeof exports ? module.exports = a():r[e] = a();
}
("Please",this,function(){
"use strict";
function e(){
function e(e,r,a){
var o = Math.random;
return a instanceof l && (o = a.random),Math.floor(o() * (r - e + 1)) + e;
}
function r(e,r,a){
var o = Math.random;
return a instanceof l && (o = a.random),o() * (r - e) + e;
}
function a(e,r,a){
return Math.max(r,Math.min(e,a));
}
function o(e,r){
var a;
switch (e){
case "hex":for (a = 0;
a < r.length;
a++) r[a] = F.HSV_to_HEX(r[a]);
break;
case "rgb":for (a = 0;
a < r.length;
a++) r[a] = F.HSV_to_RGB(r[a]);
break;
case "rgb-string":for (a = 0;
a < r.length;
a++){
var o = F.HSV_to_RGB(r[a]);
r[a] = "rgb(" + o.r + "," + o.g + "," + o.b + ")";
}
break;
case "hsv":break;
default:console.error("Format not recognized.");
}
return r;
}
function n(e){
var r = F.HSV_to_RGB(e),a = (299 * r.r + 587 * r.g + 114 * r.b) / 1e3;
return a >= 128 ? "dark":"light";
}
function t(e){
var r ={
}
;
for (var a in e) e.hasOwnProperty(a) && (r[a] = e[a]);
return r;
}
function l(e){
function r(){
o = (o + 1) % 256,n = (n + a[o]) % 256;
var e = a[o];
return a[o] = a[n],a[n] = e,a[(a[o] + a[n]) % 256];
}
for (var a = [],o = 0,n = 0,t = 0;
256 > t;
t++) a[t] = t;
for (var l = 0,F = 0;
256 > l;
l++){
F = (F + a[l] + e.charCodeAt(l % e.length)) % 256;
var s = a[l];
a[l] = a[F],a[F] = s;
}
this.random = function(){
for (var e = 0,a = 0,o = 1;
8 > e;
e++) a += r() * o,o *= 256;
return a / 0x10000000000000000;
}
;
}
var F ={
}
,s ={
aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"00FFFF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000000",blanchedalmond:"FFEBCD",blue:"0000FF",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED",cornsilk:"FFF8DC",crimson:"DC143C",cyan:"00FFFF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgrey:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkslategrey:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dimgrey:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0",forestgreen:"228B22",fuchsia:"FF00FF",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",grey:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgray:"D3D3D3",lightgrey:"D3D3D3",lightgreen:"90EE90",lightpink:"FFB6C1",lightsalmon:"FFA07A",lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"778899",lightslategrey:"778899",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"00FF00",limegreen:"32CD32",linen:"FAF0E6",magenta:"FF00FF",maroon:"800000",mediumaquamarine:"66CDAA",mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD",navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"6B8E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",rebeccapurple:"663399",red:"FF0000",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB",slateblue:"6A5ACD",slategray:"708090",slategrey:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFFFFF",whitesmoke:"F5F5F5",yellow:"FFFF00",yellowgreen:"9ACD32"}
,i = .618033988749895,u ={
hue:null,saturation:null,value:null,base_color:"",greyscale:!1,grayscale:!1,golden:!0,full_random:!1,colors_returned:1,format:"hex",seed:null}
,c ={
scheme_type:"analogous",format:"hex"}
,h ={
golden:!1,format:"hex"}
;
return F.NAME_to_HEX = function(e){
return e = e.toLowerCase(),e in s ? s[e]:void console.error("Color name not recognized.");
}
,F.NAME_to_RGB = function(e){
return F.HEX_to_RGB(F.NAME_to_HEX(e));
}
,F.NAME_to_HSV = function(e){
return F.HEX_to_HSV(F.NAME_to_HEX(e));
}
,F.HEX_to_RGB = function(e){
var r = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
e = e.replace(r,function(e,r,a,o){
return r + r + a + a + o + o;
}
);
var a = /^#?([a-f\d]{
2}
)([a-f\d]{
2}
)([a-f\d]{
2}
)$/i.exec(e);
return a ?{
r:parseInt(a[1],16),g:parseInt(a[2],16),b:parseInt(a[3],16)}
:null;
}
,F.RGB_to_HEX = function(e){
return "#" + ((1 << 24) + (e.r << 16) + (e.g << 8) + e.b).toString(16).slice(1);
}
,F.HSV_to_RGB = function(e){
var r,a,o,n,t,l,F,s,i = e.h,u = e.s,c = e.v;
if (0 === u) return{
r:c,g:c,b:c}
;
switch (i /= 60,n = Math.floor(i),t = i - n,l = c * (1 - u),F = c * (1 - u * t),s = c * (1 - u * (1 - t)),n){
case 0:r = c,a = s,o = l;
break;
case 1:r = F,a = c,o = l;
break;
case 2:r = l,a = c,o = s;
break;
case 3:r = l,a = F,o = c;
break;
case 4:r = s,a = l,o = c;
break;
case 5:r = c,a = l,o = F;
}
return{
r:Math.floor(255 * r),g:Math.floor(255 * a),b:Math.floor(255 * o)}
;
}
,F.RGB_to_HSV = function(e){
var r = e.r / 255,a = e.g / 255,o = e.b / 255,n = 0,t = 0,l = 0,F = Math.min(r,Math.min(a,o)),s = Math.max(r,Math.max(a,o));
if (F === s) return l = F,{
h:0,s:0,v:l}
;
var i = r === F ? a - o:o === F ? r - a:o - r,u = r === F ? 3:o === F ? 1:5;
return n = 60 * (u - i / (s - F)),t = (s - F) / s,l = s,{
h:n,s:t,v:l}
;
}
,F.HSV_to_HEX = function(e){
return F.RGB_to_HEX(F.HSV_to_RGB(e));
}
,F.HEX_to_HSV = function(e){
return F.RGB_to_HSV(F.HEX_to_RGB(e));
}
,F.make_scheme = function(e,r){
function n(e){
return{
h:e.h,s:e.s,v:e.v}
;
}
var l,F,s,i,u,h = t(c);
if (null !== r) for (var d in r) r.hasOwnProperty(d) && (h[d] = r[d]);
var g = [ e ];
switch (h.scheme_type.toLowerCase()){
case "monochromatic":case "mono":for (u = 1;
2 >= u;
u++) l = n(e),s = l.s + .1 * u,s = a(s,0,1),i = l.v + .1 * u,i = a(i,0,1),l.s = s,l.v = i,g.push(l);
for (u = 1;
2 >= u;
u++) l = n(e),s = l.s - .1 * u,s = a(s,0,1),i = l.v - .1 * u,i = a(i,0,1),l.s = s,l.v = i,g.push(l);
break;
case "complementary":case "complement":case "comp":l = n(e),l.h = (l.h + 180) % 360,g.push(l);
break;
case "split-complementary":case "split-complement":case "split":l = n(e),l.h = (l.h + 165) % 360,g.push(l),l = n(e),l.h = Math.abs((l.h - 165) % 360),g.push(l);
break;
case "double-complementary":case "double-complement":case "double":l = n(e),l.h = (l.h + 180) % 360,g.push(l),l.h = (l.h + 30) % 360,F = n(l),g.push(l),l.h = (l.h + 180) % 360,g.push(F);
break;
case "analogous":case "ana":for (u = 1;
5 >= u;
u++) l = n(e),l.h = (l.h + 20 * u) % 360,g.push(l);
break;
case "triadic":case "triad":case "tri":for (u = 1;
3 > u;
u++) l = n(e),l.h = (l.h + 120 * u) % 360,g.push(l);
break;
default:console.error("Color scheme not recognized.");
}
return o(h.format.toLowerCase(),g),g;
}
,F.make_color = function(n){
var s = [],c = t(u),h = null;
if (null !== n) for (var d in n) n.hasOwnProperty(d) && (c[d] = n[d]);
var g = null;
"string" == typeof c.seed && (g = new l(c.seed)),c.base_color.length > 0 && (h = c.base_color.match(/^#?([0-9a-f]{
3}
)([0-9a-f]{
3}
)?$/i) ? F.HEX_to_HSV(c.base_color):F.NAME_to_HSV(c.base_color));
for (var m = 0;
m < c.colors_returned;
m++){
var f,E,b,p = e(0,360,g);
null !== h ? (f = a(e(h.h - 5,h.h + 5,g),0,360),E = 0 === h.s ? 0:r(.4,.85,g),b = r(.4,.85,g),s.push({
h:f,s:E,v:b}
)):(f = c.greyscale === !0 || c.grayscale === !0 ? 0:c.golden === !0 ? (p + p / i) % 360:null === c.hue || c.full_random === !0 ? p:a(c.hue,0,360),E = c.greyscale === !0 || c.grayscale === !0 ? 0:c.full_random === !0 ? r(0,1,g):null === c.saturation ? .4:a(c.saturation,0,1),b = c.full_random === !0 ? r(0,1,g):c.greyscale === !0 || c.grayscale === !0 ? r(.15,.75,g):null === c.value ? .75:a(c.value,0,1),s.push({
h:f,s:E,v:b}
));
}
return o(c.format.toLowerCase(),s),s;
}
,F.make_contrast = function(e,r){
var l = t(h);
if (null !== r) for (var s in r) r.hasOwnProperty(s) && (l[s] = r[s]);
var u,c,d = n(e);
if (l.golden === !0) c = e.h * (1 + i) % 360;
else{
var g = F.make_scheme(e,{
scheme_type:"complementary",format:"hsv"}
)[1];
c = a(g.h - 30,0,360);
}
var m;
return "dark" === d ? m = a(e.v - .25,0,1):"light" === d && (m = a(e.v + .25,0,1)),u = [{
h:c,s:e.s,v:m}
],o(l.format.toLowerCase(),u),u[0];
}
,F;
}
return e();
}
),function(root,factory){
"function" == typeof define && define.amd ? define(factory):root.Dragdealer = factory();
}
(this,function(){
function getPrefixedStylePropName(propName){
var domPrefixes = "Webkit Moz ms O".split(" "),elStyle = document.documentElement.style;
if (void 0 !== elStyle[propName]) return propName;
propName = propName.charAt(0).toUpperCase() + propName.substr(1);
for (var i = 0;
i < domPrefixes.length;
i++) if (void 0 !== elStyle[domPrefixes[i] + propName]) return domPrefixes[i] + propName;
}
function triggerWebkitHardwareAcceleration(element){
StylePrefix.backfaceVisibility && StylePrefix.perspective && (element.style[StylePrefix.perspective] = "1000px",element.style[StylePrefix.backfaceVisibility] = "hidden");
}
var Dragdealer = function(wrapper,options){
this.options = this.applyDefaults(options ||{
}
),this.bindMethods(),this.wrapper = this.getWrapperElement(wrapper),this.wrapper && (this.handle = this.getHandleElement(this.wrapper,this.options.handleClass),this.handle && (this.init(),this.bindEventListeners()));
}
;
Dragdealer.prototype ={
defaults:{
disabled:!1,horizontal:!0,vertical:!1,slide:!0,steps:0,snap:!1,loose:!1,speed:.1,xPrecision:0,yPrecision:0,handleClass:"handle",css3:!0,activeClass:"active",tapping:!0}
,init:function(){
this.options.css3 && triggerWebkitHardwareAcceleration(this.handle),this.value ={
prev:[ -1,-1 ],current:[ this.options.x || 0,this.options.y || 0 ],target:[ this.options.x || 0,this.options.y || 0 ]}
,this.offset ={
wrapper:[ 0,0 ],mouse:[ 0,0 ],prev:[ -999999,-999999 ],current:[ 0,0 ],target:[ 0,0 ]}
,this.change = [ 0,0 ],this.stepRatios = this.calculateStepRatios(),this.activity = !1,this.dragging = !1,this.tapping = !1,this.reflow(),this.options.disabled && this.disable();
}
,applyDefaults:function(options){
for (var k in this.defaults) options.hasOwnProperty(k) || (options[k] = this.defaults[k]);
return options;
}
,getWrapperElement:function(wrapper){
return "string" == typeof wrapper ? document.getElementById(wrapper):wrapper;
}
,getHandleElement:function(wrapper,handleClass){
var childElements,handleClassMatcher,i;
if (wrapper.getElementsByClassName){
if (childElements = wrapper.getElementsByClassName(handleClass),childElements.length > 0) return childElements[0];
}
else for (handleClassMatcher = new RegExp("(^|\\s)" + handleClass + "(\\s|$)"),childElements = wrapper.getElementsByTagName("*"),i = 0;
i < childElements.length;
i++) if (handleClassMatcher.test(childElements[i].className)) return childElements[i];
}
,calculateStepRatios:function(){
var stepRatios = [];
if (this.options.steps >= 1) for (var i = 0;
i <= this.options.steps - 1;
i++) this.options.steps > 1 ? stepRatios[i] = i / (this.options.steps - 1):stepRatios[i] = 0;
return stepRatios;
}
,setWrapperOffset:function(){
this.offset.wrapper = Position.get(this.wrapper);
}
,calculateBounds:function(){
var bounds ={
top:this.options.top || 0,bottom:-(this.options.bottom || 0) + this.wrapper.offsetHeight,left:this.options.left || 0,right:-(this.options.right || 0) + this.wrapper.offsetWidth}
;
return bounds.availWidth = bounds.right - bounds.left - this.handle.offsetWidth,bounds.availHeight = bounds.bottom - bounds.top - this.handle.offsetHeight,bounds;
}
,calculateValuePrecision:function(){
var xPrecision = this.options.xPrecision || Math.abs(this.bounds.availWidth),yPrecision = this.options.yPrecision || Math.abs(this.bounds.availHeight);
return [ xPrecision ? 1 / xPrecision:0,yPrecision ? 1 / yPrecision:0 ];
}
,bindMethods:function(){
"function" == typeof this.options.customRequestAnimationFrame ? this.requestAnimationFrame = bind(this.options.customRequestAnimationFrame,window):this.requestAnimationFrame = bind(requestAnimationFrame,window),"function" == typeof this.options.customCancelAnimationFrame ? this.cancelAnimationFrame = bind(this.options.customCancelAnimationFrame,window):this.cancelAnimationFrame = bind(cancelAnimationFrame,window),this.animateWithRequestAnimationFrame = bind(this.animateWithRequestAnimationFrame,this),this.animate = bind(this.animate,this),this.onHandleMouseDown = bind(this.onHandleMouseDown,this),this.onHandleTouchStart = bind(this.onHandleTouchStart,this),this.onDocumentMouseMove = bind(this.onDocumentMouseMove,this),this.onWrapperTouchMove = bind(this.onWrapperTouchMove,this),this.onWrapperMouseDown = bind(this.onWrapperMouseDown,this),this.onWrapperTouchStart = bind(this.onWrapperTouchStart,this),this.onDocumentMouseUp = bind(this.onDocumentMouseUp,this),this.onDocumentTouchEnd = bind(this.onDocumentTouchEnd,this),this.onHandleClick = bind(this.onHandleClick,this),this.onWindowResize = bind(this.onWindowResize,this);
}
,bindEventListeners:function(){
addEventListener(this.handle,"mousedown",this.onHandleMouseDown),addEventListener(this.handle,"touchstart",this.onHandleTouchStart),addEventListener(document,"mousemove",this.onDocumentMouseMove),addEventListener(this.wrapper,"touchmove",this.onWrapperTouchMove),addEventListener(this.wrapper,"mousedown",this.onWrapperMouseDown),addEventListener(this.wrapper,"touchstart",this.onWrapperTouchStart),addEventListener(document,"mouseup",this.onDocumentMouseUp),addEventListener(document,"touchend",this.onDocumentTouchEnd),addEventListener(this.handle,"click",this.onHandleClick),addEventListener(window,"resize",this.onWindowResize),this.animate(!1,!0),this.interval = this.requestAnimationFrame(this.animateWithRequestAnimationFrame);
}
,unbindEventListeners:function(){
removeEventListener(this.handle,"mousedown",this.onHandleMouseDown),removeEventListener(this.handle,"touchstart",this.onHandleTouchStart),removeEventListener(document,"mousemove",this.onDocumentMouseMove),removeEventListener(this.wrapper,"touchmove",this.onWrapperTouchMove),removeEventListener(this.wrapper,"mousedown",this.onWrapperMouseDown),removeEventListener(this.wrapper,"touchstart",this.onWrapperTouchStart),removeEventListener(document,"mouseup",this.onDocumentMouseUp),removeEventListener(document,"touchend",this.onDocumentTouchEnd),removeEventListener(this.handle,"click",this.onHandleClick),removeEventListener(window,"resize",this.onWindowResize),this.cancelAnimationFrame(this.interval);
}
,onHandleMouseDown:function(e){
Cursor.refresh(e),preventEventDefaults(e),stopEventPropagation(e),this.activity = !1,this.startDrag();
}
,onHandleTouchStart:function(e){
Cursor.refresh(e),stopEventPropagation(e),this.activity = !1,this.startDrag();
}
,onDocumentMouseMove:function(e){
Cursor.refresh(e),this.dragging && (this.activity = !0,preventEventDefaults(e));
}
,onWrapperTouchMove:function(e){
return Cursor.refresh(e),!this.activity && this.draggingOnDisabledAxis() ? void (this.dragging && this.stopDrag()):(preventEventDefaults(e),void (this.activity = !0));
}
,onWrapperMouseDown:function(e){
Cursor.refresh(e),preventEventDefaults(e),this.startTap();
}
,onWrapperTouchStart:function(e){
Cursor.refresh(e),preventEventDefaults(e),this.startTap();
}
,onDocumentMouseUp:function(e){
this.stopDrag(),this.stopTap();
}
,onDocumentTouchEnd:function(e){
this.stopDrag(),this.stopTap();
}
,onHandleClick:function(e){
this.activity && (preventEventDefaults(e),stopEventPropagation(e));
}
,onWindowResize:function(e){
this.reflow();
}
,enable:function(){
this.disabled = !1,this.handle.className = this.handle.className.replace(/\s?disabled/g,"");
}
,disable:function(){
this.disabled = !0,this.handle.className += " disabled";
}
,reflow:function(){
this.setWrapperOffset(),this.bounds = this.calculateBounds(),this.valuePrecision = this.calculateValuePrecision(),this.updateOffsetFromValue();
}
,getStep:function(){
return [ this.getStepNumber(this.value.target[0]),this.getStepNumber(this.value.target[1]) ];
}
,getValue:function(){
return this.value.target;
}
,setStep:function(x,y,snap){
this.setValue(this.options.steps && x > 1 ? (x - 1) / (this.options.steps - 1):0,this.options.steps && y > 1 ? (y - 1) / (this.options.steps - 1):0,snap);
}
,setValue:function(x,y,snap){
this.setTargetValue([ x,y || 0 ]),snap && (this.groupCopy(this.value.current,this.value.target),this.updateOffsetFromValue(),this.callAnimationCallback());
}
,startTap:function(){
!this.disabled && this.options.tapping && (this.tapping = !0,this.setWrapperOffset(),this.setTargetValueByOffset([ Cursor.x - this.offset.wrapper[0] - this.handle.offsetWidth / 2,Cursor.y - this.offset.wrapper[1] - this.handle.offsetHeight / 2 ]));
}
,stopTap:function(){
!this.disabled && this.tapping && (this.tapping = !1,this.setTargetValue(this.value.current));
}
,startDrag:function(){
this.disabled || (this.dragging = !0,this.setWrapperOffset(),this.offset.mouse = [ Cursor.x - Position.get(this.handle)[0],Cursor.y - Position.get(this.handle)[1] ],this.wrapper.className.match(this.options.activeClass) || (this.wrapper.className += " " + this.options.activeClass),this.callDragStartCallback());
}
,stopDrag:function(){
if (!this.disabled && this.dragging){
this.dragging = !1;
var target = this.groupClone(this.value.current);
if (this.options.slide){
var ratioChange = this.change;
target[0] += 4 * ratioChange[0],target[1] += 4 * ratioChange[1];
}
this.setTargetValue(target),this.wrapper.className = this.wrapper.className.replace(" " + this.options.activeClass,""),this.callDragStopCallback();
}
}
,callAnimationCallback:function(){
var value = this.value.current;
this.options.snap && this.options.steps > 1 && (value = this.getClosestSteps(value)),this.groupCompare(value,this.value.prev) || ("function" == typeof this.options.animationCallback && this.options.animationCallback.call(this,value[0],value[1]),this.groupCopy(this.value.prev,value));
}
,callTargetCallback:function(){
"function" == typeof this.options.callback && this.options.callback.call(this,this.value.target[0],this.value.target[1]);
}
,callDragStartCallback:function(){
"function" == typeof this.options.dragStartCallback && this.options.dragStartCallback.call(this,this.value.target[0],this.value.target[1]);
}
,callDragStopCallback:function(){
"function" == typeof this.options.dragStopCallback && this.options.dragStopCallback.call(this,this.value.target[0],this.value.target[1]);
}
,animateWithRequestAnimationFrame:function(time){
time ? (this.timeOffset = this.timeStamp ? time - this.timeStamp:0,this.timeStamp = time):this.timeOffset = 25,this.animate(),this.interval = this.requestAnimationFrame(this.animateWithRequestAnimationFrame);
}
,animate:function(direct,first){
if (!direct || this.dragging){
if (this.dragging){
var prevTarget = this.groupClone(this.value.target),offset = [ Cursor.x - this.offset.wrapper[0] - this.offset.mouse[0],Cursor.y - this.offset.wrapper[1] - this.offset.mouse[1] ];
this.setTargetValueByOffset(offset,this.options.loose),this.change = [ this.value.target[0] - prevTarget[0],this.value.target[1] - prevTarget[1] ];
}
(this.dragging || first) && this.groupCopy(this.value.current,this.value.target),(this.dragging || this.glide() || first) && (this.updateOffsetFromValue(),this.callAnimationCallback());
}
}
,glide:function(){
var diff = [ this.value.target[0] - this.value.current[0],this.value.target[1] - this.value.current[1] ];
return diff[0] || diff[1] ? (Math.abs(diff[0]) > this.valuePrecision[0] || Math.abs(diff[1]) > this.valuePrecision[1] ? (this.value.current[0] += diff[0] * this.options.speed * this.timeOffset / 25,this.value.current[1] += diff[1] * this.options.speed * this.timeOffset / 25):this.groupCopy(this.value.current,this.value.target),!0):!1;
}
,updateOffsetFromValue:function(){
this.options.snap ? this.offset.current = this.getOffsetsByRatios(this.getClosestSteps(this.value.current)):this.offset.current = this.getOffsetsByRatios(this.value.current),this.groupCompare(this.offset.current,this.offset.prev) || (this.renderHandlePosition(),this.groupCopy(this.offset.prev,this.offset.current));
}
,renderHandlePosition:function(){
var transform = "";
return this.options.css3 && StylePrefix.transform ? (this.options.horizontal && (transform += "translateX(" + this.offset.current[0] + "px)"),this.options.vertical && (transform += " translateY(" + this.offset.current[1] + "px)"),void (this.handle.style[StylePrefix.transform] = transform)):(this.options.horizontal && (this.handle.style.left = this.offset.current[0] + "px"),void (this.options.vertical && (this.handle.style.top = this.offset.current[1] + "px")));
}
,setTargetValue:function(value,loose){
var target = loose ? this.getLooseValue(value):this.getProperValue(value);
this.groupCopy(this.value.target,target),this.offset.target = this.getOffsetsByRatios(target),this.callTargetCallback();
}
,setTargetValueByOffset:function(offset,loose){
var value = this.getRatiosByOffsets(offset),target = loose ? this.getLooseValue(value):this.getProperValue(value);
this.groupCopy(this.value.target,target),this.offset.target = this.getOffsetsByRatios(target);
}
,getLooseValue:function(value){
var proper = this.getProperValue(value);
return [ proper[0] + (value[0] - proper[0]) / 4,proper[1] + (value[1] - proper[1]) / 4 ];
}
,getProperValue:function(value){
var proper = this.groupClone(value);
return proper[0] = Math.max(proper[0],0),proper[1] = Math.max(proper[1],0),proper[0] = Math.min(proper[0],1),proper[1] = Math.min(proper[1],1),(!this.dragging && !this.tapping || this.options.snap) && this.options.steps > 1 && (proper = this.getClosestSteps(proper)),proper;
}
,getRatiosByOffsets:function(group){
return [ this.getRatioByOffset(group[0],this.bounds.availWidth,this.bounds.left),this.getRatioByOffset(group[1],this.bounds.availHeight,this.bounds.top) ];
}
,getRatioByOffset:function(offset,range,padding){
return range ? (offset - padding) / range:0;
}
,getOffsetsByRatios:function(group){
return [ this.getOffsetByRatio(group[0],this.bounds.availWidth,this.bounds.left),this.getOffsetByRatio(group[1],this.bounds.availHeight,this.bounds.top) ];
}
,getOffsetByRatio:function(ratio,range,padding){
return Math.round(ratio * range) + padding;
}
,getStepNumber:function(value){
return this.getClosestStep(value) * (this.options.steps - 1) + 1;
}
,getClosestSteps:function(group){
return [ this.getClosestStep(group[0]),this.getClosestStep(group[1]) ];
}
,getClosestStep:function(value){
for (var k = 0,min = 1,i = 0;
i <= this.options.steps - 1;
i++) Math.abs(this.stepRatios[i] - value) < min && (min = Math.abs(this.stepRatios[i] - value),k = i);
return this.stepRatios[k];
}
,groupCompare:function(a,b){
return a[0] == b[0] && a[1] == b[1];
}
,groupCopy:function(a,b){
a[0] = b[0],a[1] = b[1];
}
,groupClone:function(a){
return [ a[0],a[1] ];
}
,draggingOnDisabledAxis:function(){
return !this.options.horizontal && Cursor.xDiff > Cursor.yDiff || !this.options.vertical && Cursor.yDiff > Cursor.xDiff;
}
}
;
for (var bind = function(fn,context){
return function(){
return fn.apply(context,arguments);
}
;
}
,addEventListener = function(element,type,callback){
element.addEventListener ? element.addEventListener(type,callback,!1):element.attachEvent && element.attachEvent("on" + type,callback);
}
,removeEventListener = function(element,type,callback){
element.removeEventListener ? element.removeEventListener(type,callback,!1):element.detachEvent && element.detachEvent("on" + type,callback);
}
,preventEventDefaults = function(e){
e || (e = window.event),e.preventDefault && e.preventDefault(),e.returnValue = !1;
}
,stopEventPropagation = function(e){
e || (e = window.event),e.stopPropagation && e.stopPropagation(),e.cancelBubble = !0;
}
,Cursor ={
x:0,y:0,xDiff:0,yDiff:0,refresh:function(e){
e || (e = window.event),"mousemove" == e.type ? this.set(e):e.touches && this.set(e.touches[0]);
}
,set:function(e){
var lastX = this.x,lastY = this.y;
e.clientX || e.clientY ? (this.x = e.clientX,this.y = e.clientY):(e.pageX || e.pageY) && (this.x = e.pageX - document.body.scrollLeft - document.documentElement.scrollLeft,this.y = e.pageY - document.body.scrollTop - document.documentElement.scrollTop),this.xDiff = Math.abs(this.x - lastX),this.yDiff = Math.abs(this.y - lastY);
}
}
,Position ={
get:function(obj){
var rect ={
left:0,top:0}
;
return void 0 !== obj.getBoundingClientRect && (rect = obj.getBoundingClientRect()),[ rect.left,rect.top ];
}
}
,StylePrefix ={
transform:getPrefixedStylePropName("transform"),perspective:getPrefixedStylePropName("perspective"),backfaceVisibility:getPrefixedStylePropName("backfaceVisibility")}
,vendors = [ "webkit","moz" ],requestAnimationFrame = window.requestAnimationFrame,cancelAnimationFrame = window.cancelAnimationFrame,x = 0;
x < vendors.length && !requestAnimationFrame;
++x) requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"],cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
return requestAnimationFrame || (requestAnimationFrame = function(callback){
return setTimeout(callback,25);
}
,cancelAnimationFrame = clearTimeout),Dragdealer;
}
),document.addEventListener("DOMContentLoaded",function(){
init();
}
);
var extend = augment.extend,Tl = augment(Object,function(){
this.Albums = extend(this,{
constructor:function(album){
this.viewerDrag,this.thumbDrag,this.currentStep,this.imageArray = [],this.imageSizes = [],this.albumTitles = [],this.colorsIndex = [],this.imageDescriptions = [],this.parentWrap = album.parentNode,this.sections = album.children,this.rowItems = album.getAttribute("data-rows") || 6,this.initialWidth = this.parentWrap.offsetWidth,this.imageTags = album.querySelectorAll("img"),this.gridWrapper = document.createElement("div"),this.gridWrapper.className = "grid-wrapper",this.viewerWrapper = document.createElement("div"),this.viewerWrapper.className = "viewer-wrapper",this.viewerWrapperView = document.createElement("div"),this.viewerWrapperView.className = "viewer-wrapper_view",this.viewerWrapperDragContainer = document.createElement("div"),this.viewerWrapperDragContainer.className = "viewer-drag-container",this.viewerWrapperHandle = document.createElement("div"),this.viewerWrapperHandle.className = "viewer-wrapper_view__handler",this.viewerThumbsWrap = document.createElement("div"),this.viewerThumbsWrap.className = "viewer-wrapper_thumbs",this.viewerThumbsWrapHandle = document.createElement("div"),this.viewerThumbsWrapHandle.className = "viewer-wrapper_thumbs__handler",this.controlsClose = document.createElement("div"),this.controlsClose.className = "controls_close-viewer",this.controlsNext = document.createElement("div"),this.controlsNext.className = "controls_next",this.controlsPrev = document.createElement("div"),this.controlsPrev.className = "controls_prev";
}
,isMobile:function(){
var mobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/Opera Mini/i) || navigator.userAgent.match(/IEMobile/i);
return mobile ? !0:!1;
}
,initTimeline:function(){
var bgColor = new Please.make_color({
golden:!0,colors_returned:this.sections.length}
);
[].forEach.call(this.sections,function(section,index){
this.processSection(section,bgColor[index]);
}
.bind(this)),this.isMobile() && (this.gridWrapper.classList.add("mobile"),this.viewerWrapper.classList.add("mobile"),this.rowItems = 2),this.parentWrap.appendChild(this.gridWrapper),this.setGridBackgrounds(this.gridWrapper.children,this.imageTags),this.setGridEmFontReference();
}
,processSection:function(section,bgColor){
var items = section.children,albumTitle = section.getAttribute("ta-name");
this.albumTitles.push(albumTitle),this.colorsIndex.push(bgColor),[].forEach.call(items,function(item){
var gridItem = this.constructGridElement(item,albumTitle,bgColor);
this.gridWrapper.appendChild(gridItem);
}
.bind(this));
}
,constructGridElement:function(item,albumTitle,bgColor){
var gridElement = document.createElement("div");
gridElement.className = "grid-wrapper_element preloading";
var bgC = document.createElement("div");
bgC.className = "grid-wrapper_element__color",bgC.style.backgroundColor = bgColor;
var bgI = document.createElement("div");
bgI.className = "grid-wrapper_element__imgBg";
var name = document.createElement("h4");
name.innerHTML = albumTitle;
var description = document.createElement("p"),text = item.children[1].innerHTML;
return description.innerHTML = text,this.imageDescriptions.push(text),gridElement.appendChild(bgC),gridElement.appendChild(bgI),gridElement.appendChild(name),gridElement.appendChild(description),gridElement;
}
,setGridBackgrounds:function(gridElements,sourceUrls){
function preload(imageArray,index){
if (index = index || 0,imageArray && imageArray.length > index){
var img = new Image();
img.onload = function(){
var dims = [ this.naturalWidth,this.naturalHeight ];
self.imageSizes.push(dims),gridBackgrounds[index].style.backgroundImage = 'url("' + this.src + '")',gridBackgrounds[index].parentNode.classList.remove("preloading"),self.isMobile() && gridBackgrounds[index].parentNode.classList.add("hovered"),preload(imageArray,index + 1);
}
,img.src = imageArray[index];
}
index === imageArray.length && (self.bindListeners(),self.initViewer());
}
for (var gridBackgrounds = [],self = this,i = 0;
i < sourceUrls.length;
i++) this.imageArray.push(sourceUrls[i].getAttribute("data-src")),gridBackgrounds.push(gridElements[i].children[1]);
var imageArray = this.imageArray;
preload(imageArray);
}
,initViewer:function(){
document.body.appendChild(this.viewerWrapper),this.buildView(),this.buildThumbs(),this.setViewerEmFontReference();
}
,buildView:function(){
var viewerWidth = 100 * this.imageArray.length + "%";
[].forEach.call(this.imageArray,function(image,index){
var viewerElement = document.createElement("div");
viewerElement.className = "view-handler-element";
var elementBackground = document.createElement("div");
elementBackground.className = "element-background",elementBackground.style.backgroundImage = 'url("' + image + '")';
var imageDescription = document.createElement("p");
imageDescription.innerHTML = this.imageDescriptions[index],elementBackground.appendChild(imageDescription),viewerElement.appendChild(elementBackground),this.viewerWrapperHandle.appendChild(viewerElement);
}
.bind(this)),this.viewerWrapperHandle.style.width = viewerWidth,this.viewerWrapperDragContainer.appendChild(this.viewerWrapperHandle),this.viewerWrapper.appendChild(this.viewerWrapperDragContainer),this.viewerWrapper.appendChild(this.controlsClose),this.viewerWrapper.appendChild(this.controlsNext),this.viewerWrapper.appendChild(this.controlsPrev),this.resizeImageHolder();
}
,resizeImageHolder:function(){
var targetViewer = this.viewerWrapper.children[0],innerChildren = targetViewer.children[0].children,vw = window.innerWidth,vh = window.innerHeight,emW = Math.round(vw / 10),maxH = this.isMobile() ? vh:vh - 210,maxEmW = 8;
[].forEach.call(innerChildren,function(elem,index){
var finalW,imgHolder = elem.children[0],imgW = this.imageSizes[index][0],imgH = this.imageSizes[index][1],ratio = imgW / imgH,scaleRatio = maxH / imgH;
finalW = imgH * scaleRatio * ratio / emW,finalW = Math.min(finalW,maxEmW) + "em",imgHolder.style.width = finalW;
}
.bind(this));
}
,buildThumbs:function(){
var thumbHandleWidth = 120 * this.imageArray.length + "px";
this.viewerThumbsWrapHandle.style.width = thumbHandleWidth,[].forEach.call(this.sections,function(section,index){
var thumbSection = document.createElement("div");
thumbSection.style.backgroundColor = this.colorsIndex[index],thumbSection.className = "thumbs-section";
var sectionName = document.createElement("p");
sectionName.innerHTML = this.albumTitles[index],[].forEach.call(section.children,function(item){
var thumbImage = item.children[0].getAttribute("data-src"),thumb = document.createElement("div");
thumb.className = "thumbs-section_image",thumb.style.backgroundImage = 'url("' + thumbImage + '")',thumbSection.appendChild(thumb);
}
),thumbSection.appendChild(sectionName),this.viewerThumbsWrapHandle.appendChild(thumbSection);
}
.bind(this)),this.viewerThumbsWrap.appendChild(this.viewerThumbsWrapHandle),this.viewerWrapper.appendChild(this.viewerThumbsWrap);
}
,bindListeners:function(){
var activeChild;
[].forEach.call(this.gridWrapper.children,function(child,index){
child.addEventListener("click",function(){
activeChild = child,this.initView(child,index);
}
.bind(this));
}
.bind(this)),this.controlsClose.addEventListener("click",function(){
this.distroyViewer(activeChild);
}
.bind(this)),this.controlsPrev.addEventListener("click",function(){
this.goTo("prev");
}
.bind(this)),this.controlsNext.addEventListener("click",function(){
this.goTo("next");
}
.bind(this)),window.addEventListener("resize",function(){
this.setGridEmFontReference(),this.setViewerEmFontReference(),this.resizeImageHolder();
}
.bind(this)),document.body.addEventListener("keydown",function(e){
37 == e.keyCode && this.goTo("prev"),39 == e.keyCode && this.goTo("next");
}
.bind(this));
}
,setGridEmFontReference:function(){
var w = this.gridWrapper.offsetWidth,fit = (this.initialWidth - w,(w - 6.3 * this.rowItems) / this.rowItems / 15),refFont = fit + "px";
this.gridWrapper.style.fontSize = refFont;
}
,setViewerEmFontReference:function(){
var w = this.viewerWrapper.offsetWidth,refFont = Math.round(w / 10) + "px";
this.viewerWrapper.style.fontSize = refFont;
}
,initDrag:function(){
var stepsCount = this.imageArray.length,self = this;
this.thumbDrag = new Dragdealer(self.viewerThumbsWrap,{
steps:stepsCount,handleClass:"viewer-wrapper_thumbs__handler",speed:.3,loose:!0,requestAnimationFrame:!0,dragStopCallback:function(x,y){
var x = this.getStep()[0];
self.viewerDrag.setStep(x,1),self.currentStep = x;
}
}
),this.viewerDrag = new Dragdealer(self.viewerWrapperDragContainer,{
steps:stepsCount,handleClass:"viewer-wrapper_view__handler",speed:.4,loose:!0,requestAnimationFrame:!0,dragStopCallback:function(x,y){
var x = this.getStep()[0];
self.thumbDrag.setStep(x,1),self.currentStep = x;
}
}
);
}
,setStartingValues:function(index){
this.viewerDrag.setStep(index + 1,0,!0),this.thumbDrag.setStep(index + 1,0,!0);
}
,distroyViewer:function(activeChild){
this.viewerWrapper.classList.toggle("active"),this.viewerWrapperDragContainer.classList.toggle("visible"),this.viewerThumbsWrap.classList.toggle("visible"),activeChild.classList.toggle("hovered"),this.setGridEmFontReference(),document.body.classList.toggle("no-scroll");
}
,initView:function(child,index){
document.body.classList.toggle("no-scroll"),child.classList.toggle("hovered"),this.viewerWrapper.classList.toggle("active"),this.viewerWrapperDragContainer.classList.toggle("visible"),this.viewerThumbsWrap.classList.toggle("visible"),this.initDrag(),this.setStartingValues(index),this.currentStep = index + 1;
}
,goTo:function(direction){
"next" === direction && this.currentStep < this.imageArray.length && (this.viewerDrag.setStep(this.currentStep + 1),this.thumbDrag.setStep(this.currentStep + 1),this.currentStep++),"prev" === direction && this.currentStep > 1 && (this.viewerDrag.setStep(this.currentStep - 1),this.thumbDrag.setStep(this.currentStep - 1),this.currentStep--);
}
}
);
}
);
CSS代码(tl-album.css):
@import url(http://fonts.useso.com/css?family=Open+Sans:400,700);html,body{border:0;margin:0;padding:0;}
div,span,object,iframe,img,table,caption,thead,tbody,tfoot,tr,tr,td,article,aside,canvas,details,figure,hgroup,menu,nav,footer,header,section,summary,mark,audio,video{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cit,code,del,dfn,em,ins,q,samp,small,strong,sub,sup,b,i,hr,dl,dt,dd,ol,ul,li,fieldset,legend,label{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0;}
article,aside,canvas,figure,figure img,figcaption,hgroup,footer,header,nav,section,audio,video{display:block;}
table{border-collapse:separate;border-spacing:0;}
table caption,table th,table td{text-align:left;vertical-align:middle;}
a img{border:0;}
:focus{outline:0;}
#testa{position:relative;width:87vw;height:40%;margin:0 auto;}
#testb{position:relative;width:90%;margin:0 auto;}
html,body{position:absolute;width:100%;height:100%;background:#fff;overflow-x:hidden;font-family:'Open Sans',sans-serif;}
.demo{width:100%;float:left;margin:25px 0 0 0;}
.section{display:table;position:relative;width:87vw;margin:20px auto 0;background-color:#FFFFFF;padding:25px;box-sizing:border-box;text-align:center;overflow:hidden;}
.section h1{font-size:40px;color:#404040;font-weight:900;line-height:85px;margin:0 0 50px 0;/* background-color:#ECECEC;*/
}
.section > p{font-size:24px;color:#323232;text-align:left;background-color:#FFFFFF;padding:15px;border:1px solid #000;}
.section .content-left,.section .content-right{width:50%;float:left;box-sizing:border-box;}
.section .content-left.padding,.section .content-right.padding{padding:85px 0 0 0;}
.section .content-left ul,.section .content-right ul{background-color:#F7F7F7;margin:0 20px 0 0;padding:60px 70px 86px 60px;float:left;border:1px solid #000;}
.section .content-left ul h1,.section .content-right ul h1{line-height:1;color:#8C8C8C;margin:-15px 0 55px 0;}
.section .content-left ul li,.section .content-right ul li{text-align:left;font-size:1.24vw;color:#000;}
.time-album{display:none;}
.no-scroll{pointer-events:none!important;}
.grid-wrapper{position:relative;width:100%;height:100%;margin:0;padding:0;}
.grid-wrapper_element{position:relative;vertical-align:top;display:inline-block;float:left;width:15em;height:12em;margin:3px;border-radius:0.6em 0.2em 0.2em 0;overflow:hidden;-webkit-transition:opacity 0.5s linear;-moz-transition:opacity 0.5s linear;-o-transition:opacity 0.5s linear;transition:opacity 0.5s linear;opacity:1;}
.grid-wrapper_element:first-child{clear:left;}
.grid-wrapper_element.preloading{opacity:0;display:block;}
.grid-wrapper_element__imgBg{position:absolute;left:0.2em;right:0;top:0.2em;bottom:0;background-size:cover;background-position:center;border-radius:1.5em 0 0 0;border:5px solid #fff;overflow:hidden;cursor:pointer;}
.grid-wrapper_element__imgBg:before{content:'';display:block;position:absolute;width:101%;height:100%;background:rgba(0,0,0,0.75);border-radius:0;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.65,0.05,0.36,1),-webkit-border-radius 0.2s 0.1s cubic-bezier(0.65,0.05,0.36,1);-moz-transition:-moz-transform 0.3s cubic-bezier(0.65,0.05,0.36,1),border-radius 0.2s 0.1s cubic-bezier(0.65,0.05,0.36,1);-o-transition:-o-transform 0.3s cubic-bezier(0.65,0.05,0.36,1),border-radius 0.2s 0.1s cubic-bezier(0.65,0.05,0.36,1);transition:-webkit-transform 0.3s cubic-bezier(0.65,0.05,0.36,1),-moz-transform 0.3s cubic-bezier(0.65,0.05,0.36,1),-o-transform 0.3s cubic-bezier(0.65,0.05,0.36,1),transform 0.3s cubic-bezier(0.65,0.05,0.36,1),border-radius 0.2s 0.1s cubic-bezier(0.65,0.05,0.36,1);-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);-o-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
.grid-wrapper_element__color{position:absolute;width:10em;height:5em;border-radius:0.5em 0.5em 0 0.5em;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1),height 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);-moz-transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1),height 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);-o-transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1),height 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1),height 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);}
.grid-wrapper_element h4{position:absolute;width:100%;padding:0 1em;font-family:'Open Sans',sans-serif;color:#fff;font-size:1.2em;font-weight:400;line-height:8em;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;overflow:hidden;box-sizing:border-box;cursor:pointer;pointer-events:none;-webkit-transition:opacity 0.3s 0.5s linear;-moz-transition:opacity 0.3s 0.5s linear;-o-transition:opacity 0.3s 0.5s linear;transition:opacity 0.3s 0.5s linear;}
.grid-wrapper_element h4:before,.grid-wrapper_element h4:after{content:'';position:absolute;width:0;height:1px;background:#fff;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);-moz-transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);-o-transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);transition:width 0.8s 0.3s cubic-bezier(0.65,0.05,0.36,1);}
.grid-wrapper_element h4:before{bottom:2.7em;left:1em;}
.grid-wrapper_element h4:after{bottom:2.9em;right:1em;}
.grid-wrapper_element p{position:absolute;bottom:4em;width:100%;padding:0 1em;box-sizing:border-box;opacity:0;font-family:'Open Sans',sans-serif;font-weight:400;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;pointer-events:none;-webkit-transition:opacity 0.3s 0.5s linear;-moz-transition:opacity 0.3s 0.5s linear;-o-transition:opacity 0.3s 0.5s linear;transition:opacity 0.3s 0.5s linear;}
.grid-wrapper_element:hover .grid-wrapper_element__color,.grid-wrapper_element.hovered .grid-wrapper_element__color{width:15em;height:12em;}
.grid-wrapper_element:hover .grid-wrapper_element__imgBg:before,.grid-wrapper_element.hovered .grid-wrapper_element__imgBg:before{border-radius:1.5em 0 0 0;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.grid-wrapper_element:hover h4,.grid-wrapper_element.hovered h4{opacity:1;}
.grid-wrapper_element:hover h4:before,.grid-wrapper_element.hovered h4:before,.grid-wrapper_element:hover h4:after,.grid-wrapper_element.hovered h4:after{width:10.5em;}
.grid-wrapper_element:hover p,.grid-wrapper_element.hovered p{opacity:1;}
.viewer-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:9999;pointer-events:none;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.viewer-wrapper:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;box-sizing:border-box;background:#ffffff;-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);-o-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition:-webkit-transform 0.5s cubic-bezier(1,0.1,0.1,1);-moz-transition:-moz-transform 0.5s cubic-bezier(1,0.1,0.1,1);-o-transition:-o-transform 0.5s cubic-bezier(1,0.1,0.1,1);transition:-webkit-transform 0.5s cubic-bezier(1,0.1,0.1,1),-moz-transform 0.5s cubic-bezier(1,0.1,0.1,1),-o-transform 0.5s cubic-bezier(1,0.1,0.1,1),transform 0.5s cubic-bezier(1,0.1,0.1,1);}
.viewer-wrapper:after{content:'';position:absolute;left:0;bottom:0;z-index:0;width:100%;height:101px;background:rgba(208,208,208,0.5);box-shadow:inset 1px 0px 5px #000;-webkit-transform:translate3d(0,100%,0);-moz-transform:translate3d(0,100%,0);-o-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.65,0.05,0.36,1);-moz-transition:-moz-transform 0.5s cubic-bezier(0.65,0.05,0.36,1);-o-transition:-o-transform 0.5s cubic-bezier(0.65,0.05,0.36,1);transition:-webkit-transform 0.5s cubic-bezier(0.65,0.05,0.36,1),-moz-transform 0.5s cubic-bezier(0.65,0.05,0.36,1),-o-transform 0.5s cubic-bezier(0.65,0.05,0.36,1),transform 0.5s cubic-bezier(0.65,0.05,0.36,1);}
.viewer-wrapper.active{opacity:1;pointer-events:all!important;}
.viewer-wrapper.active:before{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.viewer-wrapper.active:after{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.viewer-wrapper .controls_close-viewer,.viewer-wrapper .controls_next,.viewer-wrapper .controls_prev{position:absolute;cursor:pointer;z-index:2;}
.viewer-wrapper .controls_close-viewer:before,.viewer-wrapper .controls_next:before,.viewer-wrapper .controls_prev:before,.viewer-wrapper .controls_close-viewer:after,.viewer-wrapper .controls_next:after,.viewer-wrapper .controls_prev:after{content:'';position:absolute;top:50px;left:25px;width:50%;height:2px;background:#1E8BFF;}
.viewer-wrapper .controls_close-viewer:before,.viewer-wrapper .controls_next:before,.viewer-wrapper .controls_prev:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.viewer-wrapper .controls_close-viewer:after,.viewer-wrapper .controls_next:after,.viewer-wrapper .controls_prev:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.viewer-wrapper .controls_close-viewer{right:0.1em;top:0.1em;width:70px;height:70px;}
.viewer-wrapper .controls_close-viewer:before,.viewer-wrapper .controls_close-viewer:after{top:25px;left:15px;background:#000;}
.viewer-wrapper .controls_next{right:0;bottom:0;width:100px;height:100px;background:rgba(255,255,255,0.8);}
.viewer-wrapper .controls_next:before,.viewer-wrapper .controls_next:after{-webkit-transform-origin:right;-moz-transform-origin:right;-o-transform-origin:right;-ms-transform-origin:right;transform-origin:right;}
.viewer-wrapper .controls_prev{left:0;bottom:0;width:100px;height:100px;background:rgba(255,255,255,0.8);}
.viewer-wrapper .controls_prev:before,.viewer-wrapper .controls_prev:after{-webkit-transform-origin:left;-moz-transform-origin:left;-o-transform-origin:left;-ms-transform-origin:left;transform-origin:left;}
.viewer-wrapper .viewer-drag-container{position:absolute;top:0;bottom:220px;opacity:0;-webkit-transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);-moz-transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);-o-transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);}
.viewer-wrapper .viewer-drag-container.visible{opacity:1;}
.viewer-wrapper .viewer-drag-container .viewer-wrapper_view__handler{position:relative;height:100%;}
.viewer-wrapper .viewer-drag-container .viewer-wrapper_view__handler .view-handler-element{position:relative;float:left;width:100vw;height:100%;background-size:cover;}
.viewer-wrapper .viewer-drag-container .viewer-wrapper_view__handler .view-handler-element .element-background{position:relative;height:100%;width:7em;margin:0.1em auto 0;box-shadow:0px 0px 1px 0px #000;background-size:cover;background-position:center;cursor:move;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.viewer-wrapper .viewer-drag-container .viewer-wrapper_view__handler .view-handler-element .element-background p{position:absolute;bottom:0;width:100%;margin:0 auto 0;padding:0.5em 0;box-sizing:border-box;font-family:'Open Sans',sans-serif;font-size:15px;line-height:2em;text-align:center;white-space:nowrap;text-overflow:ellipsis;font-weight:700;color:#fff;overflow:hidden;background:#1E8BFF;}
.viewer-wrapper_thumbs{position:absolute;bottom:0;left:50%;width:120px;height:100px;opacity:0;z-index:1;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);-webkit-transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);-moz-transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);-o-transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);transition:opacity 0.7s 0.5s cubic-bezier(0.65,0.05,0.36,1);}
.viewer-wrapper_thumbs:before{content:'';position:absolute;width:100%;height:100%;border:3px solid #1E8BFF;border-bottom-width:5px;box-shadow:inset 0px 1px 5px #000;z-index:1;box-sizing:border-box;pointer-events:none;}
.viewer-wrapper_thumbs.visible{opacity:1;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);}
.viewer-wrapper_thumbs__handler{height:110px;}
.viewer-wrapper_thumbs__handler:before{content:'';position:absolute;top:-48.5px;left:0;width:10px;height:10px;background:#1E8BFF;border-radius:50%;pointer-events:none;}
.viewer-wrapper_thumbs__handler .thumbs-section{position:relative;top:0;float:left;height:110px;}
.viewer-wrapper_thumbs__handler .thumbs-section:before{content:'';position:absolute;top:-43px;left:0;width:100%;height:1px;background:#1E8BFF;pointer-events:none;}
.viewer-wrapper_thumbs__handler .thumbs-section:after{content:'';position:absolute;top:-48.5px;right:-5px;width:10px;height:10px;background:#1E8BFF;border-radius:50%;box-shadow:0px 1px 2px 0px #000;pointer-events:none;}
.viewer-wrapper_thumbs__handler .thumbs-section_image{bottom:-10px;float:left;width:120px;height:100px;border-bottom:5px solid rgba(255,255,255,0);box-sizing:border-box;background-size:cover;background-position:center;background-clip:content-box;cursor:move;}
.viewer-wrapper_thumbs__handler .thumbs-section p{position:absolute;top:-65px;left:50%;padding:10px 15px;font-family:'Open Sans',sans-serif;font-weight:400;font-size:17px;background:#fff;box-shadow:0px 1px 2px -1px #000000;pointer-events:none;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);}
.mobile .grid-wrapper_element .grid-wrapper_element__imgBg:before{background:rgba(0,0,0,0.2);}
.mobile .grid-wrapper_element h4{text-shadow:0px 1px 1px #000;}
.mobile .grid-wrapper_element p{display:none;}
@media all and (max-width:950px){.section .content-left,.section .content-right{width:100%;margin:25px 0;}
.section{padding:0;}
.section .content-left ul li,.section .content-right ul li{font-size:15px;}
.section .content-left ul,.section .content-right ul{width:100%;box-sizing:border-box;margin:0;}
}
@media screen and (orientation:landscape){.mobile .viewer-wrapper_thumbs{display:none;}
.mobile .viewer-drag-container{bottom:15px;}
.mobile:after{display:none;}
.mobile .controls_next,.mobile .controls_prev{bottom:50%;margin:0 0 -50px 0;}
}
@media screen and (orientation:portrait){.mobile .viewer-drag-container .viewer-wrapper_view__handler .view-handler-element .element-background{height:60vh;margin:10vh auto 0;}
.mobile .viewer-drag-container .viewer-wrapper_view__handler .view-handler-element .element-background p{padding:10px;font-size:12px;border-radius:3px;white-space:initial;}
.mobile .viewer-wrapper_thumbs__handler .thumbs-section p{top:-53px;font-size:13px;}
}
分享到QQ
分享到微博
微信扫一扫
