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

jQuery鼠标控制图片滚动翻页特效代码

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

以下是 jQuery鼠标控制图片滚动翻页特效代码 的示例演示效果:

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

部分效果截图:

jQuery鼠标控制图片滚动翻页特效代码

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>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/gridNavigation.css" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.gridnav.js"></script>
<script type="text/javascript">
$(function() {
	$('#tj_container').gridnav({
		rows	: 3,
		type	: {
			mode		: 'sequpdown', 		// use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
			speed		: 500,				// for fade, seqfade, updown, sequpdown, showhide, disperse, rows
			easing		: '',				// for fade, seqfade, updown, sequpdown, showhide, disperse, rows	
			factor		: 50,				// for seqfade, sequpdown, rows
			reverse		: false				// for sequpdown
		}
	});
});
</script>
</head>
<body>

<p class="codrops-demos">
	<a class="current-demo" href="index.html">Demo 1</a>
	<a href="index2.html">Demo 2</a>
	<a href="index3.html">Demo 3</a>
	<a href="index4.html">Demo 4</a>
	<a href="index5.html">Demo 5</a>
	<a href="index6.html">Demo 6</a>
	<a href="index7.html">Demo 7</a>
	<a href="index8.html">Demo 8</a>
	<a href="index9.html">Demo 9</a>
	<a href="index10.html">Demo 10</a>
</p>

<div id="tj_container" class="tj_container">
	<div class="tj_nav">
		<span id="tj_prev" class="tj_prev">Previous</span>
		<span id="tj_next" class="tj_next">Next</span>
	</div>
	<div class="tj_wrapper">
		<ul class="tj_gallery">
			<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
			<li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
			<li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
			<li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
			<li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
			<li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
			<li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
			<li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
			<li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
			<li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
			<li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
			<li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
			<li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
			<li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
			<li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
			<li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
			<li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
			<li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
			<li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
			<li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
		</ul>
	</div>
</div>
</body>
</html>

