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

//HTML部分:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; min-height: 22.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66; min-height: 22.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #2b7ec3 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #a5b2b9 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #4a8a01 }
span.s6 { color: #060606 }
span.s7 { color: #289c97 }
span.s8 { color: #ad42ef }

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/demo.js"></script>

</head>

<body>

<div class="container_12" id="wrapper">

<div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />

<!-- relevant for the tutorial - start -->

<div class="grid_6 prefix_1 suffix_1" id="gallery">

<div id="pictures">

<img src="images/picture1.png" alt=""/>

<img src="images/picture2.png" alt="" />

<img src="images/picture3.png" alt="" />

<img src="images/picture4.png" alt="" />

<img src="images/picture5.png" alt="" />

</div>

<div class="grid_3 alpha" id="prev">

<a href="#previous">&laquo; Pre</a>

</div>

<div class="grid_3 omega" id="next">

<a href="#next">Next &raquo;</a>

</div>

</div>

<!-- relevant for the tutorial - end -->

<div class="clear"></div> <p></p>

</div>

<div class="grid_4" id="sidebar">

<ul>

<li>

<h2>What‘s that?</h2>

</li>

<li>

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

</li>

</ul>

</div>

<div class="clear"></div>

</div>

</body>

</html>

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

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

　　

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4a8a01 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #d16400 }
span.s1 { color: #d74200 }
span.s2 { color: #48565d }
span.s3 { color: #929151 }
span.s4 { color: #d16400 }
span.s5 { color: #4f5d66 }
span.s6 { color: #ad42ef }
span.s7 { color: #698906 }
span.s8 { color: #4a8a01 }
span.s9 { color: #000000 }
span.s10 { color: #2b7ec3 }

.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的内容如下  主要是对一些小的方面进行深度的调控

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4a8a01 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; min-height: 22.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #d74200 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #929151; min-height: 22.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #a5b2b9 }
span.s1 { color: #2b7ec3 }
span.s2 { color: #4f5d66 }
span.s3 { color: #929151 }
span.s4 { color: #48565d }
span.s5 { color: #ad42ef }
span.s6 { color: #698906 }
span.s7 { color: #4a8a01 }
span.s8 { color: #d16400 }
span.s9 { color: #d74200 }
span.s10 { color: #000000 }

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部分了

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #a5b2b9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; min-height: 22.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #e48b00 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66; min-height: 22.0px }
span.s1 { color: #4f5d66 }
span.s2 { color: #4a8a01 }
span.s3 { color: #e48b00 }
span.s4 { color: #4663cc }
span.s5 { color: #000000 }
span.s6 { color: #698906 }
span.s7 { color: #ad42ef }
span.s8 { color: #289c97 }
span.s9 { color: #b58a00 }
span.s10 { color: #a5b2b9 }

$(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

});

});

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

时间： 2024-10-10 22:24:23

js特效之上下翻页相册效果的相关文章

在PHP当中制作隔行换色的效果以及制作上下翻页的效果！

首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> 2 /*tr:nth-child(even){*/ 3 /*background: #cad9ea;*/ 4 /*}*/ 5 </style> 在数据库当中查询第几条开始和我们需要显示的数据只要几条:我们可以用到limin语句,具体代码如下: 1 $sql = "select * f

jquery 实现智能炫酷的翻页相册效果

jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离?1. [代码]jquery 实现智能炫酷的翻页相册效果 $(document).ready(function(e) {    var ImgBox = $(".img-box"),    ImgSpan = ImgBox.find("span"),    ImgDiv = $(".img

采用cocos2d－x lua 的listview 实现pageview的翻页效果之上下翻页效果

--翻页滚动效果local function fnScrollViewScrolling( sender,eventType)    -- body    if eventType == 10 then        local bposX = sender:getPercentage()*100        _bPosX = bposX    end    if not _bPosX then        return    end    print("-------bposX="

使用LinearLayout和PullRefreshView实现上下翻页

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">之前看过网易云阅读客户端,里面的文章可以实现上下拉动实现上下翻页的效果,感觉体验效果很不错.</span> 公司新版本项目的开发中也要求实现类似的效果,不过还好项目需求里面可以提前知道需要实现上下拉动翻页的总的页数.如果像网易那种不提前知道总的页数感觉控制好LinearLay

常用js特效

事件源对象  event.srcElement.tagName event.srcElement.type 捕获释放  event.srcElement.setCapture();  event.srcElement.releaseCapture(); 事件按键  event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值  event.returnValue 鼠标位置 event.x event.y 窗体活动元素  documen

分享jQuery的精美相册效果

废话不多说,先上图 query实现相册特效代码,运行加载的时候拥有进度条,效果炫酷,支持多种图片排列方式 引入脚本和css:     <link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-gallery.css" />     <script type="text/javascript" src=&quo

带左右箭头切换的自动滚动图片JS特效

<!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-

js特效之酷炫的彩虹圈

此代码非本人所写 望使用者不要拿来做商业用途 致谢! <!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><style&

鼠标悬浮于链接之上出现文字说明效果

鼠标悬浮于链接之上出现文字说明效果:对于超链接<a>标签,有一个title属性,当鼠标表悬浮于链接之上时候,就会显示title的属性值,虽然在一定程度上满足了我们的需要,但是美观度却似差强人意,同时无法修改它的样式,下面就来介绍一下如何利用jquery模拟实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a