类JQuery的滑动窗口效果
2009-09-06 19:42
260 查看
模拟JQuery的滑动窗口效果,CSS+JS,兼容IE67,FF,Opera,safari和chrome
代码如下:
转自【http://bbs.blueidea.com/thread-2920612-1-1.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> <title></title> <mce:style type="text/css"><!-- body{ background:#f0f0f0; font-family:Verdana; color:#7c7c7c; } #container{ position:relative; margin:0 auto; width:800px; height:600px; border:1px solid #7c7c7c; } #scroll_section{ overflow:hidden; position:relative; width:670px; height:440px; margin:0 auto; border:1px solid #7c7c7c; } #scroll_content{ position:absolute; top:0; left:0; width:4690px; } #scroll_content div{ float:left; width:670px; height:440px; } ul{ width:568px; height:25px; list-style:none; margin:25px auto 0 auto; padding:0; } li{ text-align:center; margin:0; width:80px; height:25px; line-height:25px; float:left; } li a{ color:#7c7c7c; font-family:Verdana; border-left:1px solid #7c7c7c; text-decoration:none; display:block; } li#tab_7 a{ border-right:1px solid #7c7c7c; } li.active a{ color:red; } li a:hover{ color:red; background:#f1f0f0; } #left_arrow{ position:absolute; left:15px; top:50%; width:30px; height:30px; line-height:30px; text-align:center; } #right_arrow{ position:absolute; right:15px; top:50%; width:30px; height:30px; line-height:30px; text-align:center; } #left_arrow a,#right_arrow a{ text-decoration:none; display:block; color:#7c7c7c; font-size:16px; border:1px solid #7c7c7c; } #left_arrow a:hover,#right_arrow a:hover{ color:red; border:1px solid red; } h3{ margin:20px;padding:0; } h6{ margin:0;padding:0; position:absolute; bottom:10px; right:10px; } h2{ margin:20px;padding:0; width:200px; border-bottom:1px solid #7c7c7c; } #scroll_section p{ margin:20px; font-size:14px; text-indent:2em; } img{ margin:0 20px 0 20px;padding:0; } --></mce:style><style type="text/css" mce_bogus="1"> body{ background:#f0f0f0; font-family:Verdana; color:#7c7c7c; } #container{ position:relative; margin:0 auto; width:800px; height:600px; border:1px solid #7c7c7c; } #scroll_section{ overflow:hidden; position:relative; width:670px; height:440px; margin:0 auto; border:1px solid #7c7c7c; } #scroll_content{ position:absolute; top:0; left:0; width:4690px; } #scroll_content div{ float:left; width:670px; height:440px; } ul{ width:568px; height:25px; list-style:none; margin:25px auto 0 auto; padding:0; } li{ text-align:center; margin:0; width:80px; height:25px; line-height:25px; float:left; } li a{ color:#7c7c7c; font-family:Verdana; border-left:1px solid #7c7c7c; text-decoration:none; display:block; } li#tab_7 a{ border-right:1px solid #7c7c7c; } li.active a{ color:red; } li a:hover{ color:red; background:#f1f0f0; } #left_arrow{ position:absolute; left:15px; top:50%; width:30px; height:30px; line-height:30px; text-align:center; } #right_arrow{ position:absolute; right:15px; top:50%; width:30px; height:30px; line-height:30px; text-align:center; } #left_arrow a,#right_arrow a{ text-decoration:none; display:block; color:#7c7c7c; font-size:16px; border:1px solid #7c7c7c; } #left_arrow a:hover,#right_arrow a:hover{ color:red; border:1px solid red; } h3{ margin:20px;padding:0; } h6{ margin:0;padding:0; position:absolute; bottom:10px; right:10px; } h2{ margin:20px;padding:0; width:200px; border-bottom:1px solid #7c7c7c; } #scroll_section p{ margin:20px; font-size:14px; text-indent:2em; } img{ margin:0 20px 0 20px;padding:0; } </style> <mce:script type="text/javascript"><!-- var currentTab = "tab_1"; var widthUnit = 670; var maxTab = 7; function srollArrow(direction,scrollSection){ if(direction=="left"){ if(currentTab.split("_")[1]=="1"){ nextTab = "tab_"+maxTab; }else{ var nextTabNum = parseInt(currentTab.split("_")[1])-1; nextTab = "tab_"+nextTabNum; } scrollTab(nextTab,scrollSection); }else{ if(currentTab.split("_")[1]==maxTab){ nextTab = "tab_1"; }else{ var nextTabNum = parseInt(currentTab.split("_")[1])+1; nextTab = "tab_"+nextTabNum; } scrollTab(nextTab,scrollSection); } } var moveManager = {begin:0, end:0, change:0 ,finalPos:0 , time:18.0, limit:8.0}; function scrollTab(tabName,scrollContent){ if(currentTab == tabName){ return; } lastTab = currentTab; currentTab = tabName; document.getElementById(currentTab).className = "active"; document.getElementById(lastTab).className = "inactive"; moveManager.begin = parseInt(lastTab.split("_")[1]); moveManager.end = parseInt(currentTab.split("_")[1]); moveManager.change = (moveManager.begin - moveManager.end)*widthUnit; moveManager.finalPos = -(moveManager.end-1)*widthUnit; oScrollContent = document.getElementById(scrollContent); nowLeft = parseInt(oScrollContent.style.left); move(); } function move(){ if(moveManager.time<=moveManager.limit){ oScrollContent.style.left = moveManager.finalPos + "px"; moveManager.time = 18.0; return; } nowLeft += parseInt(moveManager.change*1/moveManager.time); moveManager.time-=0.9; oScrollContent.style.left = nowLeft + "px"; setTimeout("move()",15); } // --></mce:script> </head> <body> <div id="container"> <h2>Gallery</h2> <ul id="nav"> <li id="tab_1" class="active"><a href="javascript:scrollTab('tab_1','scroll_content');" mce_href="javascript:scrollTab('tab_1','scroll_content');" onFocus="this.blur()">first</a></li> <li id="tab_2" class="inactive"><a href="javascript:scrollTab('tab_2','scroll_content');" mce_href="javascript:scrollTab('tab_2','scroll_content');" onFocus="this.blur()">second</a></li> <li id="tab_3" class="inactive"><a href="javascript:scrollTab('tab_3','scroll_content');" mce_href="javascript:scrollTab('tab_3','scroll_content');" onFocus="this.blur()">third</a></li> <li id="tab_4" class="inactive"><a href="javascript:scrollTab('tab_4','scroll_content');" mce_href="javascript:scrollTab('tab_4','scroll_content');" onFocus="this.blur()">fourth</a></li> <li id="tab_5" class="inactive"><a href="javascript:scrollTab('tab_5','scroll_content');" mce_href="javascript:scrollTab('tab_5','scroll_content');" onFocus="this.blur()">fifth</a></li> <li id="tab_6" class="inactive"><a href="javascript:scrollTab('tab_6','scroll_content');" mce_href="javascript:scrollTab('tab_6','scroll_content');" onFocus="this.blur()">sixth</a></li> <li id="tab_7" class="inactive"><a href="javascript:scrollTab('tab_7','scroll_content');" mce_href="javascript:scrollTab('tab_7','scroll_content');" onFocus="this.blur()">seventh</a></li> </ul> <div id="scroll_section"> <div id="scroll_content" style="left:0px;"> <div id="content_1"> <h3>first page</h3> <p>this demo is a little attachment of my graduation project.</p> <p>world is different when we see it from different angles."Frog" or "White Horse"?</p> <img src="http://home.blueidea.com/attachment/200901/8/491699_1231415853orB6.jpg" mce_src="http://home.blueidea.com/attachment/200901/8/491699_1231415853orB6.jpg" /> </div> <div id="content_2"> <h3>second page</h3> <p>I love my headphone.</p> <p>K 701,Revolutionary flat-wire voice coil technology; Patented AKG Varimotion ultra-precision two-layer diaphragm; Bi-wiring, high-performance cable with 1/4" jack plug; Comfortable, specially shaped "3D-Form" ear pads; Complete with stylish storage cradle; Individually tested and numbered. </p> <p>Experience pure perfection!Whether you prefer the holistic approach or like to listen analytically, the K 701 will turn perception into pure enjoyment. AKG is the first manufacturer in the world to use revolutionary flat-wire technology in headphones, namely, the K 701. The result is a truly dramatic sound that places every musician at their correct location with pinpoint accuracy. This kind of agility, spaciousness, brilliant highs, and velvety, punchy bass is simply miraculous. These superlative open-back dynamic headphones provide an outstandingly accurate sound and excellent imaging. Try the K 701 and find out what ingenious headphone engineering can do for you.</p> </div> <div id="content_3"> <h3>third page</h3> <p>K 601,Patented varimotion diaphragm and high-performance neodymium magnet system for minimum distortion; Two-layer diaphragm for highly accurate sound and superior transient response ; Self-adjusting, genuine-leather headband for optimum comfort ; Individually tested and numbered ; Perfect wearing comfort. Self-adjusting, genuine leather headband for automatic fit and optimum wearing comfort ; Acoustically comfortable optimized ear pads and washable and easy to replace; True bi-wiring cable. </p> <p>The next level of evolution,Precisely tailored response and cutting-edge design: a must for all audiophiles. These future-oriented, open-back dynamic headphones do not only offer good wearing comfort but also deliver an incredibly detailed, full, yet crisp sound. This is the result of a new AKG Varimotion two-layer diaphragm that ensures optimum diaphragm motion for extremely accurate highfrequency response and a powerful low end. The overall sound is uncommonly natural and open. In short, the K 601 are premium reference headphones for anyone who appreciates true high-end equipment. </p> </div> <div id="content_4"> <h3>fourth page</h3> <p>I always collect brush,because it's the a kind of abstract.</p> <img src="http://home.blueidea.com/attachment/200901/7/491699_12313391937zFk.jpg" mce_src="http://home.blueidea.com/attachment/200901/7/491699_12313391937zFk.jpg" /> <p>maybe we just see the abstract and naturally use the truth.</p> </div> <div id="content_5"> <h3>fifth page</h3> <p>We change the world by our own hands. But now I only imagine the future.</p> <img src="http://home.blueidea.com/attachment/200904/5/491699_12389084346614.jpg" mce_src="http://home.blueidea.com/attachment/200904/5/491699_12389084346614.jpg" /> </div> <div id="content_6"> <h3>sixth page</h3> <p>Forward, and I wish I should never stop!</p> </div> <div id="content_7"> <h3>seventh page</h3> <p>This page is the end of glide gallery demo.</p> <p>And next we will glide to fisrt page.</p> </div> </div> </div> <div id="left_arrow"><a href="javascript:srollArrow('left','scroll_content')" mce_href="javascript:srollArrow('left','scroll_content')" onFocus="this.blur()"><</a></div> <div id="right_arrow"><a href="javascript:srollArrow('right','scroll_content')" mce_href="javascript:srollArrow('right','scroll_content')" onFocus="this.blur()">></a></div> <h6>Glide Gallery Demo 1.0 by iifksp</h6> </div> </body> </html>
转自【http://bbs.blueidea.com/thread-2920612-1-1.html】
相关文章推荐
- jQuery实现仿微软首页感应鼠标变化滑动窗口效果
- jQuery实现仿微软首页感应鼠标变化滑动窗口效果
- jquery.uploadify插件实现图片上传和预览效果
- jQuery实现页面锚点滚动效果
- jquery实现购物车飞入效果
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- 基于jquery实现的弹出层效果实现!
- jquery 放大镜效果[带演示](
- 完美JQuery图片切换效果的简单实现
- 简单的jquery拖拽排序效果实现代码
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
- Nutz+jQuery esayUI Datagrid实现增删改查以及分页效果
- jquery android toast效果
- jquery小小图片切换效果
- jquery实现提示框的效果
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- JQuery笔记二 :动画效果【蓝鸥HTML5出品】
- 利用jQuery实现滑动开关按钮效果(附demo源码下载)
- JQuery实现的按钮倒计时效果
- 使用jquery制作弹出框效果