登录
当前位置： 首页 > 编程笔记 >

jQuery层动画定位滑动效果的方法

拓拔辰钊
2023-03-14
本文向大家介绍jQuery层动画定位滑动效果的方法，包括了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>
<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.6.2.min.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>

希望本文所述对大家的jQuery程序设计有所帮助。

 类似资料：
  • ScrollView滑动固定效果

    模仿大众点评网的团购页面，整体布局滑动到顶端时，信息描述的view停止在顶端，其他布局仍可滑动。在demo中的表现是：白色视图往上滑动接近屏幕顶端时，将停止（表现为表层出现一个暗红色的视图）滑动，底部的视图继续往上移动。底部视图往下移动时，当滑动到一定位置时（表现为底部的白色视图和暗红色视图重合），白色视图将继续移动。 [Code4App.com]

  • jQuery之动画效果大全

    本文向大家介绍jQuery之动画效果大全，包括了jQuery之动画效果大全的使用技巧和注意事项，需要的朋友参考一下 下面介绍了几种动画效果的方法，具体如下： 1、show()显示效果 语法：show(speed,callback)　　Number/String,Function　speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"　callback可选,为当动

  • jquery实现楼层滚动效果

    本文向大家介绍jquery实现楼层滚动效果，包括了jquery实现楼层滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下 html: js: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • jQuery实现的经典滑动门效果

    本文向大家介绍jQuery实现的经典滑动门效果，包括了jQuery实现的经典滑动门效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的经典滑动门效果。分享给大家供大家参考。具体如下： 这是一款jQuery 滑动门，从样式上来说，虽然有些古板，但已经具备了经典的滑动门功能，感兴趣的朋友可以继续美化一下界面。 运行效果截图如下： 在线演示地址如下： http://demo.j

  • jQuery插件Slider Revolution实现响应动画滑动图片切换效果

    本文向大家介绍jQuery插件Slider Revolution实现响应动画滑动图片切换效果，包括了jQuery插件Slider Revolution实现响应动画滑动图片切换效果的使用技巧和注意事项，需要的朋友参考一下 这是一款非常强大的内容切换插件，它基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动

  • js实现类似jquery里animate动画效果的方法

    本文向大家介绍js实现类似jquery里animate动画效果的方法，包括了js实现类似jquery里animate动画效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现类似jquery里animate动画效果的方法。分享给大家供大家参考。具体分析如下： 该实例可实现鼠标移上，先宽度变化，再高度变化，最后透明度变化，鼠标移出，再依次变回去的效果。 要点一： 如上面，函数也可

  • 原生js仿jquery animate动画效果

    本文向大家介绍原生js仿jquery animate动画效果，包括了原生js仿jquery animate动画效果的使用技巧和注意事项，需要的朋友参考一下 jquery animate动画效果：   代码 注意点  1.动画前要先停止原来的定时器，不然绑定多个对象的话会冲突  2.定时器的id要区分开，不能重叠，这里我直接那绑定对象的 对象来赋值  obj.timer  3.要判断所要执行的动画，

  • Android编程实现ViewPager多页面滑动切换及动画效果的方法

    本文向大家介绍Android编程实现ViewPager多页面滑动切换及动画效果的方法，包括了Android编程实现ViewPager多页面滑动切换及动画效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法。分享给大家供大家参考，具体如下： 一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动

相关阅读

原生js仿jquery animate动画效果Android编程实现ViewPager多页面滑动切换及动画效果的方法jQuery晃动层特效实现方法AngularJS中实现动画效果的方法Javascript动画效果（2）

相关文章

AngularJS 动画JavaScript动画CSS动画8.4.1 Android动画合集之帧动画8.4.2 Android动画合集之补间动画

相关问答

javascript - 滑块滚动缓冲效果的实现？FragmentTransaction动画滑入顶部平滑进度条动画为布局滑入和滑出动画如何创建插入动画效果？

相关工具

ScrollView滑动固定效果Velocity.js 动画效果库选项卡滑动效果封面展示动画效果视图各种动画效果

相关文档

Android Animation 动画详解LeetCode 题解动画演示iOS 核心动画高级技巧讲解 iOS 动画设计指南CSS Buttons 按钮效果
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.