<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,满屏显示,相册,缩略图,幻灯片,jQuery相册" />
<meta name="description" content="jQuery实现的带缩略图满屏展示的相册效果，更多满屏显示,相册,缩略图,幻灯片,jQuery相册请访问脚本之家JS代码频道。" />
<title>jQuery实现的带缩略图满屏展示的相册效果_脚本之家</title>
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
html,body{height:100%;}
body{margin:0px; padding:0px; background:#000; color:#FFFFFF;}
#toolbar{position:fixed; z-index:2; right:10px; top:10px; padding:5px; background:url(fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:2; left:10px; top:10px; padding:10px; background:url(fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden;}
#bgimg{display:none;}
#preloader{position:relative; z-index:2; width:32px; padding:20px; top:80px; margin:auto; background:#000;}
#outer_container{z-index:2; position:fixed; bottom:0; margin:0; height:170px; padding:40px 5px;}
#thumbScroller{position:relative; overflow:hidden; background:url(fs_img_g_bg.png);}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{float:left;}
#thumbScroller .content div{margin:10px; height:100%;}
#thumbScroller img{border:5px solid #fff;}
#thumbScroller a{padding:5px; display:block;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
</head>
<body><div id="bg"><img src="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg" width="1680" height="1050" alt="Denebola" title="Denebola" id="bgimg" /></div>
<div id="preloader"><img src="ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="toolbar_fs_icon.png" width="50" height="50" /></a></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_lux.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_dk.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_albireo.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_church.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_Decampment.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_moons.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_transitorius.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a></div>
</div>
</div>
</div>
</div>
<script>
$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg="#bgimg";
$(window).load(function() {
//thumbnail scroller
sliderLeft=$thumbScroller_container.position().left;
padding=$outer_container.css("paddingRight").replace("px", "");
sliderWidth=$(window).width()-padding;
$thumbScroller.css("width",sliderWidth);
var totalContent=0;
fadeSpeed=200;
$thumbScroller_content.each(function () {
var $this=$(this);
totalContent+=$this.innerWidth();
$thumbScroller_container.css("width",totalContent);
$this.children().children().children(".thumb").fadeTo(fadeSpeed, 0.6);
});
$thumbScroller.mousemove(function(e){
if($thumbScroller_container.width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType="easeOutCirc";
if(mouseCoords>destX){
//$thumbScroller_container.css("left",-thePosA); //without easing
$thumbScroller_container.stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
} else if(mouseCoords<destX){
//$thumbScroller_container.css("left",thePosB); //without easing
$thumbScroller_container.stop().animate({left: thePosB}, animSpeed,easeType); //with easing
} else {
$thumbScroller_container.stop();
}
}
});
$outer_container.fadeTo(fadeSpeed, 0.8);
$outer_container.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("slow", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("slow", 0);
}
);
$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
jQuery实现的点击缩略图满屏展示(可关闭)的相册效果.zip
版权申诉
142 浏览量
2022-11-07
00:20:57
上传
评论
收藏 3.08MB ZIP 举报
jQuery实现的点击缩略图满屏展示(可关闭)的相册效果.zip （30个子文件） 
132696226935129490 images 
Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg 10KB Universe_and_planets_digital_art_wallpaper_lux.jpg 240KB Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg 244KB Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg 9KB Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg 215KB Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg 8KB Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg 8KB Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg 9KB Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg 9KB Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg 10KB Universe_and_planets_digital_art_wallpaper_lucernarium.jpg 253KB Universe_and_planets_digital_art_wallpaper_albireo.jpg 322KB Universe_and_planets_digital_art_wallpaper_transitorius.jpg 253KB Universe_and_planets_digital_art_wallpaper_moons.jpg 242KB Universe_and_planets_digital_art_wallpaper_denebola.jpg 221KB Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg 7KB Universe_and_planets_digital_art_wallpaper_church.jpg 288KB Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg 6KB Universe_and_planets_digital_art_wallpaper_dk.jpg 217KB Universe_and_planets_digital_art_wallpaper_church_thumb.jpg 11KB Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg 307KB Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg 12KB Universe_and_planets_digital_art_wallpaper_Decampment.jpg 234KB Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg 9KB
index.html 11KB
fs_img_g_bg.png 130B toolbar_n_icon.png 628B toolbar_fs_icon.png 601B
jquery.easing.1.3.js 8KB
ajax-loader_dark.gif 3KB资源评论
毕业_设计
- 粉丝: 1944
- 资源: 1万+
最新资源
- 10Eclipse项目源码.jpg
- 大屏可视化数据课程项目
- Maven 快速入门指南：安装和配置方法详解
- STM32物信息通过MQTT协议上传云平台
- STM32物信息通过MQTT协议上传云平台
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6260.0)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6259.0)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6258.0)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6257.0)
- Screenshot_2024_0614_022736.png
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
