jQuery简单实现上下,左右滑动的方法


Posted in Javascript onJune 01, 2016

本文实例讲述了jQuery简单实现上下,左右滑动的方法。分享给大家供大家参考,具体如下:

渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白

我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.

闲话不多说,上码

//isw2 zhouxianglh 2010.07.07
//移动ul
var slideOperate = {
  slideUlId : "",//UL id 用于操作Ul
  fadeInTime : 2000,//淡出淡入时间
  slideDownTime : 2000,//滑动时间
  nextLeft:function(){//往右滑动
    var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
    $(lastLi).find("div").animate({opacity:0});//隐藏最后一个li的内容
    $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隐藏最后一个li
      $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
    });
    $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//显示宽度
      lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//显示
    }});
  },
  nextDown:function(){//往下滑动(前提Ul竖排)
    var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
    $(lastLi).find("div").fadeOut();//隐藏最后一个li的内容
    $(lastLi).hide();//隐藏最后一个li
    $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
    $(lastLi).slideDown(slideOperate.slideDownTime,function(){
      lastLi.find("div").fadeIn(slideOperate.fadeInTime);
    });
  }
};

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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>列</title>
    <link href="css/slideRow.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>
    <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(
      function(){
        slideOperate.slideUlId = "ulRowCount";
        setInterval("slideOperate.nextLeft()",5000);//定时
      }
    );
    </script>
  </head>
  <body>
    <ul id="ulRowCount">
      <li class="liRow">
        <div class="rowDiv">
          你好1
          <br />
          你好1
          <br />
          你好1
          <br />
          你好1
          <br />
        </div>
      </li>
      <li class="liRow">
        <div class="rowDiv">
          你好2
        </div>
      </li>
      <li class="liRow">
        <div class="rowDiv">
          你好5asdfasdf
          <br />
          你好5
          <br />
          你好5
          <br />
          你好5
          <br />
          <br />
          你好5
          <br />
          <br />
          你好5dsfasdfasdfas
          <br />
        </div>
      </li>
    </ul>
  </body>
</html>

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

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

Javascript 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
javascript自定义的addClass()方法
May 28 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 #Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 #Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 #Javascript
深入理解ECMAScript的几个关键语句
Jun 01 #Javascript
星期几的不同脚本写法(推荐)
Jun 01 #Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 #Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 #Javascript
You might like
一个PHP的String类代码
2010/04/20 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
微信小程序实现滑动操作代码
2020/04/23 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
用Python解数独的方法示例
2019/10/24 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
视图的作用
2014/12/19 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
小学生安全保证书
2014/02/01 职场文书
群众路线剖析材料
2014/02/02 职场文书
作文评语大全
2014/04/23 职场文书
护士感人事迹
2014/05/01 职场文书
娱乐节目策划方案
2014/06/10 职场文书
教师工作总结范文2014
2014/11/10 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
python程序的组织结构详解
2021/12/06 Python
MySQL常见优化方案汇总
2022/01/18 MySQL
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers