模仿某站的测导航自己加以整理

<!DOCTYPE html>
<html>
<head>

<style>

/*首页右侧快速导航栏*/
.rightNav{position:fixed; width:140px; right:0; top:180px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank);}
.rightNav a{display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden; cursor:pointer; right:-110px;}
.rightNav a:hover{text-decoration:none; color:#39A4DC;}
.rightNav a:hover em{background:#00b700}
.rightNav a em{display:block; float:left; width:30px;height: 30px; line-height: 30px;margin-top: 0; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
.rightNav a.new em{background:#f60;}
.demoBox .iframeWrap{width:452px;}
.demoBox .iframeWrap iframe{width:452px; height:232px; background:url(../images/loading.gif) center center no-repeat;}
/*当前位置*/
.position{height:23px;font:normal 12px/23px ‘Microsoft Yahei‘;background:#fff url(../images/index_sprite.png) no-repeat left -515px;border-bottom:1px solid #eee;padding-bottom:5px;color:#333;text-indent:25px; width: 941px; margin-bottom: 5px;}
.position a{color:#333;}
.position a:hover{color:#014da3;}
#elevator_item{width: 60px;height: 100px;position: fixed;right: 30px;bottom: 40px;-webkit-transition: opacity .4s ease-in-out;-moz-transition: opacity .4s ease-in-out;-o-transition: opacity .4s ease-in-out;opacity: 1;z-index: 100020;display: none;}
#elevator_item.off{opacity: 0;visibility: hidden}
#elevator{display: block;width: 60px;height: 50px;background: url(../images/icon_top.png) center center no-repeat;background-color: #444;background-color: rgba(0,0,0,.6);border-radius: 2px;box-shadow: 0 1px 3px rgba(0,0,0,.2);cursor: pointer;margin-bottom: 10px}
#elevator:hover{background-color: rgba(0,0,0,.7)}
#elevator:active{background-color: rgba(0,0,0,.75)}

</style>

<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/rightnav.css"/>
</head>
<body>
<div class="rightNav">
<a href="#top"><em>^</em>回到顶部</a>
<a href="#Banner"><em>1</em>焦点幻灯</a>
<a href="#Nav"><em>2</em>菜单导航</a>
<a href="#Tab"><em>3</em>选项卡</a>
<a href="#Service"><em>4</em>在线客服</a>
<a href="#Picture"><em>5</em>图片特效</a>
<a href="#Album"><em>6</em>相册特效</a>
<a href="#Form"><em>7</em>表单按钮</a>
<a href="#Scorlling"><em>8</em>广告/滚动</a>
<a href="#Other"><em>9</em>其他特效</a>
</div>
</body>
<script src="Data/js/jquery.js"></script>
<script>
//右侧导航
var btb=$(".rightNav");
var tempS;
$(".rightNav").hover(function(){
var thisObj = $(this);
tempS = setTimeout(function(){
thisObj.find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"0"},200);},50*i);
});
},200);
},function(){
if(tempS){ clearTimeout(tempS); }
$(this).find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"-110"},200,function(){
});},50*i);
});
});
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
//滚动加载
var scrollLoad =function(){
$("#content iframe[_src]").each(function(){
var t = $(this);
if( t.offset().top<= $(document).scrollTop() + $(window).height() )
{
t.attr( "src",t.attr("_src") ).removeAttr("_src");
}
});//each E
}
scrollLoad();
$(window).scroll(function(){
if(isIE6){ btb.css("top", $(document).scrollTop()+30) }
scrollLoad();
});
</script>
</html>

时间: 2024-07-29 23:01:42

模仿某站的测导航自己加以整理的相关文章

外贸建站之网站导航栏菜单高亮JS实现代码分享

