以下是 jQuery+CSS3缩略图邻近效应特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Thumbnail Proximity Effect with jQuery and CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Thumbnail Proximity Effect with jQuery and CSS3" />
<meta name="keywords" content="thumbnails, jquery, proximity, effect, css3, scale, mouse, hover" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
<body id="page">
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/">
<strong>« Previous Demo: </strong>Fullscreen Background Image Slideshow with CSS3
</a>
<span class="right">
<a href="http://www.behance.net/neo_innov" target="_blank">Illustrations by Florian NICOLLE</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" target="_blank">CC BY-NC 3.0</a>
<a href="http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>Thumbnail <span>Proximity</span> Effect</h1>
<h2>with jQuery & CSS3 using <a href="https://github.com/padolsey/jQuery-Plugins/tree/master/proximity-event">"proximity-event"</a> by <a href="http://james.padolsey.com/">James Padolsey</a></h2>
<p class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</p>
</header>
<section class="pe-container">
<ul id="pe-thumbs" class="pe-thumbs">
<li><a href="#"><img src="images/thumbs/1.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/6.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/7.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/8.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/9.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/10.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/11.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/12.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/13.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/14.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/15.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/16.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/17.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/18.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/19.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/20.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/21.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/22.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/23.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/24.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/25.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/26.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/27.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/28.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/29.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/7.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/1.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" /></a></li>
<li><a href="#"><img src="images/thumbs/6.jpg" /></a></li>
</ul>
</section>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.proximity.js"></script>
<script type="text/javascript">
$(function() {
var Photo = (function() {
// list of thumbs
var $list = $('#pe-thumbs'),
// the images
$elems = $list.find('img'),
// maxScale : maximum scale value the image will have
// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
settings = {
maxScale : 1.4,
maxOpacity : 0.9,
minOpacity : Number( $elems.css('opacity') )
},
init = function() {
// minScale will be set in the CSS
settings.minScale = _getScaleVal() || 1;
_initEvents();
},
// Get Value of CSS Scale through JavaScript:
// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
_getScaleVal= function() {
var st = window.getComputedStyle($elems.get(0), null),
tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"fail...";
if( tr !== 'none' ) {
var values = tr.split('(')[1].split(')')[0].split(','),
a = values[0],
b = values[1],
c = values[2],
d = values[3];
return Math.sqrt( a * a + b * b );
}
},
_initEvents = function() {
// the proximity event
$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function( event, proximity, distance ) {
var $el = $(this),
$li = $el.closest('li'),
scaleVal = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
scaleExp = 'scale(' + scaleVal + ')';
// change the z-index of the element once it reaches the maximum scale value
( scaleVal === settings.maxScale ) ? $li.css( 'z-index', 1000 ) : $li.css( 'z-index', 1 );
$el.css({
'-webkit-transform' : scaleExp,
'-moz-transform' : scaleExp,
'-o-transform' : scaleExp,
'-ms-transform' : scaleExp,
'transform' : scaleExp,
'opacity' : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
});
});
}
return {
init : init
};
})();
Photo.init();
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Thumbnail Proximity Effect with jQuery and CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Thumbnail Proximity Effect with jQuery and CSS3" />
<meta name="keywords" content="thumbnails, jquery, proximity, effect, css3, scale, mouse, hover" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
</head>
<body id="page">
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/">
<strong>« Previous Demo: </strong>Fullscreen Background Image Slideshow with CSS3
</a>
<span class="right">
<a href="http://www.behance.net/neo_innov" target="_blank">Illustrations by Florian NICOLLE</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" target="_blank">CC BY-NC 3.0</a>
<a href="http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>Thumbnail <span>Proximity</span> Effect</h1>
<h2>with jQuery & CSS3 using <a href="https://github.com/padolsey/jQuery-Plugins/tree/master/proximity-event">"proximity-event"</a> by <a href="http://james.padolsey.com/">James Padolsey</a></h2>
<p class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</p>
</header>
<section class="pe-container">
<ul id="pe-thumbs" class="pe-thumbs">
<li><a href="#"><img src="images/thumbs/1.jpg" /><div class="pe-description"><h3>time</h3><p>Since time, and his predestinated end</p></div></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" /><div class="pe-description"><h3>hopeful</h3><p>Abridged the circuit of his hopeful days</p></div></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" /><div class="pe-description"><h3>virtue</h3><p>Whiles both his youth and virtue did intend</p></div></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" /><div class="pe-description"><h3>endeavors</h3><p>The good endeavors of deserving praise</p></div></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" /><div class="pe-description"><h3>monument</h3><p>What memorable monument can last</p></div></a></li>
<li><a href="#"><img src="images/thumbs/6.jpg" /><div class="pe-description"><h3>name</h3><p>Whereon to build his never-blemished name</p></div></a></li>
<li><a href="#"><img src="images/thumbs/7.jpg" /><div class="pe-description"><h3>life was graced</h3><p>But his own worth, wherein his life was graced</p></div></a></li>
<li><a href="#"><img src="images/thumbs/8.jpg" /><div class="pe-description"><h3>the same</h3><p>Sith as that ever he maintained the same?</p></div></a></li>
<li><a href="#"><img src="images/thumbs/9.jpg" /><div class="pe-description"><h3>oblivion</h3><p>Oblivion in the darkest day to come</p></div></a></li>
<li><a href="#"><img src="images/thumbs/10.jpg" /><div class="pe-description"><h3>sin shall tread</h3><p>When sin shall tread on merit in the dust</p></div></a></li>
<li><a href="#"><img src="images/thumbs/11.jpg" /><div class="pe-description"><h3>lamentable tomb</h3><p>Cannot rase out the lamentable tomb</p></div></a></li>
<li><a href="#"><img src="images/thumbs/12.jpg" /><div class="pe-description"><h3>short-lived deserts</h3><p>Of his short-lived deserts; but still they must</p></div></a></li>
<li><a href="#"><img src="images/thumbs/13.jpg" /><div class="pe-description"><h3>hearts and memories</h3><p>Even in the hearts and memories of men</p></div></a></li>
<li><a href="#"><img src="images/thumbs/14.jpg" /><div class="pe-description"><h3>respect</h3><p>Claim fit respect, that they, in every limb</p></div></a></li>
<li><a href="#"><img src="images/thumbs/15.jpg" /><div class="pe-description"><h3>comfort</h3><p>Remembering what he was, with comfort then</p></div></a></li>
<li><a href="#"><img src="images/thumbs/16.jpg" /><div class="pe-description"><h3>pattern</h3><p>May pattern out one truly good, by him</p></div></a></li>
<li><a href="#"><img src="images/thumbs/17.jpg" /><div class="pe-description"><h3>truly good</h3><p>For he was truly good, if honest care</p></div></a></li>
<li><a href="#"><img src="images/thumbs/18.jpg" /><div class="pe-description"><h3>harmless conversation</h3><p>Of harmless conversation may commend</p></div></a></li>
<li><a href="#"><img src="images/thumbs/19.jpg" /><div class="pe-description"><h3>recompensed</h3><p>Ill recompensed only in his end</p></div></a></li>
<li><a href="#"><img src="images/thumbs/20.jpg" /><div class="pe-description"><h3>tongue</h3><p>Nor can the tongue of him who loved him least</p></div></a></li>
<li><a href="#"><img src="images/thumbs/21.jpg" /><div class="pe-description"><h3>superlative</h3><p>To one superlative above the rest</p></div></a></li>
<li><a href="#"><img src="images/thumbs/22.jpg" /><div class="pe-description"><h3>steady faith</h3><p>Of many men in steady faith reprove</p></div></a></li>
<li><a href="#"><img src="images/thumbs/23.jpg" /><div class="pe-description"><h3>constant temper</h3><p>His constant temper, in the equal weight</p></div></a></li>
<li><a href="#"><img src="images/thumbs/24.jpg" /><div class="pe-description"><h3>thankfulness</h3><p>Of thankfulness and kindness: Truth doth leave</p></div></a></li>
<li><a href="#"><img src="images/thumbs/25.jpg" /><div class="pe-description"><h3>proof</h3><p>Sufficient proof, he was in every right</p></div></a></li>
<li><a href="#"><img src="images/thumbs/26.jpg" /><div class="pe-description"><h3>thankful</h3><p>As kind to give, as thankful to receive.</p></div></a></li>
<li><a href="#"><img src="images/thumbs/27.jpg" /><div class="pe-description"><h3>curious eye</h3><p>The curious eye of a quick-brained survey</p></div></a></li>
<li><a href="#"><img src="images/thumbs/28.jpg" /><div class="pe-description"><h3>scantly find</h3><p>Could scantly find a mote amidst the sun</p></div></a></li>
<li><a href="#"><img src="images/thumbs/29.jpg" /><div class="pe-description"><h3>too-shortened days</h3><p>Of his too-shortened days, or make a prey</p></div></a></li>
<li><a href="#"><img src="images/thumbs/30.jpg" /><div class="pe-description"><h3>faulty errors</h3><p>Of any faulty errors he had done</p></div></a></li>
<li><a href="#"><img src="images/thumbs/31.jpg" /><div class="pe-description"><h3>spleenful sense</h3><p>Not that he was above the spleenful sense</p></div></a></li>
<li><a href="#"><img src="images/thumbs/32.jpg" /><div class="pe-description"><h3>spite of malice</h3><p>And spite of malice, but for that he had</p></div></a></li>
<li><a href="#"><img src="images/thumbs/33.jpg" /><div class="pe-description"><h3>innocence</h3><p>Warrant enough in his own innocence</p></div></a></li>
<li><a href="#"><img src="images/thumbs/34.jpg" /><div class="pe-description"><h3>nature</h3><p>Against the sting of some in nature bad</p></div></a></li>
<li><a href="#"><img src="images/thumbs/35.jpg" /><div class="pe-description"><h3>absolutely blest</h3><p>Yet who is he so absolutely blest</p></div></a></li>
<li><a href="#"><img src="images/thumbs/36.jpg" /><div class="pe-description"><h3>mortal frame</h3><p>That lives encompassed in a mortal frame</p></div></a></li>
</ul>
</section>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.proximity.js"></script>
<script type="text/javascript">
$(function() {
var Photo = (function() {
// list of thumbs
var $list = $('#pe-thumbs'),
// list's width and offset left.
// this will be used to know the position of the description container
listW = $list.width(),
listL = $list.offset().left,
// the images
$elems = $list.find('img'),
// the description containers
$descrp = $list.find('div.pe-description'),
// maxScale : maximum scale value the image will have
// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
settings = {
maxScale : 1.3,
maxOpacity : 0.9,
minOpacity : Number( $elems.css('opacity') )
},
init = function() {
// minScale will be set in the CSS
settings.minScale = _getScaleVal() || 1;
// preload the images (thumbs)
_loadImages( function() {
_calcDescrp();
_initEvents();
});
},
// Get Value of CSS Scale through JavaScript:
// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
_getScaleVal= function() {
var st = window.getComputedStyle($elems.get(0), null),
tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"fail...";
if( tr !== 'none' ) {
var values = tr.split('(')[1].split(')')[0].split(','),
a = values[0],
b = values[1],
c = values[2],
d = values[3];
return Math.sqrt( a * a + b * b );
}
},
// calculates the style values for the description containers,
// based on the settings variable
_calcDescrp = function() {
$descrp.each( function(i) {
var $el = $(this),
$img = $el.prev(),
img_w = $img.width(),
img_h = $img.height(),
img_n_w = settings.maxScale * img_w,
img_n_h = settings.maxScale * img_h,
space_t = ( img_n_h - img_h ) / 2,
space_l = ( img_n_w - img_w ) / 2;
$el.data( 'space_l', space_l ).css({
height : settings.maxScale * $el.height(),
top : -space_t,
left : img_n_w - space_l
});
});
},
_initEvents = function() {
$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {
var $el = $(this),
$li = $el.closest('li'),
$desc = $el.next(),
scaleVal = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
scaleExp = 'scale(' + scaleVal + ')';
// change the z-index of the element once it reaches the maximum scale value
// also, show the description container
if( scaleVal === settings.maxScale ) {
$li.css( 'z-index', 1000 );
if( $desc.offset().left + $desc.width() > listL + listW ) {
$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );
}
$desc.fadeIn( 800 );
}
else {
$li.css( 'z-index', 1 );
$desc.stop(true,true).hide();
}
$el.css({
'-webkit-transform' : scaleExp,
'-moz-transform' : scaleExp,
'-o-transform' : scaleExp,
'-ms-transform' : scaleExp,
'transform' : scaleExp,
'opacity' : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
});
});
},
_loadImages = function( callback ) {
var loaded = 0,
total = $elems.length;
$elems.each( function(i) {
var $el = $(this);
$('<img/>').load( function() {
++loaded;
if( loaded === total )
callback.call();
}).attr( 'src', $el.attr('src') );
});
};
return {
init : init
};
})();
Photo.init();
});
</script>
</body>
</html>
JS代码(jquery.proximity.js):
/** * Proximity event for jQuery * --- * @author James Padolsey (http://james.padolsey.com) * @version 0.1 * @updated 28-JUL-09 * --- * @info http://github.com/jamespadolsey/jQuery-plugins/proximity-event/ */
(function($){
var elems = $([]),doc = $(document);
$.event.special.proximity ={
defaults:{
max:100,min:0,throttle:0,fireOutOfBounds:1}
,setup:function(data){
if (!elems[0]) doc.mousemove(handle);
elems = elems.add(this);
}
,add:function(o){
var handler = o.handler,data = $.extend({
}
,$.event.special.proximity.defaults,o.data),lastCall = 0,nFiredOutOfBounds = 0,hoc = $(this);
o.handler = function(e,pageX,pageY){
var max = data.max,min = data.min,throttle = data.throttle,date = +new Date,distance,proximity,inBounds,fireOutOfBounds = data.fireOutOfBounds;
if (throttle && lastCall + throttle > date){
return;
}
lastCall = date;
distance = calcDistance(hoc,pageX,pageY);
inBounds = distance < max && distance > min;
if (fireOutOfBounds || inBounds){
if (inBounds){
nFiredOutOfBounds = 0;
}
else{
// If fireOutOfBounds is a number then keep incrementing a // counter to determine how many times the handler's been // called out of bounds. Note:the counter is reset whenever // the cursor goes back inBounds... if (typeof fireOutOfBounds === 'number' && nFiredOutOfBounds > fireOutOfBounds){
return;
}
++nFiredOutOfBounds;
}
proximity = e.proximity = 1 - ( distance < max ? distance < min ? 0:distance / max:1 );
e.distance = distance;
e.pageX = pageX;
e.pageY = pageY;
e.data = data;
return handler.call(this,e,proximity,distance);
}
}
;
}
,teardown:function(){
elems = elems.not(this);
if (!elems[0]) doc.unbind('mousemove',handle);
}
}
;
function calcDistance(el,x,y){
// Calculate the distance from the closest edge of the element // to the cursor's current position var left,right,top,bottom,offset,cX,cY,dX,dY,distance = 0;
offset = el.offset();
left = offset.left;
top = offset.top;
right = left + el.outerWidth();
bottom = top + el.outerHeight();
cX = x > right ? right:x > left ? x:left;
cY = y > bottom ? bottom:y > top ? y:top;
dX = Math.abs( cX - x );
dY = Math.abs( cY - y );
return Math.sqrt( dX * dX + dY * dY );
}
function handle(e){
var x = e.pageX,y = e.pageY,i = -1,fly = $([]);
while (fly[0] = elems[++i]){
fly.triggerHandler('proximity',[x,y]);
}
}
}
(jQuery));
CSS代码(demo.css):
@font-face{font-family:'BebasNeueRegular';src:url('fonts/BebasNeue-webfont.eot');src:url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'),url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal;}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* General Demo Style */
body{font-family:Constantia,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#fbf8f4 url(../images/bg.jpg) repeat top left;font-weight:400;font-size:15px;color:#936a46;overflow-y:scroll;overflow-x:hidden;}
.ie7 body{overflow:hidden;}
a{color:#333;text-decoration:none;}
.container{position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:20px 30px 10px 30px;margin:0px 20px 10px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;font-size:35px;line-height:35px;position:relative;font-weight:400;color:rgba(27,54,81,0.8);text-shadow:1px 1px 1px rgba(0,0,0,0.3);padding:0px 0px 5px 0px;}
.container > header h1 span{color:#008dc1;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h2,p.info{font-size:16px;font-style:italic;color:#283847;text-shadow:0px 1px 1px rgba(255,255,255,1);}
.container > header h2 a{color:#936a46;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h2 a:hover{color:#614429;}
/* Header Style */
.codrops-top{font-family:'Arial Narrow',Arial,sans-serif;line-height:24px;font-size:11px;width:100%;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.codrops-top a:hover{color:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:none;display:inline;}
p.codrops-demos{text-align:center;display:block;padding:14px;}
p.codrops-demos a,p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{display:inline-block;border:1px solid #ddd;border-color:#ddd #aaa #aaa #ddd;padding:4px 10px 3px;font-size:13px;line-height:18px;margin:0px 3px;font-weight:800;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1);color:rgba(27,54,81,0.8);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#fff;text-shadow:0px 1px 1px rgba(255,255,255,0.9);background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-o-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-ms-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);}
p.codrops-demos a:hover{background:#fff;color:#008dc1;}
p.codrops-demos a:active{background:#e5e5e5;background:-moz-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e5e5e5),color-stop(100%,#ffffff));background:-webkit-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-o-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-ms-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:linear-gradient(top,#e5e5e5 0%,#ffffff 100%);-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.9);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);box-shadow:0px 1px 1px rgba(255,255,255,0.9);}
p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{color:#fff;background:#008dc1;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
/* Media Queries */
@media screen and (max-width:767px){.container > header{text-align:center;}
p.codrops-demos{position:relative;top:auto;left:auto;}
}
CSS代码(style1.css):
.pe-thumbs{width:900px;height:400px;margin:20px auto;position:relative;background:transparent url(../images/1.jpg) center center;border:5px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
.pe-thumbs:before{content:"";position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(53,125,176,0.2);}
.pe-thumbs li{float:left;position:relative;}
.pe-thumbs li a,.pe-thumbs li a img{display:block;position:relative;}
.pe-thumbs li a img{width:100px;opacity:0.3;}
.pe-thumbs li a div.pe-description{width:200px;height:100px;background:rgba(0,0,0,0.8);position:absolute;top:0px;left:-200px;color:white;display:none;z-index:1001;}
分享到QQ
分享到微博
微信扫一扫
