背景弹性滚动的导航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>背景弹性滚动的导航效果</title>
<FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" />
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.nav-wrap {
margin: 0 auto;
background-color: #121212;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}
.group:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .group { /* IE7 */
zoom: 1;
}
#example {
width: 960px;
margin: 0 auto;
list-style: none;
position: relative;
}
#example li {
display: inline;
}
#example li a {
position: relative;
z-index: 200;
color: #AAA;
font-size: 14px;
display: block;
float: left;
padding: 12px 10px 10px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example li a:hover {
color: #FFF;
}
#example #magic-line-two {
width: 100px;
position: absolute;
top: 0;
left: 0;
background: #666;
z-index: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.current a {
color: #FFF !important;
}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $el, leftPos, newWidth,
$mainNav = $("#example");
/*
EXAMPLE
*/
$mainNav.append("<li id=‘magic-line-two‘></li>");
var $magicLineTwo = $("#magic-line-two");
$magicLineTwo
.width($(".current").width())
.height($mainNav.height())
.css("left", $(".current a").position().left)
.data("origLeft", $(".current a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("origColor", $(".current a").attr("rel"));
$("#example li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: $el.attr("rel")
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLineTwo.data("origWidth"),
backgroundColor: $magicLineTwo.data("origColor")
});
});
});
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div class="nav-wrap">
<ul class="group" id="example">
<li class="current"><a href="#" _fcksavedurl="#">Home</a></li>
<li><a href="#" _fcksavedurl="#">About me</a></li>
<li><a href="#" _fcksavedurl="#">Our Team</a></li>
<li><a href="#" _fcksavedurl="#">Portfolio</a></li>
<li><a href="#" _fcksavedurl="#">The Show</a></li>
<li><a href="#" _fcksavedurl="#">Videos</a></li>
<li><a href="#" _fcksavedurl="#">CSS/HTML</a></li>
<li><a href="#" _fcksavedurl="#">jQuery</a></li>
<li><a href="#" _fcksavedurl="#">Navigation</a></li>
<li><a href="#" _fcksavedurl="#">Wordpress</a></li>
<li><a href="#" _fcksavedurl="#">Contact</a></li>
</ul>
</div>
</body>
</html>

时间: 2024-11-01 11:34:07

背景弹性滚动的导航效果的相关文章

jQuery实现固定顶部 定位滚动导航效果代码

jQuery实现固定顶部 定位滚动导航效果代码,很常见的效果,非常实用:滚动滚动条时,导航固定顶部,并且滚动到对应的板块时,当前导航高亮显示:点击导航文字时平滑跳转到对应的板块. $(function(){          var subNav_active = $(".adv_active");         var subNav_scroll = function(target){             subNav_active.removeClass   ("a

[Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

本文将演示使用第三方类库,创建旋转和弹性的页面切换效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'GuillotineMenu' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件[

移动web页面支持弹性滚动的3个方案

有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG. 上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下: ios4 和 android

点击弹出弹性下拉菜单效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="

android 背景图片滚动

昨天在给客户端做天气展示页面的时候,发现很多app的天气页面背景图片都会缓慢移动,形成了一种3d的感觉.例如下雨,静态图片缓慢移动,雨滴位置变换感觉就真的在下雨.云朵的移动也很酷.于是研究了一下午.写了一个自定义view控件. 我的自定义控件继承了view,重写ondraw方法.本人C#转android才3个月,以下代码如有错或者有可以改进的地方,请各位在评论中指出.望不吝赐教! ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

电商网站常用的楼层导航效果

很多电商网站都使用楼层导航效果来布局,如京东,唯品会等大型网站.那楼层导航效果怎么写了,其实很简单,主要用到鼠标滚动事件和高度的应用.现在我们就来用jquery来写以下.代码是直接copy过来的,因为注释比较多所以看起来有点乱.感兴趣的同学可以下载下面的源码来学习. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>楼层导航3</title> &

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果.起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章):而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果. 废话不多说了,直接上码吧,,,,,,,,,,,

视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 一.什么是视差滚动? 视 差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快. 当我们坐在车上向车窗外 看时,也会有 这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过.许多游戏中都使用视差效果来增加场景的立体感.说的简单点就是网页内的元素 在滚动屏幕

视差滚动(Parallax Scrolling)效果的原理和实现(转)

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果:http://www.ok-studios.de/home/ 一.什么是视差滚动? 视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快.当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过.许多游戏中