类JQuery的滑动窗口效果

最新推荐文章于 2024-06-17 14:35:24 发布

系统信息

最新推荐文章于 2024-06-17 14:35:24 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前台技术文章标签： jquery scroll javascript c class function

本文链接：https://blog.youkuaiyun.com/softwave/article/details/4525517

前台技术专栏收录该内容

95 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript实现的滑动窗口效果，该效果兼容多种浏览器，包括IE67、Firefox、Opera、Safari和Chrome。通过定义特定的HTML结构、CSS样式和JavaScript逻辑，可以创建平滑切换的内容面板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模拟JQuery的滑动窗口效果，CSS+JS，兼容IE67，FF，Opera，safari和chrome

代码如下：

<!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"></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"></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】