利用jquery实现油画缩略图



10 36 13



特效描述:利用jquery实现 油画 缩略图,利用jquery实现油画缩略图

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.proximity.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.proximity.js"></script>

3. 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></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </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">
			$(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>
<div style="text-align:center;clear:both">
</div>
    </body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 图片切换 图片选项卡 图标选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到