HTML代码(index2.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>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/gridNavigation.css" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.gridnav.js"></script>
<script type="text/javascript">
$(function() {
	$('#tj_container').gridnav({
		type	: {
			mode		: 'fade', 		// use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
			speed		: 500,			// for fade, seqfade, updown, sequpdown, showhide, disperse, rows
			easing		: '',			// for fade, seqfade, updown, sequpdown, showhide, disperse, rows	
			factor		: '',			// for seqfade, sequpdown, rows
			reverse		: ''			// for sequpdown
		}
	});
});
</script>
</head>
<body>

<p class="codrops-demos">
	<a href="index.html">Demo 1</a>
	<a class="current-demo" href="index2.html">Demo 2</a>
	<a href="index3.html">Demo 3</a>
	<a href="index4.html">Demo 4</a>
	<a href="index5.html">Demo 5</a>
	<a href="index6.html">Demo 6</a>
	<a href="index7.html">Demo 7</a>
	<a href="index8.html">Demo 8</a>
	<a href="index9.html">Demo 9</a>
	<a href="index10.html">Demo 10</a>
</p>

<div id="tj_container" class="tj_container">
	<div class="tj_nav">
		<span id="tj_prev" class="tj_prev">Previous</span>
		<span id="tj_next" class="tj_next">Next</span>
	</div>
	<div class="tj_wrapper">
		<ul class="tj_gallery">
			<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
			<li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
			<li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
			<li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
			<li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
			<li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
			<li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
			<li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
			<li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
			<li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
			<li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
			<li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
			<li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
			<li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
			<li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
			<li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
			<li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
			<li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
			<li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
			<li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
		</ul>
	</div>
</div>
</body>
</html>

JS代码(jquery.gridnav.js):

(function($){
	jQuery.fn.reverse = Array.prototype.reverse;
	var// auxiliar functionsaux={
	setup:function( $wrapper,$items,opts ){
	// set the wrappers position to relative$wrapper.css('position','relative');
	// save the items positionaux.saveInitialPosition( $items );
	// set the items to absolute and assign top & left$items.each(function(i){
	var $item= $(this);
	$item.css({
	position:'absolute',left:$item.data('left'),top:$item.data('top')}
);
}
);
	// check how many items we have per rowvar rowCount= Math.floor( $wrapper.width() / $items.width() ),// number of items to show is rowCount * n rowsshown= rowCount * opts.rows,// total number of rowstotalRows= Math.ceil( $items.length / rowCount );
	// save this values for latervar config={
}
;
	config.currentRow= 1;
	config.totalRows= totalRows;
	config.rowCount= rowCount;
	config.shownItems= shown;
	$wrapper.data('config',config);
	// show n rowns$wrapper.children(':gt(' + (shown - 1) + ')').hide();
	// assign row classes to the items$items.each(function(i){
	var $item= $(this),row= Math.ceil( (i + 1) / rowCount );
	$item.addClass('tj_row_' + row);
}
);
	nav.setup( $wrapper,$items,opts );
}
,saveInitialPosition:function( $items ){
	$items.each(function(i){
	var $item= $(this);
	$item.data({
	left:$item.position().left + 'px',top:$item.position().top + 'px'}
);
}
);
}
}
,// navigation typesnav={
	setup:function( $wrapper,$items,opts ){
	nav[opts.type.mode].setup( $wrapper,$items,opts );
}
,def:{
	setup:function( $wrapper,$items,opts ){
	var config = $wrapper.data('config');
	$items.each(function(i){
	var $item= $(this),row= Math.ceil( (i + 1) / config.rowCount ),t,f = row % opts.rows;
	if( f === 1 ){
	t = '0px';
}
else if( f === 0 ){
	t = (opts.rows - 1) * $items.height() + 'px';
}
else{
	t = (f - 1) * $items.height() + 'px';
}
$item.css({
	top:t}
);
}
);
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - opts.rows <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var currentRows= '',nextRows = '';
	for( var i = 0;
	i < opts.rows;
	++i ){
	currentRows += '.tj_row_' + (config.currentRow + i) + ',';
	(dir === 1)? nextRows+= '.tj_row_' + (config.currentRow + opts.rows + i) + ',':nextRows+= '.tj_row_' + (config.currentRow - 1 - i) + ',';
}
$wrapper.children(currentRows).hide();
	$wrapper.children(nextRows).show();
	(dir === 1) ? config.currentRow += opts.rows:config.currentRow -= opts.rows;
	$wrapper.data( 'anim',false );
	$wrapper.data('config',config);
}
}
,fade:{
	setup:function( $wrapper,$items,opts ){
	// same like def modenav['def'].setup( $wrapper,$items,opts );
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - opts.rows <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var currentRows= '',nextRows = '';
	for( var i = 0;
	i < opts.rows;
	++i ){
	currentRows += '.tj_row_' + (config.currentRow + i) + ',';
	(dir === 1)? nextRows+= '.tj_row_' + (config.currentRow + opts.rows + i) + ',':nextRows+= '.tj_row_' + (config.currentRow - 1 - i) + ',';
}
$wrapper.children(currentRows).fadeOut( opts.type.speed,opts.type.easing );
	var $nextRowElements= $wrapper.children(nextRows),totalNextRows= $nextRowElements.length,cnt= 0;
	$nextRowElements.fadeIn( opts.type.speed,opts.type.easing,function(){
	++cnt;
	if( cnt === totalNextRows ){
	$wrapper.data( 'anim',false );
}
}
);
	(dir === 1) ? config.currentRow += opts.rows:config.currentRow -= opts.rows;
	$wrapper.data('config',config);
}
}
,seqfade:{
	setup:function( $wrapper,$items,opts ){
	// same like def modenav['def'].setup( $wrapper,$items,opts );
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - opts.rows <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var currentRows= '',nextRows = '';
	for( var i = 0;
	i < opts.rows;
	++i ){
	currentRows += '.tj_row_' + (config.currentRow + i) + ',';
	(dir === 1)? nextRows+= '.tj_row_' + (config.currentRow + opts.rows + i) + ',':nextRows+= '.tj_row_' + (config.currentRow - 1 - i) + ',';
}
var seq_t= opts.type.factor;
	var $currentRowElements;
	( dir === 1 )? $currentRowElements = $wrapper.children(currentRows):$currentRowElements = $wrapper.children(currentRows).reverse();
	$currentRowElements.each(function(i){
	var $el = $(this);
	setTimeout(function(){
	$el.fadeOut( opts.type.speed,opts.type.easing )}
,seq_t + i * seq_t);
}
);
	var $nextRowElements;
	( dir === 1 )? $nextRowElements = $wrapper.children(nextRows):$nextRowElements = $wrapper.children(nextRows).reverse();
	var total_elems= $nextRowElements.length,cnt= 0;
	$nextRowElements.each(function(i){
	var $el = $(this);
	setTimeout(function(){
	$el.fadeIn( opts.type.speed,opts.type.easing,function(){
	++cnt;
	if( cnt === total_elems ){
	$wrapper.data( 'anim',false );
}
}
)}
,(seq_t * 2) + i * seq_t);
}
);
	(dir === 1) ? config.currentRow += opts.rows:config.currentRow -= opts.rows;
	$wrapper.data('config',config);
}
}
,updown:{
	setup:function( $wrapper,$items,opts ){
	var config = $wrapper.data('config');
	$wrapper.children(':gt(' + (config.shownItems - 1) + ')').css('opacity',0);
	$items.each(function(i){
	var $item= $(this),row= Math.ceil( (i + 1) / config.rowCount ),t= $item.position().top,f = row % opts.rows;
	if( row > opts.rows ){
	t = (opts.rows * $items.height());
}
$item.css({
	top:t + 'px'}
);
}
);
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - 1 <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var movingRows= '';
	for( var i = 0;
	i <= opts.rows;
	++i ){
	( dir === 1 )? movingRows += '.tj_row_' + (config.currentRow + i) + ',':movingRows += '.tj_row_' + (config.currentRow + (i - 1)) + ',';
}
var $elements;
	( dir === 1 )? $elements = $wrapper.children(movingRows):$elements = $wrapper.children(movingRows).reverse();
	var total_elems= $elements.length,cnt= 0;
	$elements.each(function(i){
	var $el= $(this),row= $el.attr('class'),animParam={
}
,currentRow= config.currentRow;
	// if first row fade out// if last row fade in// for all the rows move them up / downif( dir === 1 ){
	if( row === 'tj_row_' + (currentRow) ){
	animParam.opacity= 0;
}
else if( row === 'tj_row_' + (currentRow + opts.rows) ){
	animParam.opacity= 1;
}
}
else{
	if( row === 'tj_row_' + (currentRow - 1) ){
	animParam.opacity= 1;
}
else if( row === 'tj_row_' + (currentRow + opts.rows - 1) ){
	animParam.opacity= 0;
}
}
$el.show();
	(dir === 1)? animParam.top = $el.position().top - $el.height() + 'px':animParam.top = $el.position().top + $el.height() + 'px'$el.stop().animate(animParam,opts.type.speed,opts.type.easing,function(){
	if( parseInt( animParam.top ) < 0 || parseInt( animParam.top ) > $el.height() * (opts.rows - 1) )$el.hide();
	++cnt;
	if( cnt === total_elems ){
	$wrapper.data( 'anim',false );
}
}
);
}
);
	(dir === 1) ? config.currentRow += 1:config.currentRow -= 1;
	$wrapper.data('config',config);
}
}
,sequpdown:{
	setup:function( $wrapper,$items,opts ){
	// same like updown modenav['updown'].setup( $wrapper,$items,opts );
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - 1 <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var movingRows= '';
	for( var i = 0;
	i <= opts.rows;
	++i ){
	( dir === 1 )? movingRows += '.tj_row_' + (config.currentRow + i) + ',':movingRows += '.tj_row_' + (config.currentRow + (i - 1)) + ',';
}
var seq_t= opts.type.factor,$elements;
	var dircond= 1;
	if( opts.type.reverse ) dircond = -1;
	( dir === dircond )? $elements = $wrapper.children(movingRows):$elements = $wrapper.children(movingRows).reverse();
	var total_elems= $elements.length,cnt= 0;
	$elements.each(function(i){
	var $el= $(this),row= $el.attr('class'),animParam={
}
,currentRow= config.currentRow;
	setTimeout(function(){
	// if first row fade out// if last row fade in// for all the rows move them up / downif( dir === 1 ){
	if( row === 'tj_row_' + (currentRow) ){
	animParam.opacity= 0;
}
else if( row === 'tj_row_' + (currentRow + opts.rows) ){
	animParam.opacity= 1;
}
}
else{
	if( row === 'tj_row_' + (currentRow - 1) ){
	animParam.opacity= 1;
}
else if( row === 'tj_row_' + (currentRow + opts.rows - 1) ){
	animParam.opacity= 0;
}
}
$el.show();
	(dir === 1)? animParam.top = $el.position().top - $el.height() + 'px':animParam.top = $el.position().top + $el.height() + 'px'$el.stop().animate(animParam,opts.type.speed,opts.type.easing,function(){
	if( parseInt( animParam.top ) < 0 || parseInt( animParam.top ) > $el.height() * (opts.rows - 1) )$el.hide();
	++cnt;
	if( cnt === total_elems ){
	$wrapper.data( 'anim',false );
}
}
);
}
,seq_t + i * seq_t);
}
);
	(dir === 1) ? config.currentRow += 1:config.currentRow -= 1;
	$wrapper.data('config',config);
}
}
,showhide:{
	setup:function( $wrapper,$items,opts ){
	var config = $wrapper.data('config');
	$items.each(function(i){
	var $item= $(this),row= Math.ceil( (i + 1) / config.rowCount ),t,f = row % opts.rows;
	if( f === 1 ){
	t = '0px';
}
else if( f === 0 ){
	t = (opts.rows - 1) * $items.height() + 'px';
}
else{
	t = (f - 1) * $items.height() + 'px';
}
$item.css({
	top:t}
);
}
);
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - opts.rows <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var currentRows= '',nextRows = '';
	for( var i = 0;
	i < opts.rows;
	++i ){
	currentRows += '.tj_row_' + (config.currentRow + i) + ',';
	(dir === 1)? nextRows+= '.tj_row_' + (config.currentRow + opts.rows + i) + ',':nextRows+= '.tj_row_' + (config.currentRow - 1 - i) + ',';
}
$wrapper.children(currentRows).hide( opts.type.speed,opts.type.easing );
	var $nextRowElements= $wrapper.children(nextRows),totalNextRows= $nextRowElements.length,cnt= 0;
	$nextRowElements.show( opts.type.speed,opts.type.easing,function(){
	++cnt;
	if( cnt === totalNextRows ){
	$wrapper.data( 'anim',false );
}
}
);
	(dir === 1) ? config.currentRow += opts.rows:config.currentRow -= opts.rows;
	$wrapper.data('config',config);
}
}
,disperse:{
	setup:function( $wrapper,$items,opts ){
	var config = $wrapper.data('config');
	$items.each(function(i){
	var $item= $(this),row= Math.ceil( (i + 1) / config.rowCount ),t,f = row % opts.rows;
	if( f === 1 ){
	t = '0px';
}
else if( f === 0 ){
	t = (opts.rows - 1) * $items.height() + 'px';
}
else{
	t = (f - 1) * $items.height() + 'px';
}
$item.css({
	top:t}
).data('top',t);
}
);
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - opts.rows <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var currentRows= '',nextRows = '';
	for( var i = 0;
	i < opts.rows;
	++i ){
	currentRows += '.tj_row_' + (config.currentRow + i) + ',';
	(dir === 1)? nextRows+= '.tj_row_' + (config.currentRow + opts.rows + i) + ',':nextRows+= '.tj_row_' + (config.currentRow - 1 - i) + ',';
}
$wrapper.children(currentRows).each(function(i){
	var $el = $(this);
	$el.stop().animate({
	left:$el.position().left + Math.floor( Math.random() * 101 ) - 50 + 'px',top:$el.position().top + Math.floor( Math.random() * 101 ) - 50 + 'px',opacity:0}
,opts.type.speed,opts.type.easing,function(){
	$el.css({
	left:$el.data('left'),top:$el.data('top')}
).hide();
}
);
}
);
	var $nextRowElements= $wrapper.children(nextRows);
	total_elems= $nextRowElements.length,cnt= 0;
	$nextRowElements.each(function(i){
	var $el = $(this);
	$el.css({
	left:parseInt($el.data('left')) + Math.floor( Math.random() * 301 ) - 150 + 'px',top:parseInt($el.data('top')) + Math.floor( Math.random() * 301 ) - 150 + 'px',opacity:0}
).show().animate({
	left:$el.data('left'),top:$el.data('top'),opacity:1}
,opts.type.speed,opts.type.easing,function(){
	++cnt;
	if( cnt === total_elems ){
	$wrapper.data( 'anim',false );
}
}
);
}
);
	(dir === 1) ? config.currentRow += opts.rows:config.currentRow -= opts.rows;
	$wrapper.data('config',config);
}
}
,rows:{
	setup:function( $wrapper,$items,opts ){
	// same like def modenav['def'].setup( $wrapper,$items,opts );
}
,pagination:function( $wrapper,dir,opts ){
	var config = $wrapper.data('config');
	if( ( dir === 1 && config.currentRow + opts.rows > config.totalRows ) ||( dir === -1 && config.currentRow - opts.rows <= 0 )){
	$wrapper.data( 'anim',false );
	return false;
}
var currentRows= '',nextRows = '';
	for( var i = 0;
	i < opts.rows;
	++i ){
	currentRows += '.tj_row_' + (config.currentRow + i) + ',';
	(dir === 1)? nextRows+= '.tj_row_' + (config.currentRow + opts.rows + i) + ',':nextRows+= '.tj_row_' + (config.currentRow - 1 - i) + ',';
}
$wrapper.children(currentRows).each(function(i){
	var $el= $(this),rownmb= $el.attr('class').match(/tj_row_(\d+)/)[1],diff;
	if( rownmb%2 === 0 ){
	diff = opts.type.factor;
}
else{
	diff = -opts.type.factor;
}
$el.stop().animate({
	left:$el.position().left + diff + 'px',opacity:0}
,opts.type.speed,opts.type.easing,function(){
	$el.css({
	left:$el.data('left')}
).hide();
}
);
}
);
	var $nextRowElements= $wrapper.children(nextRows);
	total_elems= $nextRowElements.length,cnt= 0;
	$nextRowElements.each(function(i){
	var $el = $(this),rownmb= $el.attr('class').match(/tj_row_(\d+)/)[1],diff;
	if( rownmb%2 === 0 ){
	diff = opts.type.factor;
}
else{
	diff = -opts.type.factor;
}
$el.css({
	left:parseInt($el.data('left')) + diff + 'px',opacity:0}
).show().animate({
	left:$el.data('left'),opacity:1}
,opts.type.speed,opts.type.easing,function(){
	++cnt;
	if( cnt === total_elems ){
	$wrapper.data( 'anim',false );
}
}
);
}
);
	(dir === 1) ? config.currentRow += opts.rows:config.currentRow -= opts.rows;
	$wrapper.data('config',config);
}
}
}
,methods ={
	init:function( options ){
	if( this.length ){
	var settings ={
	rows:2,navL:'#tj_prev',navR:'#tj_next',type:{
	mode:'def',// use def | fade | seqfade | updown | sequpdown | showhide | disperse | rowsspeed:500,// for fade,seqfade,updown,sequpdown,showhide,disperse,rowseasing:'jswing',// for fade,seqfade,updown,sequpdown,showhide,disperse,rowsfactor:50,// for seqfade,sequpdown,rowsreverse:false// for sequpdown}
}
;
	return this.each(function(){
	// if options exist,lets merge them with our default settingsif ( options ){
	$.extend( settings,options );
}
var $el= $(this).css( 'visibility','hidden' ),// the ul$wrapper= $el.find('ul.tj_gallery'),// the items$thumbs= $wrapper.children('li'),total= $thumbs.length,// the navigation elements$p_nav= $(settings.navL),$n_nav= $(settings.navR);
	// save current row for later (first visible row)//config.currentRow= 1;
	// flag to control animation progress$wrapper.data( 'anim',false );
	// preload thumbsvar loaded = 0;
	$thumbs.find('img').each( function(i){
	var $img= $(this);
	$('<img/>').load( function(){
	++loaded;
	if( loaded === total ){
	// setupaux.setup( $wrapper,$thumbs,settings );
	$el.css( 'visibility','visible' );
	// navigation eventsif( $p_nav.length ){
	$p_nav.bind('click.gridnav',function( e ){
	if( $wrapper.data( 'anim' ) ) return false;
	$wrapper.data( 'anim',true );
	nav[settings.type.mode].pagination( $wrapper,-1,settings );
	return false;
}
);
}
if( $n_nav.length ){
	$n_nav.bind('click.gridnav',function( e ){
	if( $wrapper.data( 'anim' ) ) return false;
	$wrapper.data( 'anim',true );
	nav[settings.type.mode].pagination( $wrapper,1,settings );
	return false;
}
);
}
/*adds events to the mouse*/
$el.bind('mousewheel.gridnav',function(e,delta){
	if(delta > 0){
	if( $wrapper.data( 'anim' ) ) return false;
	$wrapper.data( 'anim',true );
	nav[settings.type.mode].pagination( $wrapper,-1,settings );
}
else{
	if( $wrapper.data( 'anim' ) ) return false;
	$wrapper.data( 'anim',true );
	nav[settings.type.mode].pagination( $wrapper,1,settings );
}
return false;
}
);
}
}
).attr( 'src',$img.attr('src') );
}
);
}
);
}
}
}
;
	$.fn.gridnav = function(method){
	if ( methods[method] ){
	return methods[method].apply( this,Array.prototype.slice.call( arguments,1 ));
}
else if ( typeof method === 'object' || ! method ){
	return methods.init.apply( this,arguments );
}
else{
	$.error( 'Method ' + method + ' does not exist on jQuery.gridnav' );
}
}
;
}
)(jQuery);

JS代码(jquery.mousewheel.js):

/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) * Licensed under the MIT License (LICENSE.txt). * * Thanks to:http://adomas.org/javascript-mouse-wheel/ for some pointers. * Thanks to:Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. * Thanks to:Seamus Leahy for adding deltaX and deltaY * * Version:3.0.4 * * Requires:1.2.2+ */
(function($){
	var types = ['DOMMouseScroll','mousewheel'];
	$.event.special.mousewheel ={
	setup:function(){
	if ( this.addEventListener ){
	for ( var i=types.length;
	i;
	){
	this.addEventListener( types[--i],handler,false );
}
}
else{
	this.onmousewheel = handler;
}
}
,teardown:function(){
	if ( this.removeEventListener ){
	for ( var i=types.length;
	i;
	){
	this.removeEventListener( types[--i],handler,false );
}
}
else{
	this.onmousewheel = null;
}
}
}
;
	$.fn.extend({
	mousewheel:function(fn){
	return fn ? this.bind("mousewheel",fn):this.trigger("mousewheel");
}
,unmousewheel:function(fn){
	return this.unbind("mousewheel",fn);
}
}
);
	function handler(event){
	var orgEvent = event || window.event,args = [].slice.call( arguments,1 ),delta = 0,returnValue = true,deltaX = 0,deltaY = 0;
	event = $.event.fix(orgEvent);
	event.type = "mousewheel";
	// Old school scrollwheel delta if ( event.wheelDelta ){
	delta = event.wheelDelta/120;
}
if ( event.detail ){
	delta = -event.detail/3;
}
// New school multidimensional scroll (touchpads) deltas deltaY = delta;
	// Gecko if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ){
	deltaY = 0;
	deltaX = -1*delta;
}
// Webkit if ( orgEvent.wheelDeltaY !== undefined ){
	deltaY = orgEvent.wheelDeltaY/120;
}
if ( orgEvent.wheelDeltaX !== undefined ){
	deltaX = -1*orgEvent.wheelDeltaX/120;
}
// Add event and delta to the front of the arguments args.unshift(event,delta,deltaX,deltaY);
	return $.event.handle.apply(this,args);
}
}
)(jQuery);

CSS代码(gridNavigation.css):

/* Thumbnail Effects Style */
.tj_container{width:800px;height:400px;position:relative;margin:30px auto;}
.tj_nav{position:absolute;right:-80px;top:50%;margin-top:-35px;height:70px;width:39px;}
.tj_nav span{width:39px;height:25px;background:transparent url(../images/prev.png) no-repeat top left;position:absolute;top:0px;left:0px;text-indent:-9000px;opacity:0.7;cursor:pointer;/*-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-transition:all 0.2s ease-in-out;*/
}
.tj_nav span.tj_next{background-image:url(../images/next.png);top:auto;bottom:0px;left:0px;}
.tj_nav span:hover{opacity:1.0;}
.tj_wrapper{width:100%;height:100%;position:relative;margin:0px auto;}
.tj_wrapper ul li{float:left;}
.tj_wrapper ul li a{outline:none;display:block;margin:5px;background:transparent url(../images/bg_thumb.jpg) no-repeat center center;}
.tj_wrapper ul li a img{display:block;border:none;opacity:0.7;-moz-box-shadow:2px 2px 4px #8e8e8e;-webkit-box-shadow:2px 2px 4px #8e8e8e;box-shadow:2px 2px 4px #8e8e8e;/*-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-transition:all 0.2s ease-in-out;*/
}
.tj_wrapper ul li a img:hover{opacity:1.0;}
/* Specific style for the examples */
.example10 .tj_container{height:600px;}