外贸建站之网站导航栏菜单高亮JS实现代码分享,今天客户要给CAN Clip加一个菜单高亮的效果,原本打算用PHP代码实现,但是感觉过于复杂,JS有更好的解决方案, 这里把我们开发的代码分享给大家. 1 var urlstr = location.href; 2 var urlstatus=false; 3 var urlnum = 1; 4 $("#navbar a").each(function () { 5 if ((urlstr + '/').indexOf($(this).at

从零开始建站(五) - 文章导航目录

一.应用 这里列举几个使用文章导航目录的地方: 1.百度百科 可以看到下面百度百科为了使结构清晰,所以使用了2个目录,第一个目录就像我们写毕业论文的目录,第二个就像Word和pdf左侧的导航目录,而我这里就是使用的后者.优点就是阅读的全程都可以跳转到你想要到的位置. 2.Word.pdf中应用 打开Word的视图,点击文档结构图,就可以看到 二.思路分析 1.解决方案-偷 1.1我们先看看百度百科是如何实现的,随便找条百度百科词条,然后按F12,查看定位的html标签,比如图中的"召唤师技能&q

网址导航行业分析:互联网“新门户路人皆知(www.lurenjiezhi.com)”横空出世

网址导航作为与搜索引擎.即时通讯并列的三大上网入口,已成为很多网民上网的第一站.网址导航也由最初的单纯提供网站站点功能,逐渐发展为综合型的上网门户,随着资源整合优势的凸显,网址导航的资源整合能力越来越强,离用户的距离也越来越近,整个网址导航行业已经迎来了新一轮成长的机会,甚至大有取代传统门户网站的趋势. 路人皆知(点击打开链接)网址导航发展稳健,稳居行业前五 路人皆知网址导航是近几年才崛起的导航网站,并凭着出色的用户体验和对产品的微创新,稳居行业前五名.根据艾瑞2013年最新的数据显示,搜 狗网

天书笔记:HTML+CSS实现顶部导航栏

此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 下面逐条分析这一堆东西 HTML部分主要是这个: 1 <div class="topbar"> 2 <div class="topbody"> 3 <a class="title" href=""&

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

web导航栏点击跳转后的样式

搭建web网页的导航栏时,需要有点击某导航页面跳转后,被点击的<a>标签样式添加或改变(bootstrap只能实现页面不刷新的点击效果),网上查阅了很多,终于解决了问题,豁然开朗的同时也小总结一下: ps:以下为摘录百度知道,并非本人原创,而我用的便是其中第二种方法. 方法有很多,大体可分为三种: 一.在服务器端判断当前页面隶属于哪一个分类,然后对其进行高亮化,这个高亮化的方法也有很多,相信不是你要的,不一一讲解: 二.每一个页面这个导航条都在各自的页面内,那么独立对其分配class或者行内样

大型网站的导航设计

对于大部分网站,导航并不算是个挑战.一条主导航加条二级导航支撑,通常就足够了. 典型的做法是,二级导航显示出父.兄及当前子菜单.常显的主导航条显示最顶层的菜单,允许用户在菜单间切换. 然而,有一类网站让这种传统的导航样式承担有些吃力.这就是我要提的大型网站. 定义大型网站 一个大型网站由结合了综合服务和产品的典型大型组织所有.这个组织通常也服务各色用户. 拥有大型网站的组织,包括BBC这类机构型的,类似微软这种项目多样化的公司型的,政府部门,高等教育类的以及运作多种活动的慈善组织类的,比如世界自

上海华测中标缅甸520台北斗GPS RTK双模接收机项目

上海华测导航技术有限公司(下称"上海华测")近日中标缅甸农业部520台套北斗/GPS双模卫星导航实时动态差分接收机,将应用于缅甸农业数据的采集统计.土地估值和土地管理等方面. 此前,缅甸国家农业部曾向全球公开招标采购高精度全球卫星导航定位系统接收机. 上海华测专注于国产GNSS研发.生产.及销售,主要为客户提供高精度单频测量型GNSS接收机.双频实时动态GNSS接收机.GNSS姿态测量系统.手持GIS终端.无线数传产品和水上测量产品等,是中国第一台双频毫米级GNSS测量接收机和国内第一

【WEB2.0】 网页调用QQ聊天(PC+M站)

很多时候,我们在网站中需要加入联系QQ的功能,我下面就来说下在web页面中调用QQ聊天是如何实现的,直接上代码: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,