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

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

阅读量：6224 次

发布时间：2019-06-21

本文共 3279 字，大约阅读时间需要 10 分钟。

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

实现的代码。

html代码：

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);        });

via:

转载地址：http://tpyna.baihongyu.com/

你可能感兴趣的文章

javascript：第六章 F火狐不能对 {}括号内的函数进行预解析