CSS代码(reset.css):

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}

CSS代码(style.css):

@import url('reset.css');body{background:#f7f7f7 url(../images/paper_2.png) repeat top left;color:#000;font-family:'Georgia','Trebuchet MS',serif;font-size:12px;overflow-y:scroll;}
a{color:#000;text-decoration:none;}
.clr{clear:both;}
/* codrops-demos */
p.codrops-demos{text-align:center;display:block;padding:14px;}
p.codrops-demos a,p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{display:inline-block;border:1px solid #ddd;border-color:#ddd #aaa #aaa #ddd;padding:4px 10px 3px;font-size:13px;line-height:18px;margin:0px 3px;font-weight:800;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1);color:rgba(27,54,81,0.8);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#fff;text-shadow:0px 1px 1px rgba(255,255,255,0.9);background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-o-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-ms-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);}
p.codrops-demos a:hover{background:#fff;color:#008dc1;}
p.codrops-demos a:active{background:#e5e5e5;background:-moz-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e5e5e5),color-stop(100%,#ffffff));background:-webkit-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-o-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-ms-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:linear-gradient(top,#e5e5e5 0%,#ffffff 100%);-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.9);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);box-shadow:0px 1px 1px rgba(255,255,255,0.9);}
p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{color:#fff;background:#008dc1;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
415.75 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
415.75 KB
立即下载
孙璐梅
了解
打赏作者 鼓励作者
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
打赏文章