需要实现的效果

样式分析:

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实现滚动动画的更多相关文章

  1. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  2. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  3. JQuery学习笔记---jquery对象和DOM对象的关系

    1.DOM(Document  Object Model,文档对象模型).DOM树 { html (head&&body),  head(meta && title) ...

  4. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  5. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  6. jQuery学习之jQuery Ajax用法详解(转)

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  7. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  8. jquery 学习日记之选择器

    看完Jquery选择器的教程视频后,对jquery的选择器有一定的认识和了解,现整理一下知识: 一.jquery基本选择器,这类比较简单,一笔带过. #id 选择器,是选择  匹配id值中的第一个元素 ...

  9. 【转载】【JQuery学习】jQuery插件开发

    JQuery做得最好的就是他的闭包和扩展性.超级简单的扩展方法,让更多的人可以轻松的开发定制自己的jQuery插件.下面的东西是转载过来当做学习材料的.虽然貌似有点古老,但是jQuery的变更一直都不 ...

随机推荐

  1. plsql中文显示问号

    1. select userenv('language') from dual 2. 复制查询的值配置系统环境变量 NLS_LANG=AMERICAN_AMERICA.ZHS16GBK 3.配置系统环 ...

  2. TreeviewEditor.rar

    本工具可以打开.保存指定格式的XML文件. 树形控件的节点可以编辑.删除.增加.使用本工具看方便地创建书或论文的目录大纲,我用这个工具已经写了好几本书了. 动态图1: 动态图2:编辑效果,支持节点拖曳 ...

  3. form提供的两种数据传输方式 get和post method=”post“和method=”get”

    虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一些差异,但是了解二者的差异在以后的编程也会很有帮助的. ...

  4. ARM7探究

    1.流水线:三级流水线 预取.译码.执行.三级并行发生 2.什么是哈佛结构? 哈佛结构是一种存储器结构,是一种并行体系结构,它的主要特点是将程序和数据存储在不同的存储空间中,即程序存储器和数据存储器是 ...

  5. 《C程序设计语言》练习 1-8,1-9

    #include <stdio.h> /*编写一个统计空格,制表符与换行符个数的程序*/ main() { int a,b,c,d;//a表示空格个数,b表示制表符个数,c表示换行符个数 ...

  6. Swiper中文网

    http://3.swiper.com.cn/api/Slides_grid/2014/1215/24.html slidesPerView :2,   即设置slider容器能够同时显示的slide ...

  7. python-django-redis拒绝连接问题解决_20191121

    今天安装fastdfs的时候,发现最好固定虚拟机的ip, 固定了ip之后,发现使用Windows中的pycharm连接redis的时候,总是拒绝连接,找了很多的办法都不行,有点慌, 但是不能慌,现在要 ...

  8. 【待填坑】LG_2467_[SDOI2010]地精部落

    不错的dp题...思维难度和码量成反比...

  9. 图解教你如何使用ANT打包java程序

    1:在eclipse中建立如下的工程 值得注意的就是build.xml文件(这个是重点后面会提到) ,其他HelloWorld中的就是一句简单的输出语句 2: 使用build打包(右键然后选择运行), ...

  10. docker mysql5.7.16 中文乱码

    有部分同学会遇到,在centos上Docker-MySQL没乱码,但是在fedora系统上的docker-mysql会有乱码问题,这兴许是docker-mysql的问题,这里的bug我们不去追究,这里 ...