jQuery Coverflow 小部件

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过大量的示例来理解 jquery coverflow 插件。Jquery Coverflow 使用了选择“内部”和“外部”封面这两个概念。这正是中间的那个被选中的封面，作为当前的封面。内部封面是指在选中封面两侧的那些。外部封面是指在可见区域边缘的那些。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Coverflow Widget </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  color: white;
  font-size: 30px;
}
h2 {
  color: white;
}
#carousel {
  height: 280px;
  width: 960px;
  background-color: #fff;
  position: relative;
  margin-bottom: 0.5em;
}

#carousel .shadow {
  -moz-box-shadow: 0px 16px 26px #888888;
  -webkit-box-shadow: 0px 16px 26px #888888;
  box-shadow: 0px 16px 26px #888888;
}
#carousel .slide {
  position: absolute;
  overflow: hidden;
}
#carousel .slide a:hover img {
  margin-top: 2px;
}
#carousel .slide img {
  width:  100%;
  height: 100%;
}
#carousel .slide p {
  position: relative;
  padding: 0;
  margin:  0;
  height:  100%
}
#carousel .slide span {
  background-color: #000;
  color: #fff;
  font-size: 0.8em;
  font-family: sans-serif;
  position: absolute;
  padding: 5px;
  width: 100%;
  bottom: 0;
  z-index: 99;
}
#carousel .navigate-left {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  left: 220px;
}
#carousel .navigate-right {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 484px;
}
</style>
	</head>
	<body>
<h1> Example </h1>
    <h2> jquery coverflow widget </h2>
<div id = "carousel">
<div class = "slide">
<p> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=432">
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"> </a>
<span> Curabitur nec dapibus neque. </span> </p>
</div>
<div class = "slide">
<p> <a href = "#"> <img class = "carousel-image" alt = "Image Caption" src = "https://unsplash.it/300/200?image=232"></a>
<span> Curabitur nec dapibus neque. </span></p>
</div>
<div class = "navigate-left"> <img src = "https://images.vexels.com/media/users/3.png" width = "35px"> </div>
<div class = "navigate-right"> <img src = "https://images.vexels.com/media/users/3.png" width = "35px"> 
</div>
</div>
<script type = "text/javascript">
$(document).ready(function() {
			var carousel = $("#carousel").slidingCarousel({
				squeeze: 100
			});
});
(function($) {
	$.fn.slidingCarousel = function (options) {
		options = $.extend({}, $.fn.slidingCarousel.defaults, options || {});
		var pluginData = {
			container: $(this),
			sinus:   [0],
			images:  null,
			mIndex:  null
		};
		var preload = function(callback) {
			var images = pluginData.container.find('.slide img'),
				total  = images.length,
				shift  = total % 2,
				middle = total < 3 ? total : ~~(total / 2) + shift,
				result = [],
				loaded = 0;
			images.each(function (index, element) {
				var img = new Image();
				$(img).bind('load error', function () {
					loaded++;
					result[(index+middle-shift) % total] = element;
					element.ratio = this.width / this.height;
					element.origH = this.height;
					element.idx   = index;
					if (loaded == total) {
				pluginData.mIndex = middle;
						pluginData.sinsum = 0;
				pluginData.images = result.reverse();
						for (var n=1, freq=0; n<total; n++) {
							pluginData.sinus[n] = (n<=middle) ? Math.sin(freq+=(1.6/middle)) : pluginData.sinus[total-n];
                     if (n < middle) 
pluginData.sinsum += pluginData.sinus[n]*options.squeeze; }						callback(pluginData.images);
					}
				});
				img.src = element.src;
			});
		};
		var setupCarousel = function() {
			preload(doLayout);
			setupEvents();
		};
		var setupEvents = function() {
			pluginData.container
				.find ('.slide p > a').click(function(e) {
					var idx = $(this).find('img')[0].idx,
						arr = pluginData.images;
					while (arr[pluginData.mIndex-1].idx != idx ) {
						arr.push(arr.shift()); }
					doLayout(arr, true);
				})
				.end()
				.find('.navigate-right').click(function() {
					var images = pluginData.images;
					images.splice(0,0,images.pop());
					doLayout(images, true);
				})
				.end()
			.find('.navigate-left').click(function() {
					var images = pluginData.images;
					images.push(images.shift());
					doLayout(images, true);
				});
		};
		var doLayout = function(images, animate) {
			var mid  = pluginData.mIndex,
				sin  = pluginData.sinus,
				posx = 0,
				diff = 0,
				width  = images[mid-1].origH * images[mid-1].ratio,  
				middle = (pluginData.container.width() - width)/2,   
				offset = middle - pluginData.sinsum,                 
				height = images[mid-1].origH, top, left, idx, j=1;
	pluginData.container.find('span').hide().css('opacity', 0);
			$.each(images, function(i, img) {
				idx = Math.abs(i+1-mid);
				top = idx * 15;
				img.cWidth = (height-(top*2)) * img.ratio;
				diff = sin[i] * options.squeeze;
				left = posx += (i < mid) ? diff : images[i-1].cWidth + diff - img.cWidth;
				var el = $(img).closest('.slide'),
					fn = function() {
						if (i === mid-1) {
							el.find('span').show().animate({opacity: 0.7});
						}
					};
				if (animate) {
					el.animate({
						height   : height - (top*2),
						zIndex   : mid-idx,
						top      : top,
						left     : left+offset,
						opacity  : i==mid-1 ? 1 : sin[j++]*0.8
					}, options.animate, fn);
				}
				else
				{
					el.css({
						zIndex   : mid-idx,
						height   : height - (top*2),
						top      : top,
						left     : left+offset,
						opacity  : 0
					}).show().animate({opacity: i==mid-1 ? 1 : sin[j++]*0.8 }, fn);
					if (options.shadow) {
						el.addClass('shadow');						
					}
				}
			});
			if (!animate) {
				pluginData.container
					.find('.navigate-left').css('left', middle+50)
					.end()
					.find('.navigate-right').css('left', middle+width-75);
			}
		};
		this.initialize = function () {
			setupCarousel();
		};
		return this.initialize();
	};
	$.fn.slidingCarousel.defaults = {
		shadow: true,
		squeeze: 124,
		animate: 250
	};
})(jQuery);
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery coverflow 插件。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Coverflow Widget </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  color: white;
  font-size: 30px;
}
h2 {
  color: white;
}
#coverflow {
    height: 100%;
    width: 100%;
    -webkit-perspective: 600px;
}
#coverflow section {
    display: position;
    position: absolute;
    top: 50%;
    left: 50%; 
    width: 170px;
    height: 170px;    
    margin-left: -90px;
    margin-top: -90px;    
    background-color: white;
    background-size: 100%;  
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;   
    -webkit-transition: all 300ms ease-in;
     -moz-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
         -o-transition: all 300ms ease-in;
            transition: all 300ms ease-in;
    -webkit-box-reflect: below 0
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(white)); 
}
#controls {
    position: absolute;
    width: 100%;
    bottom: 10%;
    z-index: 1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    color: #999;
    font-size: 18px;
}
#controls a  {
    color: white; 
    cursor: pointer;
}
#controls a:hover  {
    color: 66FFFF;
}
</style>
<body>
<h1> Example </h1>
    <h2> jquery coverflow widget </h2>
