多方向滚动的焦点图jQuery特效轮播滚动切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是多方向滚动的焦点图jQuery特效轮播滚动切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>多方向滚动的焦点图jQuery特</title>
		<link rel="shortcut icon" href="../favicon.ico">
		<meta name="description" content="Portfolio Image Navigation with jQuery" />
        <meta name="keywords" content="jquery, plugin, navigation, portfolio, images, 2d, scroll to, template" />
		<meta name="author" content="Marcin Dziewulski for Codrops" />
		<!--<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />-->
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/portfolio.js" type="text/javascript"></script>
		<script src="js/init.js" type="text/javascript"></script>
	</head>
	<body>
		<h1>Portfolio Image Navigation</h1>
		<div id="portfolio">
			<div id="background"></div>		
			<div class="arrows">
				<a href="#" class="up">Up</a>
				<a href="#" class="down">Down</a>
				<a href="#" class="prev">Previous</a>
				<a href="#" class="next">Next</a>
			</div>
			<div class="gallery">
				<div class="inside">
					<div class="item">
						<div><img src="images/1.jpg" alt="image1" /></div>
						<div><img src="images/2.jpg" alt="image2" /></div>
						<div><img src="images/3.jpg" alt="image3" /></div>
					</div>
					<div class="item">
						<div><img src="images/4.jpg" alt="image4" /></div>
						<div><img src="images/5.jpg" alt="image5" /></div>
					</div>
					<div class="item">
						<div><img src="images/6.jpg" alt="image6" /></div>
						<div><img src="images/7.jpg" alt="image7" /></div>
						<div><img src="images/8.jpg" alt="image8" /></div>
						<div><img src="images/9.jpg" alt="image9" /></div>
						<div><img src="images/10.jpg" alt="image10" /></div>
						<div><img src="images/11.jpg" alt="image11" /></div>
					</div>
					<div class="item">
						<div><img src="images/12.jpg" alt="image12" /></div>
						<div><img src="images/13.jpg" alt="image13" /></div>
						<div><img src="images/14.jpg" alt="image14" /></div>
						<div><img src="images/15.jpg" alt="image15" /></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

JS代码(init.js):

var o ={
	init:function(){
	this.portfolio.init();
}
,portfolio:{
	data:{
}
,init:function(){
	$('#portfolio').portfolio(o.portfolio.data);
}
}
}
$(function(){
	o.init();
}
);

CSS代码(style.css):

@import url("reset.css");/* layout */
body{background:#191919;font-family:'PT Sans Narrow',Arial,Helvetica,sans-serif;font-size:12px;color:#333;line-height:18px;}
#portfolio{position:fixed;top:50%;left:50%;z-index:1;width:1000px;height:500px;margin:-250px 0 0 -500px;}
#background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2;background:url(../images/bg.png) no-repeat center;}
#portfolio .gallery,#portfolio .gallery .inside{position:absolute;top:0;left:0;}
#portfolio .gallery{width:100%;height:100%;overflow:hidden;}
#portfolio .gallery .inside{z-index:1;}
#portfolio .arrows a{position:absolute;z-index:3;width:32px;height:32px;background-image:url(../images/arrows.png);background-repeat:no-repeat;outline:none;text-indent:-9999px;}
#portfolio .arrows .prev,#portfolio .arrows .up{display:none;}
#portfolio .arrows .up,#portfolio .arrows .down{left:50%;margin-left:-16px;}
#portfolio .arrows .prev,#portfolio .arrows .next{top:180px;}
#portfolio .arrows .up{background-position:0 -64px;top:20px;}
#portfolio .arrows .down{background-position:0 -96px;bottom:120px;}
#portfolio .arrows .prev{background-position:0 -32px;left:60px;}
#portfolio .arrows .next{background-position:0 0;right:60px;}
#portfolio .arrows .up:hover{background-position:-32px -64px;}
#portfolio .arrows .down:hover{background-position:-32px -96px;}
#portfolio .arrows .next:hover{background-position:-32px 0;}
#portfolio .arrows .prev:hover{background-position:-32px -32px;}
#portfolio .item{position:absolute;top:0;width:1000px;height:400px;}
#portfolio .item div{position:absolute;left:0;width:100%;height:100%;}
#portfolio .item div img{position:absolute;top:0;left:50%;margin-left:-300px;}
#portfolio .paths{position:absolute;bottom:60px;left:50%;margin-left:-30px;z-index:4;}
#portfolio .paths div{position:absolute;top:0;}
#portfolio .paths a{background:#333;display:block;position:absolute;left:0;outline:none;}
#portfolio .paths a:hover,#portfolio .paths .active{background:#fff;}
/* anchors */
a{text-decoration:none;color:#fff;}
/* heading */
h1{font-size:22px;text-shadow:1px 1px 1px #000;position:relative;z-index:1000;color:#fff;font-weight:normal;padding:10px;margin-top:10px;text-transform:uppercase;background:#000;float:left;}
/* header */
#header{height:25px;line-height:24px;font-size:12px;background:#000;opacity:0.9;text-transform:uppercase;z-index:999;position:relative;}
#header a{padding:5px 10px;letter-spacing:1px;text-shadow:1px 1px 1px #000;color:#ddd;text-align:right;}
#header a:hover{color:#fff;}
#header a span{font-weight:bold;}
#header span.right_ab{position:absolute;right:4px;}

附件:下载该文件资源,减少时间成本(增值服务)