分类目录归档:jQuery插件

jQuery带缩略图焦点图插件 自定义滑块内容

今天我们要来分享一款基于jQuery的焦点图插件,这款jQuery焦点图功能十分强大,有以下两个特点:第一是焦点图带有缩略图预览,当鼠标滑过对应图片的按钮时,即可弹出缩略图;第二是焦点图的滑块内容可以自定义,可以是图片,也可以是任何HTML元素,因此也非常的灵活。另外,焦点图的切换动画也有多种,非常炫酷。

jquery-custom-slider-thumbnail

在线演示源码下载

jQuery/CSS3飘带式下拉菜单

今天我们再来介绍一款jQuery下拉菜单,这款jQuery下拉菜单应用了一些CSS3相关的属性,但并不复杂,也没有绚丽的动画,但是非常实用。这款jQuery菜单的另一个特点是菜单整体呈飘带状,样式非常新颖。鼠标滑过菜单项时即可展开下拉菜单。

jquery-css3-ribbon-menu

在线演示源码下载

下面一起来看看这款菜单的实现过程和源代码,代码主要由HTML、CSS和jQuery组成。

HTML代码:

<div id="menu-holder">
       <div>
<ul class="menu">
<li><a href="http://www.flashuser.net">Home</a></li>
<li><a href="#">Dropdown</a>
<ul>
<li><a href="http://www.flashuser.net/category/css">CSS</a></li>
<li[......]

阅读全文>>

jQuery/CSS3大屏下拉菜单 自定义子菜单内容

这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单、图片等HTML元素,是一款非常实用的jQuery/CSS3下拉菜单插件。

jquery-css3-full-dropdown-menu

在线演示源码下载

jQuery动画图片滑块插件 流水线样式

今天我们要来介绍一款很酷的jQuery图片滑块插件,这款jQuery图片插件非常具有个性化,首先图片可以根据数量来分组,然后点击切换按钮时,每一组图片就像流水线上的产品一样滑过,图片滑动时也有不错的动画效果。这款jQuery插件可以在商品展示页面上使用。

jquery-animated-image-slider

在线演示源码下载

jQuery Dock菜单 可悬浮页面两侧

还记得之前分享的一款基于CSS3的Android Dock菜单么?的确,效果非常酷。今天我们要分享的这款菜单也是Dock类型的,并且是基于jQuery的,兼容性方面更加出色。这款jQuery Dock菜单可以悬浮在页面两侧,鼠标划过菜单项时将会出现很酷的动画效果。

jquery-dock-menu

在线演示源码下载

jQuery动画下拉菜单 自定义菜单内容

这次我们要来分享一款jQuery菜单插件,这是一款jQuery动画下拉菜单,这款菜单的特点是下拉菜单项可以自定义内容,可以是图片和图文结合的内容,非常灵活。另外这款jQuery菜单在鼠标划过菜单项时也会出现向下展开的动画效果,是一款很实用的jQuery菜单。

jquery-custom-menu-content

在线演示源码下载

jQuery动画图标菜单导航 仿苹果样式

这次要分享的这款jQuery插件非常酷,它是一款带有动画按钮的jQuery菜单插件。而且从菜单的外观上来看,有点苹果菜单风格的味道。当我们将鼠标滑过菜单项时,即会有对应的图片悬浮到菜单项上面,效果非常不错的jQuery菜单。

jquery-icon-animated-menu

在线演示源码下载

jQuery仿苹果样式焦点图插件

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气。焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用。

jquery-apple-image-slide

在线演示源码下载

接下来我们一起分享一下实现这款苹果焦点图的过程及源码。

HTML代码:

<div id="gallery">

    <div id="slides" style="width: 3680px; margin-left: 0px;">

    <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/macbook.jpg"></div>
    <div class="slide"><img width="920" height="400" alt="side" src="img/sample_slid[......]

阅读全文>>

jQuery动画进度条 实时显示进度百分比

这是一款基于jQuery的进度条插件,这款进度条插件在显示进度条的时候出现很不错的动画效果,另外,进度条在更新进度时也将实时显示进度数字百分比。进度条结束时,会显示完成字样。由于是基于jQuery的,所以这款进度条基本兼容所有浏览器。

jquery-animated-progress-bar

在线演示源码下载

jQuery/CSS3实现Android Dock菜单效果

这是一款基于jQuery和CSS3的Android Dock菜单效果,点击底部的按钮即可让应用图标浮动上来,并且按钮也出现3D的翻转效果。jQuery是一款应用十分广泛的javascript类库,很多前端开发者都十分青睐jQuery框架。

jquery-css3-android-dock

在线演示源码下载