一款基于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);
});
via:http://www.w2bc.com/Article/17820
一款基于jQuery的仿百度首页滑动选项卡的更多相关文章
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 一款基于jquery带百分比的响应式进度加载条
今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- 一款基于jQuery饼状图比例分布数据报表
今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
随机推荐
- Android Audio遇到播放无声时的分析
在Android Audio开发过程中,有遇到播放ringtone时无声,但播放Music可以听到声音,关于无声问题的分析,在此做个笔记,方便以后回顾. 分析方向: 1:在音量控制面板中确认该音频流对 ...
- 使用Ambari部署hadoop集群
准备工作 1. 设置sudo免密码登陆 由于CentOS安装之后,普通用户无sudo权限,故应该设置sudo权限. 参考文章:http://www.cnblogs.com/maybob/p/32988 ...
- 第二百零八天 how can I 坚持
今天徐斌生日,生日快乐.买了两个小蛋糕,哈哈 还买了两条熊猫鱼.不知道鱼会不会冻死啊,买了加热器又不想用,看他们造化吧. LOL不错的游戏的. 睡觉,好冷.
- cocos2dx实现功能强大的RichText控件
转自:http://blog.csdn.net/ljxfblog/article/details/26136773 最近准备做一个聊天系统,开始准备使用cocos2dx的UIRichText控件来显示 ...
- ThinkPad X220i 刷白名单BIOS,改装第三方无线网卡
ThinkPad X220i自带的网卡是REALTEK RTL8188CE,这张卡在Mac下目前是无解的.国外网站有该卡liunx.unix内核的驱动,但还是没有高人编译出来. 不等了,这卡没戏.正好 ...
- java反射工具类
package com.yingchao.kgou.core; import java.lang.reflect.Field; import java.lang.reflect.InvocationT ...
- emWin(ucGUI)在PC机上模拟的按键响应多次解决办法 worldsing
emWin(ucgui) 在PC端的模拟器,默认的按键机制是"按抬都Msg",当在按下键盘时,会收到一个key值-1,在按键没有离开时一直维持,当按键松开时还发送一个key值-0的 ...
- Spring JTA应用JOTM & Atomikos III Atomikos
前面简单介绍了JOTM如何在Spring中配置,并如何使用它的JTA事务,本节将介绍Atomikos如何与Spring集成,并使用它的JTA事务. Atomikos,是一个基于Java的开源事务管理器 ...
- Xen入门系列一【使用Xen4CentOS 在 Centos 6 上安装 Xen】
最近在学习Hadoop,在Win7下用VMware搭了三台虚拟机好不容易装好了Hadoop结果跑个两个单词的wordcount就跑了十分钟,郁闷啊,于是开始寻找效能更好的虚拟化解决方案,然后选定了Xe ...
- [置顶] 两台一级域名相同二级域名不同的服务器,怎么共享session
比如www.hongchangfirst.com和video.hongchangfirst.com两个域名,一级域名相同,二级域名不同.每个服务器运行着不同的功能模块或者不同的子系统,他们使用不同的二 ...