上篇文章给大家详细的介绍了,如何使用jQuery实现弹出各种窗口效果,引起了很多朋友们得反响,今天再次给大家奉献一篇的新的基于jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果,希望对朋友们有所帮助,下面我们就来分析一下怎样实现一个跟随鼠标滑动滑动的tab选项卡效果。
要实现这个效果其实很简单,我们先来看看效果
基于上述效果,如果使用jQuery技术怎么实现呢?我们不妨来做个简单的分析,
如图:
首先,我们要有一些小的div标签,用于显示table选项卡的每一个,如图所示。
其次,定义一些稍微大些用于显示内容的div,对应编号也如图
最后,初始化选项卡和内容层为第一个要显示的内容,然后我们设法通过jQuery选择器选中所有的选项卡,添加鼠标悬停事件,通过遍历所有的,判断是否是当前鼠标悬停上的jQuery对象,进而设置样式。
单单通过上述的理论感觉不是很清晰,下面把代码贴出来,供大家参考,对着代码去阅读程序
源码如下:
Code:
jQuery实现常见的滑动门效果
jQuery实现常见的滑动门效果
- 标签1
- 标签2
- 标签3
标签1内容文字
标签2内容文字
标签3内容文字
源码下载:
jquery-door.html
[原创地址] [源码下载] [更多原创,多多支持多]
推荐:
[多图+详解]Android开发环境搭建全程演示(jdk+eclip+android sdk)