【jQuery学习日记】jQuery实现滚动动画
需要实现的效果
样式分析:
2个主要部分,头部的标题和导航部分,和主要的功能实现区域;
1.头部
<div id="header">
<h1>动漫视频</h1>
<span><</span>
<span>></span>
</div>
<div id="tips">
<span class="on"> </span>
<span> </span>
<span> </span>
</div>
2.功能区域
<div id="viewBox">
<ul id="contentBox">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
添加样式
<style>
#header{
display: inline-block;
}
#header h1{
display: inline-block;
font-size: 32px;
padding-left: 20px;
}
#header span{
width: 30px;
height: 30px;
display: inline-block;
font-size: 23px;
cursor:pointer;
border: 1px solid #eee;
border-radius: 3px;
text-align: center;
}
#header span:hover{
background: #333;
color: #fff;
}
#viewBox{
width: 960px;
height: 140px;
font-size: 0;
overflow: hidden;
border: 1px solid #333;
}
#contentBox{
width: 2880px;
position: relative;
}
#contentBox>li{
width: 200px;
height: 100px;
background: pink;
display: inline-block;
font-size: 12px;
margin: 20px;
}
#tips{
display: inline-block;
}
#tips span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 20px;
text-align: center;
line-height: 20px;
border: 1px solid #eee;
cursor: pointer;
}
#tips span:hover{
background: #999;
color: white;
}
#tips span.on{
background: black;
color: white;
}
</style>
此处需要注意,因为需要给 contentBox 添加 animate left 方法,所以需要给它的 position : related 才能使 animate left 生效
功能分析:
1.下一页
2.当下一页滚动到最后一页面,再点击下一页的时候,需要返回到第一页
3.上一页
4.当上一页滚动到第一页,再点击上一页的时候,需要前进到最后一页
5.当点击圆圈的时候,前进到任意一页
功能实现
首先,我们在接下来的功能中常用的一些元素,先赋值给变量
$vBox = $('#viewBox'); /* 可以见到的展示区域 */
$cBox = $('#contentBox'); /* 内容区域 */
vWidth = $vBox.width(); /* 可见区域的宽度 */
cWidth = $cBox.width(); /* 内容区域的宽度 */
然后,我们有5个小功能,下一页(goNext),回到顶部(goTop),上一页(goBack),回到底部(goBotoom),到任意页(goPage)
1.下一页(goNext)
var vLeft=$cBox.position().left; //内容区域距左侧的距离
$cBox.animate({left: '-='+vWidth+'px'});
2.回到顶部(goTop)
var vLeft=$cBox.position().left;
$cBox.animate({left: 0});
3.上一页(goBack)
var vLeft=$cBox.position().left; //内容区域距左侧的距离
$cBox.animate({left: '+='+vWidth+'px'});
4.回到底部(goBotoom)
var vLeft=$cBox.position().left; //内容区域距左侧的距离
$cBox.animate({left: -cWidth+vWidth});
5.到任意页(goPage)
var vLeft=$cBox.position().left; //内容区域距左侧的距离
$cBox.animate({left: -vWidth*page}); //传递一个page参数用来知道需要跳转到第几页
当每个小功能实现后,组合下功能,并绑定功能
var $vBox;
var $cBox;
var vWidth;
var cWidth;
$(function () {
$vBox = $('#viewBox');
$cBox = $('#contentBox');
vWidth = $vBox.width();
cWidth = $cBox.width();
$('#header span:last-child').click(function () {
go('next');
})
$('#header span:nth-child(2)').click(function () {
go('back');
})
$('#tips>span').click(function () {
var $ThisS=$(this);
$ThisS.addClass('on').siblings().removeClass();
go($ThisS.index());
})
})
function go(page) {
var vLeft=$cBox.position().left;
if (!$cBox.is(':animated')){
switch (page){
case 'next':
if( vLeft > -cWidth-vLeft ){
$cBox.animate({left: '-='+vWidth+'px'});
}else{
go('top');
}
break;
case 'back':
if( vLeft < 0){
$cBox.animate({left: '+='+vWidth+'px'});
}else{
go('bottom');
}
break;
case 'top':
$cBox.animate({left: 0});
break;
case 'bottom':
$cBox.animate({left: -cWidth+vWidth});
break;
default:
$cBox.animate({left: -vWidth*page});
break;
}
}
}
下面是全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个页面</title>
<!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">-->
<script src="common/js/jquery-2.1.1.min.js"></script>
<!--<script src="common/js/screenAdaptation.js"></script>-->
<script src="js/download.js"></script>
<script src="js/stopXBack.js"></script>
<link rel="stylesheet" href="common/css/common-style.css?v=<%=Math.random()*100 %>">
<link rel="stylesheet" href="css/download.css?v=<%=Math.random()*100 %>">
<style>
#header{
display: inline-block;
}
#header h1{
display: inline-block;
font-size: 32px;
padding-left: 20px;
}
#header span{
width: 30px;
height: 30px;
display: inline-block;
font-size: 23px;
cursor:pointer;
border: 1px solid #eee;
border-radius: 3px;
text-align: center;
}
#header span:hover{
background: #333;
color: #fff;
}
#viewBox{
width: 960px;
height: 140px;
font-size: 0;
overflow: hidden;
border: 1px solid #333;
}
#contentBox{
width: 2880px;
position: relative;
}
#contentBox>li{
width: 200px;
height: 100px;
background: pink;
display: inline-block;
font-size: 12px;
margin: 20px;
}
#tips{
display: inline-block;
}
#tips span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 20px;
text-align: center;
line-height: 20px;
border: 1px solid #eee;
cursor: pointer;
}
#tips span:hover{
background: #999;
color: white;
}
#tips span.on{
background: black;
color: white;
}
</style>
<script>
var $vBox;
var $cBox;
var vWidth;
var cWidth;
$(function () {
$vBox = $('#viewBox');
$cBox = $('#contentBox');
vWidth = $vBox.width();
cWidth = $cBox.width();
$('#header span:last-child').click(function () {
go('next');
})
$('#header span:nth-child(2)').click(function () {
go('back');
})
$('#tips>span').click(function () {
var $ThisS=$(this);
$ThisS.addClass('on').siblings().removeClass();
go($ThisS.index());
})
})
function go(page) {
var vLeft=$cBox.position().left;
if (!$cBox.is(':animated')){
switch (page){
case 'next':
if( vLeft > -cWidth-vLeft ){
$cBox.animate({left: '-='+vWidth+'px'});
}else{
go('top');
}
break;
case 'back':
if( vLeft < 0){
$cBox.animate({left: '+='+vWidth+'px'});
}else{
go('bottom');
}
break;
case 'top':
$cBox.animate({left: 0});
break;
case 'bottom':
$cBox.animate({left: -cWidth+vWidth});
break;
default:
$cBox.animate({left: -vWidth*page});
break;
}
}
}
</script>
</head>
<body>
<div id="header">
<h1>动漫视频</h1>
<span><</span>
<span>></span>
</div>
<div id="tips">
<span class="on"> </span>
<span> </span>
<span> </span>
</div>
<div id="viewBox">
<ul id="contentBox">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
</body>
</html>
【jQuery学习日记】jQuery实现滚动动画的更多相关文章
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
- (高级篇)jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- JQuery学习笔记---jquery对象和DOM对象的关系
1.DOM(Document Object Model,文档对象模型).DOM树 { html (head&&body), head(meta && title) ...
- jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jquery学习笔记----jquery相关的文档
http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...
- jQuery学习之jQuery Ajax用法详解(转)
[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...
- jQuery学习之jQuery Ajax用法详解(转)
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jquery 学习日记之选择器
看完Jquery选择器的教程视频后,对jquery的选择器有一定的认识和了解,现整理一下知识: 一.jquery基本选择器,这类比较简单,一笔带过. #id 选择器,是选择 匹配id值中的第一个元素 ...
- 【转载】【JQuery学习】jQuery插件开发
JQuery做得最好的就是他的闭包和扩展性.超级简单的扩展方法,让更多的人可以轻松的开发定制自己的jQuery插件.下面的东西是转载过来当做学习材料的.虽然貌似有点古老,但是jQuery的变更一直都不 ...
随机推荐
- plsql中文显示问号
1. select userenv('language') from dual 2. 复制查询的值配置系统环境变量 NLS_LANG=AMERICAN_AMERICA.ZHS16GBK 3.配置系统环 ...
- TreeviewEditor.rar
本工具可以打开.保存指定格式的XML文件. 树形控件的节点可以编辑.删除.增加.使用本工具看方便地创建书或论文的目录大纲,我用这个工具已经写了好几本书了. 动态图1: 动态图2:编辑效果,支持节点拖曳 ...
- form提供的两种数据传输方式 get和post method=”post“和method=”get”
虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一些差异,但是了解二者的差异在以后的编程也会很有帮助的. ...
- ARM7探究
1.流水线:三级流水线 预取.译码.执行.三级并行发生 2.什么是哈佛结构? 哈佛结构是一种存储器结构,是一种并行体系结构,它的主要特点是将程序和数据存储在不同的存储空间中,即程序存储器和数据存储器是 ...
- 《C程序设计语言》练习 1-8,1-9
#include <stdio.h> /*编写一个统计空格,制表符与换行符个数的程序*/ main() { int a,b,c,d;//a表示空格个数,b表示制表符个数,c表示换行符个数 ...
- Swiper中文网
http://3.swiper.com.cn/api/Slides_grid/2014/1215/24.html slidesPerView :2, 即设置slider容器能够同时显示的slide ...
- python-django-redis拒绝连接问题解决_20191121
今天安装fastdfs的时候,发现最好固定虚拟机的ip, 固定了ip之后,发现使用Windows中的pycharm连接redis的时候,总是拒绝连接,找了很多的办法都不行,有点慌, 但是不能慌,现在要 ...
- 【待填坑】LG_2467_[SDOI2010]地精部落
不错的dp题...思维难度和码量成反比...
- 图解教你如何使用ANT打包java程序
1:在eclipse中建立如下的工程 值得注意的就是build.xml文件(这个是重点后面会提到) ,其他HelloWorld中的就是一句简单的输出语句 2: 使用build打包(右键然后选择运行), ...
- docker mysql5.7.16 中文乱码
有部分同学会遇到,在centos上Docker-MySQL没乱码,但是在fedora系统上的docker-mysql会有乱码问题,这兴许是docker-mysql的问题,这里的bug我们不去追究,这里 ...