经验分享程序开发文档资料数据资源其它资源

jQuery网格视图图片画廊特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网格视图图片画廊特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery网格视图图片画廊特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery网格视图图片画廊</title>
<link rel="stylesheet" href="css/demo-styles.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>

<div class="demo-wrapper">
	<div id="gallery-container">
		<ul class="items--small">
			<li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-3.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-4.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-5.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-6.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-7.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-8.png" alt="" /></a></li>
			<li class="item"><a href="#"><img src="images/small-9.png" alt="" /></a></li>
			<li class="item"><a href="#">
			<img src="images/small-10.png" alt="" /></a></li>
			<li class="item"><a href="#">
			<img src="images/small-11.png" alt="" /></a></li>
			<li class="item"><a href="#">
			<img src="images/small-12.png" alt="" /></a></li>
		</ul>
		<ul class="items--big">
			<li class="item--big"><a href="#">
			<img src="images/big-1.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-2.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-3.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-4.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-5.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-6.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-7.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-8.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-9.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-10.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-11.jpg" alt="" /></a></li>
			<li class="item--big"><a href="#">
			<img src="images/big-12.jpg" alt="" /></a></li>
		</ul>
		<div class="controls">
			<span class="control icon-arrow-left" data-direction="previous">
			</span><span class="control icon-arrow-right" data-direction="next">
			</span><span class="grid icon-grid"></span>
			<span class="fs-toggle icon-fullscreen"></span></div>
	</div>
</div>
<!--end demo-wrapper-->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/screenfull.min.js"></script>
<script src="js/scripts.js"></script>
<script>
    $(document).ready(function(){
      $('#gallery-container').sGallery({
        fullScreenEnabled: true
      });
    });
  </script>
</body>
</html>

JS代码(scripts.js):

