js特效之上下翻页相册效果

//HTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head><script>window.open('http://www.2345.com/?k38279370','网页特效','toolbar=no,status=no,scrollbars=yes,left=100,top=50,width=250,height=50')</script>

<title>Demo for - 'Create a unique Gallery by using z-index and jQuery'</title>

</head>

<body>

</div>

</div>

</div>

</div>

<ul>

<li>

</li>

<li>

<h2>It's my object !</h2>

</li>

</ul>

</div>

</div>

</body>

</html>

//reset.css我就不上传了大家应该都有

//960.css内容如下主要是对宽度以及定位的一些界定让整个画面具有统一性

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}

.container_12 .grid_3,.container_16 .grid_4{width:220px}

.container_12 .grid_6,.container_16 .grid_8{width:460px}

.container_12 .grid_9,.container_16 .grid_12{width:700px}

.container_12 .grid_12,.container_16 .grid_16{width:940px}

.alpha{margin-left:0}.omega{margin-right:0}

.container_12 .grid_1{width:60px}

.container_12 .grid_2{width:140px}

.container_12 .grid_4{width:300px}

.container_12 .grid_5{width:380px}

.container_12 .grid_7{width:540px}

.container_12 .grid_8{width:620px}

.container_12 .grid_10{width:780px}

.container_12 .grid_11{width:860px}

.container_16 .grid_1{width:40px}

.container_16 .grid_2{width:100px}

.container_16 .grid_3{width:160px}

.container_16 .grid_5{width:280px}

.container_16 .grid_6{width:340px}

.container_16 .grid_7{width:400px}

.container_16 .grid_9{width:520px}

.container_16 .grid_10{width:580px}

.container_16 .grid_11{width:640px}

.container_16 .grid_13{width:760px}

.container_16 .grid_14{width:820px}

.container_16 .grid_15{width:880px}

.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}

.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}

.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}

.container_12 .prefix_1{padding-left:80px}

.container_12 .prefix_2{padding-left:160px}

.container_12 .prefix_4{padding-left:320px}

.container_12 .prefix_5{padding-left:400px}

.container_12 .prefix_7{padding-left:560px}

.container_12 .prefix_8{padding-left:640px}

.container_12 .prefix_10{padding-left:800px}

.container_12 .prefix_11{padding-left:880px}

.container_16 .prefix_1{padding-left:60px}

.container_16 .prefix_2{padding-left:120px}

.container_16 .prefix_3{padding-left:180px}

.container_16 .prefix_5{padding-left:300px}

.container_16 .prefix_6{padding-left:360px}

.container_16 .prefix_7{padding-left:420px}

.container_16 .prefix_9{padding-left:540px}

.container_16 .prefix_10{padding-left:600px}

.container_16 .prefix_11{padding-left:660px}

.container_16 .prefix_13{padding-left:780px}

.container_16 .prefix_14{padding-left:840px}

.container_16 .prefix_15{padding-left:900px}

.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}

.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}

.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}

.container_12 .suffix_1{padding-right:80px}

.container_12 .suffix_2{padding-right:160px}

.container_12 .suffix_4{padding-right:320px}

.container_12 .suffix_5{padding-right:400px}

.container_12 .suffix_7{padding-right:560px}

.container_12 .suffix_8{padding-right:640px}

.container_12 .suffix_10{padding-right:800px}

.container_12 .suffix_11{padding-right:880px}

.container_16 .suffix_1{padding-right:60px}

.container_16 .suffix_2{padding-right:120px}

.container_16 .suffix_3{padding-right:180px}

.container_16 .suffix_5{padding-right:300px}

.container_16 .suffix_6{padding-right:360px}

.container_16 .suffix_7{padding-right:420px}

.container_16 .suffix_9{padding-right:540px}

.container_16 .suffix_10{padding-right:600px}

.container_16 .suffix_11{padding-right:660px}

.container_16 .suffix_13{padding-right:780px}

.container_16 .suffix_14{padding-right:840px}

.container_16 .suffix_15{padding-right:900px}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}

.clearfix{display:inline-block}

* html .clearfix{height:1%}.clearfix{display:block}

