jQuery - 类似于Coda的内容滑动
问题描述:
我需要达到这样的效果:当用户在标签上触发悬停时,屏幕上的当前内容会滑出,并且新内容会滑入(取决于悬停的内容) 。这是我的HTML:jQuery - 类似于Coda的内容滑动
<div class="services-image" style="background:url('/sites/default/files/services-background.jpg') top left no-repeat">
<ul>
<li><a href="#" id="box-1" rel="nofollow">Secure Mobile Computing</a></li>
<li><a href="#" id="box-2" rel="nofollow">IT<br />Consulting</a></li>
<li><a href="#" id="box-3" rel="nofollow">Software<br />Engineering</a></li>
<li><a href="#" id="box-4" rel="nofollow">Microsoft<br />Services</a></li>
<li><a href="#" id="box-5" rel="nofollow">Cyber<br />Security</a></li>
<li><a href="#" id="box-6" rel="nofollow">Infrastructure & System<br />Adminstration</a></li>
</ul>
</div>
</div>
所以,当用户触发#箱2悬停,便于下面的div /与新的内容。例如容器标记:
<div class="content-slides">
<div class="slide-1">text</div>
<div class="slide-2">text</div>
<div class="slide-3">text</div>
<div class="slide-4">text</div>
<div class="slide-5">text</div>
<div class="slide-6">text</div>
</div>
答
我记得看到这个教程 - 它的目的是设计师,所以你应该通过它:)飞
http://jqueryfordesigners.com/coda-slider-effect/
应该是很容易改变click
事件mouseover
。