/* * Project:S Gallery * Description:Responsive jQuery Gallery Plugin with CSS3 Animations inspired by http://store.sony.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10551&storeId=10151&langId=-1&productId=8198552921666556433#gallery * Author:Sara Soueidan * License:Creative-Commons Attribution Non-Commercial */
;
	(function ( $,window,document,undefined ){
	var pluginName = "sGallery",defaults ={
	fullScreenEnabled:false}
;
	function Plugin( element,options ){
	this.element = element;
	this.galleryContainer = $(this.element);
	this.bigItemsList = this.galleryContainer.children('ul:eq(1)');
	this.bigItem = this.bigItemsList.children('li');
	this.options = $.extend({
}
,defaults,options );
	this._defaults = defaults;
	this._name = pluginName;
	this.current = "";
	this.slideshow = false;
	this.initialHeight = 'auto';
	this.isFullScreen = false;
	this.$controls = $('.controls');
	this.$control = $('.control');
	this.$grid = $('.grid');
	this.$fsButton = $('.fs-toggle');
	this.$document = $(document);
	this.$window = $(window);
	this.init();
}
Plugin.prototype ={
	init:function(){
	var that = this,smallItems = this.galleryContainer.find('ul:eq(0)'),smallItem = smallItems.children('li'),count = this.bigItem.length,options = this.options;
	this.setDelays(smallItems);
	this.bindListHandler(smallItems);
	this.handleQuit();
	this.controlSlideShow(count);
	if(options.fullScreenEnabled){
	this.controlFullScreen();
}
this.changeOnResize();
}
,changeOnResize:function(){
	var that = this;
	this.$window.load(function(){
	that.$window.resize(function(){
	that.initialHeight = that.galleryContainer.outerHeight();
	that.minHeight = that.bigItem.height() + parseInt(that.bigItem.css('top')) + that.$controls.height() * 2;
	that.adaptHeight();
}
);
	that.$window.trigger('resize');
}
);
}
,setDelays:function(smallItems){
	smallItems.children('li').each(function(index){
	$(this).css('animation-delay',0.075 * index + 's');
}
);
}
,bindListHandler:function(smallItems){
	var that = this;
	smallItems.on('click','li',function(e){
	e.preventDefault();
	var $this = $(this);
	that.current = $this.index();
	that.fadeAllOut();
	that.showControls();
	that.slideshow = true;
	startImg = that.bigItemsList.children('li:eq(' + that.current + ')');
	$this.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(e){
	startImg.addClass('fadeInScaleUp').removeClass('fadeOut');
	that.adaptHeight();
}
);
}
);
}
,adaptHeight:function(){
	var that = this,height = this.bigItem.outerHeight();
	if(that.slideshow && that.initialHeight < that.minHeight){
	$(that.element).animate({
	'height':that.minHeight + 'px'}
,0);
}
else if(that.slideshow && that.initialHeight > that.minHeight){
	$(this.element).animate({
	'height':that.minHeight + 'px'}
,0);
}
}
,fadeAllOut:function(){
	this.galleryContainer.children('ul:eq(0)') .children('li') .removeClass('scaleUpFadeIn') .removeClass('showLastSecond') .addClass('scaleDownFadeOut');
}
,fadeAllIn:function(){
	var that = this;
	var dropZone = this.galleryContainer.children('ul:eq(0)').children('li:eq(' + that.current + ')');
	this.galleryContainer.children('ul:eq(0)') .children('li') .not(dropZone) .removeClass('scaleDownFadeOut') .addClass('scaleUpFadeIn');
	dropZone.removeClass('scaleDownFadeOut').addClass('showLastSecond');
}
,showControls:function(){
	this.$controls.addClass('showControls') .removeClass('hideControls');
}
,hideControls:function(){
	this.$controls.addClass('hideControls') .removeClass('showControls');
}
,controlSlideShow:function(count){
	var that = this,key;
	this.$document.on('keydown',function(e){
	var e = e || window.event;
	key = e.keyCode;
	if(key == 37 && that.slideshow){
	that.current--;
	if(that.current < 0){
	that.current = count - 1;
}
that.moveToNextImage();
}
else if(key == 39 && that.slideshow){
	that.current++;
	if(that.current == count){
	that.current = 0;
}
that.moveToNextImage();
}
}
);
	this.$control.on('click',function(){
	var direction = $(this).data('direction');
	(direction == 'next') ? that.current++:that.current--;
	if(that.current < 0){
	that.current = count - 1;
}
else if(that.current == count){
	that.current = 0;
}
that.moveToNextImage();
}
);
}
,moveToNextImage:function(){
	var that = this;
	var currentImg = this.bigItemsList.children('li:eq(' + that.current + ')') .addClass('fadeInScaleUp') .siblings('li') .filter('.fadeInScaleUp') .removeClass('fadeInScaleUp') .addClass('fadeOut') .one('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(e){
	$(this).removeClass('fadeOut');
}
);
}
,handleQuit:function(){
	var that = this;
	this.$document.on('keydown',function(e){
	var e = e || window.event;
	key = e.keyCode;
	if(key == 16 && that.slideshow){
	that.quitSlideShow();
}
}
);
	this.$grid.on('click',function(){
	that.quitSlideShow();
}
);
}
,controlFullScreen:function(){
	var that = this,gallery = this.element;
	this.$fsButton.css('display','inline-block').on('click',function(){
	if (screenfull.enabled){
	screenfull.toggle(gallery);
	if(!that.isFullScreen){
	$(this).removeClass('icon-fullscreen').addClass('icon-fullscreen-exit');
	that.isFullScreenfull = true;
}
else{
	$(this).removeClass('icon-fullscreen-exit').addClass('icon-fullscreen');
	that.isFullScreen=false;
}
}
else{
	return false;
}
}
);
}
,quitSlideShow:function(test){
	this.hideControls();
	this.fadeAllIn();
	this.slideshow = false;
	var that = this;
	if(!this.isFullScreen){
	this.galleryContainer.animate({
	'height':that.initialHeight}
,0,function(){
	$(this).css('height','auto');
}
);
}
var currentImg = this.galleryContainer.children('ul:eq(1)').children('li:eq(' + that.current + ')'),dropZone = this.galleryContainer.children('ul:eq(0)').children('li:eq(' + that.current + ')'),height = dropZone.height(),width = dropZone.width(),left = dropZone.position().left,top = dropZone.position().top,delay = parseFloat(dropZone.css('animation-delay')),duration = parseFloat(dropZone.css('animation-duration')),wait = delay + duration;
	currentImg.children('img').andSelf().animate({
	'height':height,'width':width,'left':left + 'px','top':top + 'px',}
,wait * 1000,function(){
	$(this).removeClass('fadeInScaleUp').removeAttr('style');
}
);
}
}
;
	$.fn[pluginName] = function ( options ){
	return this.each(function (){
	if (!$.data(this,"plugin_" + pluginName)){
	$.data(this,"plugin_" + pluginName,new Plugin( this,options ));
}
}
);
}
;
}
)( jQuery,window,document );

CSS代码(demo-styles.css):

