以下是 jquery油画缩略图特效代码 的示例演示效果:
部分效果截图:
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>jquery油画缩略图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<header>
<h1>jquery油画缩略图</h1>
<h2></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-1.7.2.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>jquery油画缩略图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<header>
<h1>jquery油画缩略图</h1>
<h2></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-1.7.2.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代码(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;}
CSS代码(style2.css):
.pe-thumbs{width:900px;height:400px;margin:20px auto;position:relative;background:transparent url(../images/2.jpg) center center;border:5px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
.pe-thumbs:before{content:"";display:block;position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(255,102,0,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.2;}
.pe-thumbs li a div.pe-description{width:200px;height:100px;background:rgba(111,76,51,0.8);position:absolute;top:0px;left:-200px;color:white;display:none;z-index:1001;text-align:left;}
.pe-description h3{padding:10px 10px 0px 10px;line-height:20px;font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;font-size:22px;margin:0px;}
.pe-description p{padding:10px 0px;margin:10px;font-size:11px;font-style:italic;border-top:1px solid rgba(255,255,255,0.3);}
分享到QQ
分享到微博
微信扫一扫
