jQuery滑动显示制作教程

知更鸟 2010年6月30日12:04:4046.7K

I'm writing this tutorial in an Airport, heading back to my home country for a short holiday. It was a long day and had a farewell lunch with my fellow colleague. He got a better job offer, resigned and moved on. Well, that's life, had a great time working with him accross different projects, no doubt about it, I learnt heaps of stuff from him. I'm pretty sure I'll miss his daily quotes, jokes and whinging.

Alright, let's get into the tutorial

This time, we are going to make a custom content slider. I implemented this in my recent project and I'm pretty happy about it. My colleague spiced it up a little bit with some nice buttons. The way it works is quite simple, we will have a UL list with 3 buttons and each of the button has a link with a reference to the right panel. How it scroll to the correct panel? It uses jQuery scroll-To plugin. Basically you just have to pass the ID of the panel to the scroll-To plugin, and it will sroll the content to the correct position.

For more information about the plugin, please visit the scrollTo plugin website
jQuery滑动显示制作教程

1. HTML

HTML is a little bit long this time. Basically, it has two sections:

  • UL List: This is the list of buttons, you can add as many as you want, or style the layout the way you want.
  • Slider: Slider is where we put all the content for the panels, in this case, we have 3 panels with unique ID panel-1, panel-2 and panel-3. We hide the panel with overflow hidden set in the Mask Div.

<div id="hero-slider">
<ul>
<li><a href="#" rel="#panel-1">Item 1</a></li>
<li><a href="#" rel="#panel-2">Item 2</a></li>
<li><a href="#" rel="#panel-3">Item 3</a></li>
</ul>
<div>
<div>
<div id="panel-1">
<h2>Title 1</h2>
<p>Paragraph</p>
</div>
<div id="panel-2">
<h2>Title 2</h2>
<p>Paragraph</p>
</div>
<div id="panel-3">
<h2>Title 3</h2>
<p>Paragraph</p>
</div>
</div>
</div> <!-- .mask -->
<div></div>
</div> <!-- #hero-slider -->

2. CSS

The only tricky part of the CSS would be the mask. You have to make sure it has overflow set to hidden to hide panels. Also, the dimension of the panel and mask must be the same.

#hero-slider {
text-align:left;
background-color:#efefef;
border:1px solid #ccc; width:450px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0 auto;
font-family:arial;
}

#hero-slider .mask {
float:left;
width:300px;
height:280px;
margin:15px 0 0 10px;
overflow:hidden;
}

#hero-slider .panel {
width:300px;
height:280px;
text-align:left;
}

#hero-slider ul {
margin:0;
padding:15px 15px 0 15px;
list-style:none;
float:left;
border-right:1px solid #dedede;
height:285px;
}

#hero-slider ul li {
margin:10px 0;
}

#hero-slider ul a {
outline:none;
text-decoration: underline;
display:block;
width:75px;
height:74px;
text-indent:-999em;
}

#hero-slider a {
background: url(button.png) no-repeat 0 0;
}

#hero-slider ul a.active {
background-position: -75px;
}

.panel h2 {
padding:15px 0 0 0;
color:#0058a9;
}

.panel p {
color:#666;
}

.clear {clear:both}

3. Javascript

Javascript is short and simple, I have added comments to explain every line of the javascript

//append click event to the UL list anchor tag
$('#hero-slider ul a').click(function () {
//reset all the items
$('#hero-slider ul a').removeClass('active');

//set current item as active
$(this).addClass('active');

//scroll it to the right position
$('.mask').scrollTo($(this).attr('rel'), 300);

//disable click event
return false;

});

演示| 下载

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 将下面代码添加到网页适当位置即可。 <script src="https://l2dwi...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:4   其中:访客  4   博主  0
    • Somebody
      Somebody 3

      下载页面 page not found

      • Joe
        Joe 3

        有空也研究一下jQuery,很强大的据说。

        • V5idea.com
          V5idea.com 1

          你好,请问贵站目前右边 返回顶部(底部) 如何做到的,就是紧靠右侧 ?

            • Tmd
              Tmd 5

              @ V5idea.com 修改css里面的返回顶部的靠右侧距离就OK