/** Demo Styles*/
@import url(http://fonts.googleapis.com/css?family=Lato:400,100,300);body{background-color:#111;font:normal 100%/1.5 "Lato",sans-serif;color:white;text-align:center}
.demo-wrapper{padding:1em}
header{font-size:20px;padding:1em 1.5em;line-height:.5em;background-color:#454683;color:white}
a{text-decoration:none;color:inherit}
a.button{background-color:#F02968;padding:5px 15px;border-radius:3px;display:inline-block;margin-top:1.5em;margin-right:1em}
.infobar{font-size:20px;padding:1em}
.infobar p{text-align:center;margin-top:1em}
h1{text-align:center;font-size:2em}
.credit,.tips{text-align:center}
.credit{margin-top:1em}
.credit a{text-decoration:underline}

CSS代码(styles.css):

/*** Gallery-specific Styles**/
*{margin:0;padding:0;list-style:none;-moz-box-sizing:border-box;box-sizing:border-box}
#gallery-container{font-size:20px;margin:auto;position:relative;max-width:50em;text-align:center;overflow:hidden;padding-top:1em}
#gallery-container:full-screen{max-width:100% !important;width:100%;height:100% !important;background-color:#111}
#gallery-container:-webkit-full-screen{max-width:100% !important;width:100%;height:100% !important;background-color:#111}
#gallery-container:-moz-full-screen{max-width:100% !important;width:100%;height:100% !important;background-color:#111}
.controls{text-align:center;font-size:1em;opacity:0;pointer-events:none;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;position:absolute;bottom:0;left:0;right:0}
.control,.grid,.fs-toggle{width:.66em;height:.66em;text-align:center;line-height:.5em;cursor:pointer;display:inline-block;margin-right:10px}
.fs-toggle{display:none}
.showControls{opacity:1;pointer-events:auto;-webkit-transition:opacity .6s 1s ease;transition:opacity .6s 1s ease}
.hideControls{opacity:0;pointer-events:none}
.icon-grid,.icon-arrow-left,.icon-arrow-right,.icon-fullscreen-exit,.icon-fullscreen{display:inline-block;width:20px;height:20px;background-image:url(../images/controls-light2.png);background-repeat:no-repeat}
.icon-grid{background-position:0 0}
.icon-arrow-left{background-position:-40px 0}
.icon-arrow-right{background-position:-80px 0}
.icon-fullscreen-exit{background-position:-120px 0}
.icon-fullscreen{background-position:-160px 0}
.item{display:inline-block;cursor:pointer;width:24%;height:auto;margin-right:.5%}
.item img,.item--big img{width:100%}
.items--big{position:absolute;top:0;left:0 right:0;width:100%;height:100%;pointer-events:none}
.item--big{position:absolute;width:60%;height:auto;left:20%;right:20%;top:3em;opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}
.fadeInScaleUp{-webkit-animation:fadeInScaleUp .5s ease-out .6s forwards;animation:fadeInScaleUp .5s ease-out .6s forwards;z-index:3}
.fadeOut{-webkit-animation:fadeOut .4s ease-out forwards;animation:fadeOut .4s ease-out forwards;z-index:1}
@keyframes fadeOut{from{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes fadeOut{from{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes fadeInScaleUp{from{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}
to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes fadeInScaleUp{from{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}
to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
.scaleDownFadeOut{-webkit-animation:scaleDownFadeOut .4s ease-in forwards;animation:scaleDownFadeOut .4s ease-in forwards;pointer-events:none}
@keyframes scaleDownFadeOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
99%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
100%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scaleDownFadeOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
99%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
100%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
}
.scaleUpFadeIn{opacity:0;-webkit-transform:scale(1);transform:scale(1);-webkit-animation:scaleUpFadeIn ease-in-out .4s forwards;animation:scaleUpFadeIn ease-in-out .4s forwards;-webkit-animation-duration:.4s;animation-duration:.4s}
@keyframes scaleUpFadeIn{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
1%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scaleUpFadeIn{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
1%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
.showLastSecond{opacity:0;-webkit-transform:scale(1);transform:scale(1);-webkit-animation:showLastSecond ease-in-out .4s forwards;animation:showLastSecond ease-in-out .4s forwards;-webkit-animation-duration:.4s;animation-duration:.4s}
@keyframes showLastSecond{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
1%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
99%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes showLastSecond{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
1%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
99%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@media screen and (max-width:30em){.item--big{width:80%;right:10%;left:10%}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.58 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.58 MB
立即下载
石怡萍
了解
打赏作者 鼓励作者
Html Js 画廊展示特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章