基于jquery的热点内容轮换效果

 更新时间:2011年07月09日 23:05:11   作者:  
jquery轮换效果网上已经很多了,不过这个效果挺有特色的。需要的朋友可以看下。
效果图:

核心代码:
复制代码 代码如下:

<div class="blockB" collection="Y" >
<h2><span>王牌栏目 Regular features</span></h2>
<div id="regular_features" class="pp">
<div class="tabs"> <a class="on" href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target="_blank">世界最美</a><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank">哇!好玩</a><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank">穷游世界</a><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank">周末驾到</a> </div>
<ul>
<li><a href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html"target="_blank"><img src="/upload/201107/20110709230421591.jpg" alt="少女傲人双峰自拍" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target="_blank">少女傲人双峰自拍</a></span> </li>
<li><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank"><img alt="日本酥胸美女杉原杏" src="/upload/201107/20110709230422324.jpg"></a> <span><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank">日本酥胸美女杉原杏</a></span> </li>
<li><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank"><img src="/upload/201107/20110709230422999.jpg" alt="性感美女黑色内衣" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank">性感美女黑色内衣</a></span> </li>
<li><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank"><img src="/upload/201107/20110709230422847.jpg" alt="绝美性感黑丝美眉" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank">绝美性感黑丝美眉</a></span> </li>
</ul>
</div>
<script type="text/javascript">
jQuery(function (j) {
var r = j('#regular_features'),
btns = r.find('> div.tabs > a'),
el_ani = r.find('> ul'),
el_pages = el_ani.find('> li'),
pages = el_pages.length,
p = 0,
pw = 219;
btns.each(function (idx, btn) {
btn = j(btn);
btn.mouseenter(function (ev) {
if (idx != p) {
j(btns[p]).removeClass('on');
btn.addClass('on');
p = idx;
el_ani.stop().animate({ top: -pw * idx }, 300);
}
return false;
});
}).eq(1).mouseenter();
});
</script>
</div>

演示代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • jquery实现表格本地排序的方法

    jquery实现表格本地排序的方法

    这篇文章主要介绍了jquery实现表格本地排序的方法,实例分析了jQuery操作数组实现本地表格排序的技巧,需要的朋友可以参考下
    2015-03-03
  • jQuery实现的弹幕效果完整实例

    jQuery实现的弹幕效果完整实例

    这篇文章主要介绍了jQuery实现的弹幕效果,结合完整实例形式分析了jQuery通过结合时间函数控制输入文字与样式的渐变实现弹幕效果,需要的朋友可以参考下
    2017-09-09
  • jQuery实现简易的输入框字数计数功能示例

    jQuery实现简易的输入框字数计数功能示例

    这篇文章主要介绍了jQuery实现简易的输入框字数计数功能,结合实例形式分析了jQuery针对页面元素属性的获取与计算相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • jQuery旋转木马式幻灯片轮播特效

    jQuery旋转木马式幻灯片轮播特效

    这篇文章主要介绍了jQuery旋转木马式幻灯片轮播特效,很全面的图片轮播,特别适合用与产片展示,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jquery预览图片实现鼠标放上去显示实际大小

    jquery预览图片实现鼠标放上去显示实际大小

    本文为大家介绍的这个示例为jquery实现的预览图片,当鼠标放上去显示实际大小,感兴趣的朋友可以学习下
    2014-01-01
  • jQuery循环动画与获取组件尺寸的方法

    jQuery循环动画与获取组件尺寸的方法

    这篇文章主要介绍了jQuery循环动画与获取组件尺寸的方法,实例分析了animate用法及组件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery+ajax实现顶一下,踩一下效果

    jQuery+ajax实现顶一下,踩一下效果

    很多网站上面有顶一下,踩一下效果是直接用别人做好的插件放上去的,上星期正好要用到这个效果,就去研究了下。下面就一步一步来实现整个效果。。。。
    2010-07-07
  • jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】

    jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件HighCharts绘制简单2D柱状图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制2D柱状图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • jQuery中的ready函数与window.onload谁先执行

    jQuery中的ready函数与window.onload谁先执行

    这篇文章主要介绍了jquery中ready函数与window.onload函数的区别,别讲解了他们各自执行的时机,通俗易懂,需要的朋友可以参考下。
    2016-06-06
  • jQuery层次选择器用法示例

    jQuery层次选择器用法示例

    这篇文章主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下
    2016-09-09

最新评论