jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡。这款选项卡适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

实现的代码。

html代码:

  <div class="main-page">
        <div class="left">
            <div class="nav-back">
            </div>
            <div class="nav">
                <div class="on">
                    导航</div>
                <div>
                    新闻</div>
                <div>
                    世界杯</div>
                <div>
                    音乐</div>
                <div>
                    彩票</div>
            </div>
        </div>
        <div class="right">
            <div class="content-back">
            </div>
            <div class="content">
                <div>
                    站长素材1</div>
                <div>
                    站长素材2</div>
                <div>
                    站长素材3</div>
                <div>
                    站长素材4</div>
                <div>
                    站长素材5</div>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>

css代码:

 body
        {
            background: url(images/65.jpg) no-repeat fixed center center;
        }
        .clear
        {
            clear: both;
        }
        .main-page
        {
            margin: 200px auto 0 auto;
            width: 700px;
            height: 300px;
        }
        .main-page .left, .main-page .right
        {
            float: left;
        }
        .main-page .nav-back
        {
            width: 60px;
            height: 300px;
            background: #000;
            opacity: .3;
            filter: alpha(opacity=30);
        }
        .main-page .nav
        {
            position: relative;
            margin-top: -300px;
            width: 60px;
            text-align: center;
            font-size: 14px;
            font-family: "微软雅黑";
            color: #fff;
        }
        .main-page .nav div
        {
            height: 32px;
            line-height: 28px;
        }
        .main-page .nav div.on
        {
            background: #0094ea;
        }
        .main-page .right
        {
            width: 620px;
            height: 300px;
            margin-left: 20px;
        }
        .main-page .content-back
        {
            width: 620px;
            height: 300px;
            background: #fff;
            opacity: .3;
        }
        .main-page .content
        {
            position: relative;
            width: 600px;
            height: 280px;
            margin-top: -300px;
            padding: 10px;
            overflow: hidden;
        }
        .main-page .content div
        {
            width: 600px;
            height: 280px;
            margin-bottom: 10px;
            background: #fff;
        }

js代码:

  $(".main-page .nav div").mouseenter(function () {
            var $this = $(this);
            var index = $this.index();
        }).mouseleave(function () {
            var $this = $(this);
            var index = $this.index();
        }).click(function () {
            var $this = $(this);
            var index = $this.index();
            var l = -(index * 290);
            $(".main-page .nav div").removeClass("on");
            $(".main-page .nav div").eq(index).addClass("on");
            $(".main-page .content div:eq(0)").stop().animate({ "margin-top": l }, 500);
        });

其他精彩文章

jQuery教程(29)-jQuery插件开发之为插件方法指定参数

jQuery教程(28)-jQuery插件开发之使用插件

jQuery教程(27)-jQueryajax操作之修改默认选项

jQuery教程(26)-ajax操作之使用JSONP加载远程数据

jQuery教程(25)-ajax操作之安全限制

时间: 2024-10-10 01:44:54

jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡的相关文章

一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div

分享10款基于jquery和css3的web前端的动画特效

1.响应式圆形动画导航菜单 响应式的移动导航栏,现在我发现了一个新的技术(有关HTML5)可以在没有使用Javascript的情况下做一个响应式菜单.这个菜单可以自动排列到左边.中间或者右边).不像之前的教程需要点击某"开关"来显示或隐藏菜单,现在只需要把鼠标移到菜单按钮就会出现菜单列表(而且会提示当前所在的导航位置). 在线演示 源码下载 2.Canvas 示例:4种超炫的网站动画背景效果 今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段

分享一款基于jquery的圆形动画按钮

之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: 在线预览   源码下载 实现的代码. html代码: <figure class='red'> <div class='icon'> i</div> <div class='circle'> </div> </figure> <f

jquery + css 特效 之 一款基于jQuery/CSS3实现拼图效果的相册

今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图片倾斜需要CSS3支持.效果图如下: 本章主要参照了如下文章进行学习 jquery:http://www.itmmd.com/tag/jquery.html jQuery教程(31)-jQuery插件开发之全局函数插件 jQuery教程(30)-jQuery插件开发之自定义选择符 jQuery教程(

一款基于jQuery的图片场景标注提示弹窗特效

爱编程小编今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 在线预览   源码下载 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: <div class="container

一款基于jquery和css3的头像恶搞特效

今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wwiaftm-container"> <div class="base wwiaftm"> <div class="body-1 wwiaftm"> <div

10款基于jQuery打造的大屏带导航焦点图

1.纯CSS3实现3D效果iPhone 6动画 iPhone 6刚发布不久,今天我们就用纯CSS3来把iPhone 6的外观简单地绘制出来,记得是用纯CSS3实现的哦,没有用一张图片.由于CSS3特性的运用,整个iPhone 6手机边框带有阴影,很有立体3D的视觉效果. 在线演示 源码下载 2.纯CSS3天气动画图标 这是一款基于纯CSS3的天气动画图标,利用CSS3特性,我们在这里绘制了7个关于天气的图标,并且每一个图标都有一套代表当前天气的动画特效,比如下雨天气,就会有下雨的动画,下雪也是如

一款基于jquery ui的动画提交表单

今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center"> <form id="myform"> <div id="bloc_recherche_couleur"> <div id="etape0_recherche&

一款基于jquery的手风琴显示详情

今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center"> <span class="openzone" zone="lestrois" id="autoclicklestrois">NOW, OPEN THE THREE !</span