缩略图预览

查看演示立即下载

插件描述：在本教程中我们将使用显示的每个图像作为一个小小的缩略图预览的 jQuery 创建一个图像画廊。想法是将鼠标悬停在滑块点并使有关缩略图幻灯片到预览窗口。

在本教程中我们将使用显示的每个图像作为一个小小的缩略图预览的 jQuery 创建一个图像画廊。想法是将鼠标悬停在滑块点并使有关缩略图幻灯片到预览窗口。当单击一个滑块点，完整的镜像将在滑动从左或向右一侧，具体取决于当前正在查看的图像。

步骤

标记

<div id="ps_container" class="ps_container">
    <div class="ps_image_wrapper">
        <!-- First initial image -->
        <img src="images/1.jpg" alt="" />
    </div>
    <!-- Navigation items -->
    <div class="ps_next"></div>
    <div class="ps_prev"></div>
    <!-- Dot list with thumbnail preview -->
    <ul class="ps_nav">
        <li class="selected">
            <a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a>
        </li>
        <li>
            <a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a>
        </li>
        ...
        <li class="ps_preview">
            <div class="ps_preview_wrapper">
                <!-- Thumbnail comes here -->
            </div>
            <!-- Little triangle -->
            <span></span>
        </li>
    </ul>
</div>

缩略图预览元素将点列表中的列表项。它要有一个特殊的类，因为我们想要以不同的方式对待此元素。每个圆点的列表项将包含一个链接元素将举行的缩略图图像和大图像的信息。使用 JavaScript，我们将从属性中提取该路径信息和动态创建图像元素。

让我们看看该样式。

CSS

首先，我们将样式的主要容器。因为我们的图像有 680 像素的最大宽度和最大高度 450 像素，我们将定义（留出一些空间为点列表) 的容器的以下值：

.ps_container{
    display:none;
    width:680px;
    height:500px;
    margin:20px auto 0px auto;
    position:relative;
}

现在我们将样式的包装的完整图像。在这里我们真的设置精确的最大尺寸和溢出隐藏的说。我们这样做是因为我们希望能够把两个图片放在此包装但切断溢出。我们 JS 函数中我们将动画图像，以便在当前获取透露。

我们将通过设置"自动"的左、右页边距中心包装：

.ps_image_wrapper{
    width:680px;
    height:450px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    -moz-box-shadow:0px 0px 5px #999;
    -webkit-box-shadow:0px 0px 5px #999;
    box-shadow:0px 0px 5px #999;
}

由于我们想要在当前图像幻灯片和滑出前一个的左的值进行动画处理的绝对位置应该是包装内的映像：

.ps_image_wrapper img{
    position:absolute;
    left:0px;
    top:0px;
}

导航元素将具有以下样式：

.ps_prev,
.ps_next{
    width:30px;
    height:59px;
    position:absolute;
    top:50%;
    margin-top:-40px;
    cursor:pointer;
    opacity:0.5;
}
.ps_prev{
    background:transparent url(../images/prev.png) no-repeat top center;
    left:-50px;
}
.ps_next{
    background:transparent url(../images/next.png) no-repeat top center;
    right:-50px;
}
.ps_prev:hover,
.ps_next:hover{
    opacity:0.9;
}

将置于下的全部图像和以自动设置边距为中心点列表与"ps_nav"类：

ul.ps_nav{
    list-style:none;
    margin:0;
    padding:0;
    width:170px;
    margin:20px auto;
    position:relative;
}

将浮动点列表元素：

ul.ps_nav li{
    float:left;
}

内部链接元素将获得圆点背景图像，这是一个子画面图像：

ul.ps_nav li a{
    display:block;
    text-indent:-9000px;
    width:11px;
    height:11px;
    outline:none;
    padding:0px 3px;
    background:transparent url(../images/dot.png) no-repeat top center;
}

悬停时我们会更改背景位置以显示另一半：

ul.ps_nav li a:hover,ul.ps_nav li.selected a{
    background-position:50% -11px;
}

我们特别列表元素，那会有缩略图预览，将绝对定位。顶部有一个负的值，因为我们想要拉起此元素，超越列表。将动态计算的左的值。-34.5 像素是预览元素的左的值，当我们想要显示它的第一个点：

ul.ps_nav li.ps_preview{
    display:none;
    width:85px;
    height:91px;
    top:-95px;
    left:-34.5px; /*This we will calculate dynamically*/
    position:absolute;
}

大跨度将小小的三角形：