//main.css的内容如下主要是对一些小的方面进行深度的调控

html { font-size: 16px; min-height: 100%; margin-bottom: 1px; }

body { font-size: 62.5%; font-family: Verdana, Arial, sans-serif; color: #555555; background: #22384d url(../images/bg.jpg) repeat-x; }

a { color: #0F67A1; text-decoration: none; }

a:hover { text-decoration: underline; }

#wrapper { background: white url(../images/sidebar_bg.jpg) repeat-y top right; }

#content { }

#content h1 { font-size: 2.4em; font-weight: normal; line-height: 32px; margin: 30px 0 50px 0; }

#content p { font-size: 1.4em; line-height: 22px; margin-bottom: 20px; }

/* relevant for the tutorial - start */

#gallery { position: relative; }

#pictures { position: relative; height: 408px; cursor: pointer;}

#pictures img { position: absolute; top: 0; left: 0; }

#prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }

/* relevant for the tutorial - end */

#footer { text-align: center; margin: 50px 0 20px 0; }

#sidebar { }

#sidebar ul { margin-top: 20px; }

#sidebar ul li { font-size: 1.2em; padding: 20px 0 20px 0; border-bottom: 1px solid #dddcdc; line-height: 18px; }

#sidebar ul li h2 { font-size: 1.2em; margin-bottom: 8px; }

//最后就是最关键的js部分了

$(document).ready(function() { //perform actions when DOM is ready

var z = 0; //for setting the initial z-index's

var inAnimation = false; //flag for testing if we are in a animation

$('#pictures img').each(function() { //set the initial z-index's

z++; //at the end we have the highest z-index value stored in the z variable

$(this).css('z-index', z); //apply increased z-index to <img>

});

function swapFirstLast(isFirst) {

if(inAnimation) return false; //if already swapping pictures just return

else inAnimation = true; //set the flag that we process a image

var processZindex, direction, newZindex, inDeCrease; //change for previous or next image

if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action

else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

$('#pictures img').each(function() { //process each image

if($(this).css('z-index') == processZindex) { //if its the image we need to process

$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)

$(this).css('z-index', newZindex) //set new z-index

.animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position

inAnimation = false; //reset the flag

});

} else { //not the image we need to process, only in/de-crease z-index

$(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery

$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one

});

}

});

return false; //don't follow the clicked link

}

$('#next a').click(function() {

return swapFirstLast(true); //swap first image to last position

});

$('#prev a').click(function() {

return swapFirstLast(false); //swap last image to first position

});

图片我就不上传了大家自己找一些图片换一下名字吧这样一个翻页相册效果就做出来了虽然有些冗余但效果还是不错的

转载于:https://www.cnblogs.com/Aaron1Tall/p/7298016.html

js特效之上下翻页相册效果相关推荐

jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离 1. [代码]jquer ...
在PHP当中制作隔行换色的效果以及制作上下翻页的效果！
首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> ...
msclass 文字滚动_【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
html js 链接滚动效果,【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
html+css+js 制作表白翻页相册
Android自定义控件之3D上下翻页效果的倒计时控件
这是一个自定义的倒计时控件,具有3D上下翻页翻转效果.最近项目中需要做一个倒计时控件,需要和iOS端的效果保持一样.大致效果是这样的,如下图所示: 由于暂时还不会怎么样制作gif动态图,所以想看具体效 ...
html 上下翻页效果代码,原生js实现可以带上下翻页的翻页功能（代码）
本篇文章给大家带来的内容是关于原生js实现可以带上下翻页的翻页功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 翻页功能在渲染数据时经常用到,下面是使用原生JS去实现的一个 ...
可以左右翻页的JS相册效果
在线浏览代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
分享92个JS相册效果JS代码，总有一款适合你
分享92个JS相册效果JS代码链接:https://pan.baidu.com/s/10AUc6EN5TB4ZPydLAAEu5Q 提取码:pxj1 下面是文件的名字,我放了一些图片,文章里不是所 ...
php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...

js特效之上下翻页相册效果

js特效之上下翻页相册效果相关推荐

最新文章

热门文章