jQuery层动画定位滑动

<!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>jQuery层动画定位滑动</title>
<style type="text/css">
body {
font-family: ‘Signika Negative‘, sans-serif;
}
#head {
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
border-color: #0055ff;
border-width: 0 0 10px 0;
border-style: solid;
background: #0088ff;
}
#head li {
list-style: none;
float: left;
display: block;
height: 30px;
padding: 0 10px;
0 10px;
cursor: pointer;
font-size: 26px;
}
#head li:hover {
color: #ffffff;
background: #0055ff;
border-color: #0011ff;
border-width: 0 0 10px 0;
border-style: solid;
}
#box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: visible;
background: ;
}
.cell {
width: 100%;
height: 100%;
overflow: auto;
}
.list {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 600px;
margin: -300px 0 0 -400px;
background: #0088ff;
}
#class_1 {
position: absolute;
top: 0;
left: 0;
background: ;
}
#class_2 {
position: absolute;
top: 0;
left: 100%;
background: ;
}
#class_3 {
position: absolute;
top: 0;
left: 200%;
background: ;
}
#class_4 {
position: absolute;
top: 100%;
left: 0;
background: ;
}
#class_5 {
position: absolute;
top: 100%;
left: 100%;
background: ;
}
#class_6 {
position: absolute;
top: 100%;
left: 200%;
background: ;
}
#class_7 {
position: absolute;
top: 200%;
left: 0;
background: ;
}
#class_8 {
position: absolute;
top: 200%;
left: 100%;
background: ;
}
#class_9 {
position: absolute;
top: 200%;
left: 200%;
background: ;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#l_01").click(function() {
$("#bg").stop().animate({
top: 0 + "%",
left: 0 + "%"
}, "slow");
});
$("#l_02").click(function() {
$("#bg").stop().animate({
top: 0 + "%",
left: -100 + "%"
}, "slow");
});
$("#l_03").click(function() {
$("#bg").stop().animate({
top: 0 + "%",
left: -200 + "%"
}, "slow");
});
$("#l_04").click(function() {
$("#bg").stop().animate({
top: -100 + "%",
left: 0 + "%"
}, "slow");
});
$("#l_05").click(function() {
$("#bg").stop().animate({
top: -100 + "%",
left: -100 + "%"
}, "slow");
});
$("#l_06").click(function() {
$("#bg").stop().animate({
top: -100 + "%",
left: -200 + "%"
}, "slow");
});
$("#l_07").click(function() {
$("#bg").stop().animate({
top: -200 + "%",
left: 0 + "%"
}, "slow");
});
$("#l_08").click(function() {
$("#bg").stop().animate({
top: -200 + "%",
left: -100 + "%"
}, "slow");
});
$("#l_09").click(function() {
$("#bg").stop().animate({
top: -200 + "%",
left: -200 + "%"
}, "slow");
});
});
</script>
</head>

<body>
<div id="head">
<li id="l_01">1</li>
<li id="l_02">2</li>
<li id="l_03">3</li>
<li id="l_04">4</li>
<li id="l_05">5</li>
<li id="l_06">6</li>
<li id="l_07">7</li>
<li id="l_08">8</li>
<li id="l_09">9</li>
</div>
<div id="box">
<div id="bg">
<div class="cell" id="class_1">
<div class="list"></div>
</div>
<div class="cell" id="class_2">
<div class="list"></div>
</div>
<div class="cell" id="class_3">
<div class="list"></div>
</div>
<div class="cell" id="class_4">
<div class="list"></div>
</div>
<div class="cell" id="class_5">
<div class="list"></div>
</div>
<div class="cell" id="class_6">
<div class="list"></div>
</div>
<div class="cell" id="class_7">
<div class="list"></div>
</div>
<div class="cell" id="class_8">
<div class="list"></div>
</div>
<div class="cell" id="class_9">
<div class="list"></div>
</div>
</div>
</div>
</body>

</html>

时间: 2024-10-19 20:41:29

jQuery层动画定位滑动的相关文章

jQuery层动画定位滑动效果代码

<!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>jQuery层动画定位滑动</title&

jQuery 代码的层定位滑动动画效果

<!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>jQuery层动画定位滑动</tit

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览   源码下载 使用方法 使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

js页面滚动浮动层智能定位(jQuery)实现

///js页面滚动浮动层智能定位(jQuery)实现 ///调用:$("#popfloat").smartFloat($("#mainInfo").width() + 21); $.fn.smartFloat = function(width_p) { var position = function(element) { var top = element.position().top, pos = element.css("position")

jquery的动画效果

序言:昨天复习了jQuery的一些事件,今天我打算继续来复习jQuery的动画效果. 用于写一些网页特效:渐变菜单,渐变显示,图片轮播等. 首先当然得引入插件:<script src="jquery/jquery-1.11.1.js"></script> 1.简单的HTML代码 <input type="button" value="show" id="btn1"/><input ty

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

jQuery animate()动画效果

1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params 参数定义形成动画的 CSS 属性: //可选的 speed 参数规定效果的时长,它可以取以下值:"slow"."fast" 或毫秒: //可选的 callback 参数是动画完成后所执行的函数名称: 下面为几个实例: $("button").clic

JQuery之动画与特效

学编程吧JQuery之动画与特效发布了,欢迎通过xuebiancheng8.com 显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow.normal.fast,对应的速度分别为600ms.400ms.200ms.也可以直接填毫秒数,callback函数为回调函数,动作完成后调用此函数 [javascript] view plaincopyprint? $("img").show(3000,function()

jQuery学习——动画效果

动画效果 基本动画效果 隐藏匹配元素 $("img").hide(300);//将img隐藏300ms 显示匹配元素 $("img").show(300);//在300ms内显示img 元素状态切换 $(document).ready(function(){ $("input[type='button']").click(function() { $("div").toggle();//若果元素可见,切换为隐藏,如果元素隐藏,