ul.ps_nav li.ps_preview span{
    background:transparent url(../images/triangle.png) no-repeat top center;
    width:15px;
    height:6px;
    position:absolute;
    top:85px;
    left:35px;
}

预览包装将函数一样像完整形象包装。我们将隐藏溢出：

.ps_preview_wrapper{
    width:75px;
    height:75px;
    border:5px solid #fff;
    overflow:hidden;
    position:relative;
    -moz-box-shadow:0px 0px 5px #999;
    -webkit-box-shadow:0px 0px 5px #999;
    box-shadow:0px 0px 5px #999;
}

最终，我们想要的缩略图的绝对定位，因为我们想要进行动画处理的滑动效果的左的值是：

.ps_preview_wrapper img{
    position:absolute;
    top:0px;
    left:0px;
}

而这是所有的样式。让添加 jQuery 香料！

JavaScript

此库的想法是当鼠标悬停在一个点，它表示和图像显示小缩略图。

使的光标移到点，我们想要创建一个将下一个当前悬停缩略图图像移动到的地方的滑动动画。这将创建很大的影响，给我们有无形的缩略图图像上面点栏和我们预览元素使它们可见的错觉。

我们也要被单击的图像显示由"推"当前走，从左侧或右侧。

这两个影响我们将实现将放置图像或彼此相邻的拇指，因此对其左侧的值进行动画处理。

所以，让我们开始通过缓存的一些内容：

var $ps_container       = $('#ps_container'),
    $ps_image_wrapper   = $ps_container.find('.ps_image_wrapper'),
    $ps_next            = $ps_container.find('.ps_next'),
    $ps_prev            = $ps_container.find('.ps_prev'),
    $ps_nav             = $ps_container.find('.ps_nav'),
    $tooltip            = $ps_container.find('.ps_preview'),
    $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
    $links              = $ps_nav.children('li').not($tooltip),
    total_images        = $links.length,
    currentHovered      = -1,
    current             = 0,
    $loader             = $('#loader');

加载程序元素中没有提到的 HTML 结构因为我们把它放在容器外。我们想要显示加载元素，直到所有的图像都加载。下载文件中你将能够看到图像的预加载函数。

var ie  = false;
if ($.browser.msie) {
    ie = true; // oh no sweet Jesus
}
if(!ie) // there is a God
    $tooltip.css({
        opacity : 0
    }).show();

预加载图像之后, 我们会显示容器：

/*first preload images (thumbs and large images)*/
var loaded  = 0;
$links.each(function(i){
    var $link   = $(this);
    $link.find('a').preload({
        onComplete  : function(){
            ++loaded;
            if(loaded == total_images){
                //all images preloaded,
                //show ps_container and initialize events
                $loader.hide();
                $ps_container.show();
                //when mouse enters the the dots,
                //show the tooltip,
                //when mouse leaves hide the tooltip,
                //clicking on one will display the respective image
                $links.bind('mouseenter',showTooltip)
                      .bind('mouseleave',hideTooltip)
                      .bind('click',showImage);
                //navigate through the images
                $ps_next.bind('click',nextImage);
                $ps_prev.bind('click',prevImage);
            }
        }
    });
});

函数showTooltip()将显示缩略图预览和对进行动画处理到正确的地方。它还将幻灯片的缩略图内，或者向右或向左，取决于我们"从哪里来"：

function showTooltip(){
    var $link           = $(this),
        idx             = $link.index(),
        linkOuterWidth  = $link.outerWidth(),
        //this holds the left value for the next position
        //of the tooltip
        left            = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
        //the thumb image source
        $thumb          = $link.find('a').attr('rel'),
        imageLeft;
  
    //if we are not hovering the current one
    if(currentHovered != idx){
        //check if we will animate left->right or right->left
        if(currentHovered != -1){
            if特别申明：
			本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
			本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
			如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com


					


					
												
							
						        上一个特效：
						        颜色选择器jQuery MiniColors						    
							
						        下一个特效：
						        多级菜单						    
						
					
				
			
			
									
				    
				        				            
				                
				                    
				                    js焦点轮播图
				                
				            
				        				            
				                
				                    
				                    jquery仿flash产品图片多角度展示特效代码
				                
				            
				        				            
				                
				                    
				                    又一款幻灯片插件-FLEXSLIDER
				                
				            
				        				            
				                
				                    
				                    简单的轮播图
				                
				            
				        				            
				                
				                    
				                    Swiper3用于移动端网站的内容触摸滑动
				                
				            
				        				        
				    
							
		

		





		2018-2023 凤凰网络版权所有.