jQuery点击图片相册滑出放大展示

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

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

以下是 jQuery点击图片相册滑出放大展示的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery点击图片相册滑出放大展示</title>
<style>
.plusview {
	width: 700px;
	margin: 0 auto;
	overflow: hidden;
}
.plusview ul {
	margin-left: -10px;
	list-style-type: none;
}
.plusview li {
	float: left;
	margin: 10px 0 0 10px;
	display: inline;
}
.plusview img {
	border: 0 none;
}
.PlusView-largeBg {
	background: #fafafa;
	text-align: center;
	position: relative;
	padding: 0 50px;
}
.PlusView-button {
	width: 50px;
	position: absolute;
	border: 1px solid #f0f0f0;
	background: #fff;
}
.PlusView-button span {
	background: url(images/plusview_arrows.png) no-repeat;
	display: block;
	width: 50px;
	height: 50px;
}
.PlusView-button:hover {
	border: 1px solid #d0d0d0;
}
.PlusView-leftArrow {
	left: 0;
}
.PlusView-leftArrow span {
	background-position: -100px 0px;
}
.PlusView-leftArrow:hover span {
	background-position: -150px 0px;
}
.PlusView-rightArrow {
	right: 0;
}
.PlusView-rightArrow span {
	background-position: -50px 0px;
}
.PlusView-rightArrow:hover span {
	background-position: 0 0;
}
</style>
</head>

<body>

<div class="menu">
	<a class="cur" href="index.html">演示1（默认）</a>
	<a href="index_2.html">演示2（无动画）</a>
	<a href="index_3.html">演示3（自动播放）</a>
</div>

<div class="plusview">
	<ul>
		<li>
			<a href="images/1b.jpg" data-type="image">
				<img src="images/1s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/2b.jpg" data-type="image">
				<img src="images/2s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/3b.jpg" data-type="image">
				<img src="images/3s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/4b.jpg" data-type="image">
				<img src="images/4s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/5b.jpg" data-type="image">
				<img src="images/5s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/6b.jpg" data-type="image">
				<img src="images/6s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/7b.jpg" data-type="image">
				<img src="images/7s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/8b.jpg" data-type="image">
				<img src="images/8s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/9b.jpg" data-type="image">
				<img src="images/9s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/10b.jpg" data-type="image">
				<img src="images/10s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/11b.jpg" data-type="image">
				<img src="images/11s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/12b.jpg" data-type="image">
				<img src="images/12s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/13b.jpg" data-type="image">
				<img src="images/13s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/14b.jpg" data-type="image">
				<img src="images/14s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/15b.jpg" data-type="image">
				<img src="images/15s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/16b.jpg" data-type="image">
				<img src="images/16s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/17b.jpg" data-type="image">
				<img src="images/17s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/18b.jpg" data-type="image">
				<img src="images/18s.jpg" alt="">
			</a>
		</li>
	</ul>
