本文实例呈报了jQuery完结的滑块滑动导航功用。分享给我们供我们参照他事他说加以考察,具体如下:
正文实例陈说了jQuery插件完结弹性运动的主意。分享给我们供大家参考,具体如下:
本文实例陈述了jQuery实现背景弹性滚动的导航作用。分享给大家供我们参考,具体如下:
1.1 App滑动导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net jquery滑动导航</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}
body {
font: 16px/20px 'Microsoft yahei,微软雅黑';
color: #AFBBBB;
}
ul {
list-style-type: none;
}
ul li {
float: left;
}
a {
text-decoration: none;
color: #AFBBBB;
}
a:hover {
color: #ffffff;
cursor: pointer;
}
.clearfix:before,.clearfix:after {
content:"";
clear: both;
display: table;
height: 0;
zoom: 1;
overflow: hidden;
}
.nav {
width:519px;
margin: 0 auto;
}
.nav ul {
background: gray;
height: 35px;
line-height: 35px;
position: relative;
padding: 0 5px;
}
.nav ul li {
position: relative;
padding: 0 25px;
}
.nav ul li>a {
position: relative;
z-index: 100; /*将a元素的z-index设置比li大,这样hover效果才不会无效*/
}
.nav ul li:last-child {
width: 98px;
height: 90%;
position: absolute;
z-index: 50;
left: 5px;
bottom: 0;
top: 0;
margin: auto;
background: rgba(152,206,170,0.5);
border-radius: 5px;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >幼儿园</a></li>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >小学</a></li>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >初中</a></li>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >高中</a></li>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >大学</a></li>
<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >社会</a></li>
<li class="huadong" id="huaBlock"></li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script>
$(function(){
$("ul li:not(:last)").hover(function(){
$("#huaBlock").stop(); //停止正在运行的动画
var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //当前li的偏移量减去当前ul的偏移量就是li距离ul的距离
// alert("curleft:"+curleft);
$("#huaBlock").animate({"width":curliWidth,"left":curleft},500);
},function(){
$("#huaBlock").stop();
$("#huaBlock").animate({"width":98,"left": 5},200);
});
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jQuery弹性运动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// JavaScript Document
(function($){
$.fn.moveTx=function(json)
{
var i=0;
for(i=0;i<this.length;i++)//重要
{
startMove(this[i],json);
}
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
var iSpeed=0;
var iTget=0;
function startMove(obj,json)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
for(var attr=0 in json)
{
iSpeed+=(json[attr]-parseInt(getStyle(obj, attr)))/5;
iSpeed*=0.7;
iTget+=iSpeed;
if(Math.abs(iSpeed)<1 && Math.abs(iTget-json[attr])<1)
{
clearInterval(obj.timer);
obj.style[attr]=json[attr]+'px';
}
else
{
obj.style[attr]=iTget+'px';
}
}
}, 30);
}
}})(jQuery)
$(function(){
var oDiv=$('#zgz')
oDiv.click(function(){
$(this).moveTx({left:500})
})
})
</script>
<style>
#zgz{ width:80px; height:80px; background-color:#f00;position:absolute; left:0px; top:20px; color:#fff; padding:10px;}
#xt{ width:1px; height:500px; background-color:#000; position:absolute; left:500px; top:0px;}
</style>
</head>
<body>
<div id="zgz">弹性运动</div>
<div id="xt"></div>
</body>
</html>
<!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>
<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="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>
注脚:这一个例子首借使实现一条导航山唯有多少个选项的。
使用在线HTML/CSS/JavaScript代码运维工具
测量检验运维效果如下:
运营作效果果:
PS:这里再为大家推荐四款代码格式化、美化工具,相信大家在后来的耗费进程中会用获得:
1.契合用于移动端。
在线JavaScript代码美化、格式化学工业具:
2.滑动条的尺寸是选项内容的尺寸。
更加多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery切换特效与技术总计》、《jQuery插件落成弹性运动全体示例,jQuery达成的滑块滑动导航效用示例。jQuery扩张才干计算》、《jQuery常用插件及用法总括》、《jQuery拖拽特效与技艺总计》、《jQuery常见优良特效汇总》、《jQuery动画与特效率法总计》及《jquery采纳器用法计算》
更加多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery切换特效与能力总计》、《jQuery扩大技能计算》、《jQuery常用插件及用法总括》、《jQuery拖拽特效与手艺总结》、《jQuery常见特出特效汇总》、《jQuery动画与特效能法总括》及《jquery选取器用法总计》
JavaScript压缩/格式化/加密工具:
1.1.1. 效果图
希望本文所述对大家jQuery程序设计有着辅助。
期望本文所述对我们jQuery程序设计有着协助。
XML代码在线格式化美化工具:
json代码在线格式化/美化/压缩/编辑/转换工具:
1.1.2. Html
在线JSON代码核实、核查、美化、格式化工具:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑动导航</title>
</head>
<body>
<ul class="slid">
<li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li>
</ul>
<script type="text/JavaScript" src="js/jQuery-1.9.1.min.js"></script>
</body>
</html>
愈来愈多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jquery中Ajax用法总计》、《jQuery表格(table)操作技艺汇总》、《jQuery拖拽特效与技艺总括》、《jQuery扩充技能总括》、《jQuery常见杰出特效汇总》、《jQuery动画与特作用法总计》、《jquery选择器用法总计》及《jQuery常用插件及用法计算》
1.1.3. Css
但愿本文所述对我们jQuery程序设计有所协理。
<style type="text/css">
body,div,p{
margin:0;
padding:0;
}
ul.slid{
display: block;
position:fixed;
top: 10px;
left:0px;
right:0px;
height:60px;
background: #f2f2f2;
overflow: height;
}
ul.slid li{
display: inline-block;
width: 49%;
height: 40px;
margin-top: 10px;
float: left;
text-align: center;
overflow: hidden;
}
ul.slid li:first-child{
border-right: 1px solid red;
}
ul.slid li a{
display: inline-block;
width: 120px;
text-decoration:none;
height:37px;
line-height: 37px;
color: #898989;
overflow: hidden;
}
ul.slid li a:hover{
color: red;
}
#navLine{
height:2px;
background-color:red;
position:absolute;
bottom:7px;
width:0px;
left:0px;
display:none;
overflow:hidden;
}
</style>
1.1.4. jQuery
<script type="text/javascript">
$(function (){
navSlid();
});
//滑动导航
var navSlid = function(){
var nline = $('#navLine');
var lia = $('ul.slid li a');
//初始化滑块
nline.css({
'width':lia.width(),
'left' :parseInt(lia.position().left)
});
$('ul.slid li a').mouseenter(function(){
//显示滑块
if(nline.css('display') == 'none'){
nline.show();
};
//移动滑块
nline.stop().animate({
width: $(this).width(),
left: parseInt($(this).position().left)
},300);
});
};
</script>