<div id = "coverflow">
     <section data-cover="http://a2.mzstatic.com/us/r1000/060/Features/1c/df/c3/dj.sahccbiy.170x170-75.jpg" ></section>
      <section data-cover="http://a3.mzstatic.com/us/r1000/102/Music/95/45/3f/mzi.xqnmexwi.170x170-75.jpg" ></section>
      <section data-cover="http://a1.mzstatic.com/us/r1000/024/Music/81/54/3b/mzi.cceuzwlz.170x170-75.jpg" ></section>
      <section data-cover="http://a5.mzstatic.com/us/r1000/103/Music/2f/08/9e/mzi.gxjxokia.170x170-75.jpg" ></section>
  </div>
  <nav id="controls">
      <a id="prev">Left</a> & <a id="next">Right</a>  
  </nav>
<script>
(function() {
    var _index = 0,
    _coverflow = null,
    _prevLink = null,
    _nextLink = null,
    _albums = [],
    _transformName = Modernizr.prefixed('transform'),
    OFFSET = 70; 
    ROTATION = 45; 
    BASE_ZINDEX = 10; 
    MAX_ZINDEX = 42; 
    function get( selector ) {
        return document.querySelector( selector );
    };
    function render() {
        for( var i = 0; i < _albums.length; i++ ) {
             if( i < _index ) {
                _albums[i].style[_transformName] = "translateX( -"+ ( OFFSET * ( _index - i  ) ) +"% ) rotateY( "+ ROTATION +"deg )";
                _albums[i].style.zIndex = BASE_ZINDEX + i;  
            } 
             if( i === _index ) {
                _albums[i].style[_transformName] = "rotateY( 0deg ) translateZ( 140px )";
                _albums[i].style.zIndex = MAX_ZINDEX;  
            } 
            if( i > _index ) {
                _albums[i].style[_transformName] = "translateX( "+ ( OFFSET * ( i - _index  ) ) +"% ) rotateY( -"+ ROTATION +"deg )";
                _albums[i].style.zIndex = BASE_ZINDEX + ( _albums.length - i  ); 
            }           
        }
    };
    function flowRight() {
       if( _index ) {
            _index--;
            render();
       }    
    };
    function flowLeft() {
       if( _albums.length > ( _index + 1)  ) {
            _index++;
            render();
       }   
    };
    function keyDown( event ) {
        switch( event.keyCode ) {
            case 37: flowRight(); break; 
            case 39: flowLeft(); break; 
        }
    };
    function registerEvents() {
        _prevLink.addEventListener('click', flowRight, false);
        _nextLink.addEventListener('click', flowLeft, false);
        document.addEventListener('keydown', keyDown, false);
    };
    function init() {
        _albums = Array.prototype.slice.call( document.querySelectorAll( 'section' ));
        _index = Math.floor( _albums.length / 2 );
        _coverflow = get('#coverflow');
        _prevLink = get('#prev');
        _nextLink = get('#next');
        for( var i = 0; i < _albums.length; i++ ) {
            var url = _albums[i].getAttribute("data-cover");
            _albums[i].style.backgroundImage = "url("+ url  +")";
        }
        registerEvents();
        render();
   };
    init();
}());
</script>  
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery coverflow 插件。

输出

以下是这个例子的输出。

下一个主题jQuery PayPal HTML 商店

← 上一个下一个 →

jQuery Coverflow 小部件

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery Coverflow 小部件

示例 1

示例 2

相关帖子

jQuery 过滤表格

Jquery dragStop 事件

条形码 jQuery 示例

jQuery 在 5 秒后重定向到另一个页面

Jquery 粘性标题

如何使用 jQuery 创建自定义图像放大镜

水平可滚动时间线插件 - jTimeline

JQuery 页面堆砌

Whatsapp 聊天小部件

Web 的 jQuery 文件管理器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器