</div>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/plusview.js"></script>
<script>
$(function() {
	$('.plusview').plusview();
});
</script>
<!-- 以下是统计和广告，与演示无关，不必理会 -->
<style>
.menu { height: 30px; margin-bottom: 30px; padding: 10px; background-color: #f0f0f0; text-align: center;}
.menu a { display: inline-block; height: 30px; padding: 0 20px; line-height: 30px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { color: #000; background-color: #e9e9e9;}
.menu .cur { background-color: #ddd !important; color: #000;}
</style>
</body>
</html>

JS代码(plusview.js):

/** * The MIT License (MIT) * * Copyright (c) 2013 Miguel De Anda * * Permission is hereby granted,free of charge,to any person obtaining a copy * of this software and associated documentation files (the "Software"),to deal * in the Software without restriction,including without limitation the rights * to use,copy,modify,merge,publish,distribute,sublicense,and/or sell * copies of the Software,and to permit persons to whom the Software is * furnished to do so,subject to the following conditions:* * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR * IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER * LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * * PlusView 2013-12-18 (December 18,2013) * * PlusView is a jQuery plugin that tries to replicate the Google (tm) play * store screenshot viewer. It's meant to be simple to setup with a very simple * html structure expected. */
(function($){
	/* * options:* height - the height to grow to when shown * show - change the jquery method to use to show the view * hide - change the jquery method to use to hide the view * showItem - index of item to show upon initialization * duration - when in large view,automatically go to next item *after the given duration * wrap - makes next/prev wrap around forever * scrollIntoView - scrolls main element into view when switching to *large view */
$.fn.plusview = function(options){
	return this.each(function(index,el){
	var settings = $.extend({
}
,{
	height:300,show:'slideDown',hide:'slideUp',showItem:null,duration:null,wrap:false,scrollIntoView:true,buttonHeight:50}
,options);
	settings.el = $(el);
	settings.renderFunc = null;
	var gs = new PlusView(settings);
	gs.init();
	if (typeof settings.showItem == 'number'){
	gs.showItem(settings.showItem);
}
}
);
}
;
	function PlusView(settings){
	this.settings = settings;
	var self = this;
	//set default render functionif (settings.renderFunc == null){
	this.settings.renderFunc = function(){
	self.defaultRenderFunc.apply(self,arguments);
}
}
this.largeView = null;
	this.normalView = null;
	this.contentArea = null;
	this.leftArrow = null;
	this.rightArrow = null;
	this.current = null;
	this.playlist = [];
	this.timer = null;
}
PlusView.prototype.init = function(){
	var self = this;
	var index = 0;
	$('a[data-type="image"]',this.settings.el).click(function(){
	return self.linkClicked($(this));
}
).each(function(index,el){
	var id = index++;
	$(el).attr('data-plusview-id',id);
	self.playlist.push($(el));
}
);
	this.normalView = $('ul',this.settings.el);
}
;
	PlusView.prototype.defaultRenderFunc = function(targetEl,srcEl){
	var img = $('<img/>').attr('src',srcEl.attr('href')).css({
	'max-width':'100%','max-height':'100%'}
);
	targetEl.empty().append(img);
}
;
	PlusView.prototype.linkClicked = function(el){
	this.showItem(el);
	if (this.settings.scrollIntoView){
	var offset = this.settings.el.offset();
	$('html,body').animate({
	scrollTop:offset.top-10,scrollLeft:offset.left}
,1000);
}
return false;
}
;
	PlusView.prototype.showItem = function(el){
	if (typeof el == 'number'){
	el = this.playlist[el];
}
clearTimeout(this.timer);
	if (this.settings.duration){
	var self = this;
	this.timer = setTimeout(function(){
	self.showNext();
}
,this.settings.duration);
}
this.current = parseInt(el.attr('data-plusview-id'),10);
	this.normalView[this.settings.hide]();
	this.showLargeView();
	this.settings.renderFunc(this.contentArea,el);
}
;
	/* general catchall to hide pop */
PlusView.prototype.showNormalView = function(){
	clearTimeout(this.timer);
	this.normalView[this.settings.show]();
	this.largeView[this.settings.hide]();
}
;
	PlusView.prototype.showLargeView = function(){
	if (!this.largeView){
	//prepare on first callvar self = this;
	var borderHeight = 1;
	this.largeView = $('<div class="PlusView-largeBg"></div>').click(function(){
	self.showNormalView();
}
).appendTo(this.settings.el).hide();
	var btnPaddingTop = (this.settings.height - this.settings.buttonHeight) / 2;
	var btnHeight = this.settings.height - btnPaddingTop - borderHeight * 2;
	this.rightArrow = $('<a class="PlusView-button PlusView-rightArrow"></a>').attr('href','#').css('height',btnHeight).css('padding-top',btnPaddingTop).html('<span></span>').click(function(){
	self.showNext();
	return false;
}
).appendTo(this.largeView);
	this.leftArrow = $('<a class="PlusView-button PlusView-leftArrow"></a>').attr('href','#').css('height',btnHeight).css('padding-top',btnPaddingTop).html('<span></span>').click(function(){
	self.showPrev();
	return false;
}
).appendTo(this.largeView);
	this.contentArea = $('<div class="PlusView-contentArea"></div>').css('height',this.settings.height).appendTo(this.largeView);
}
this.largeView[this.settings.show]();
}
;
	PlusView.prototype.showNext = function(){
	if (this.current < this.playlist.length - 1 || this.settings.wrap){
	if (this.current >= this.playlist.length - 1)this.current = -1;
	this.showItem(this.playlist[this.current+1]);
}
else{
	this.showNormalView();
}
}
;
	PlusView.prototype.showPrev = function(){
	if (this.current > 0 || this.settings.wrap){
	if (this.current <= 0)this.current = this.playlist.length;
	this.showItem(this.playlist[this.current-1]);
}
else{
	this.showNormalView();
}
}
;
}
(jQuery));

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