1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery左右滑动效果的实现</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function () {
  9. $("#bta").click(function () {
  10. $("#unit").css("left", "300px");
  11. document.getElementById("unit").style.left = "300px";
  12. // var container = document.getElementById("unit");
  13. // try {
  14. // container.insertBefore(container.lastChild, container.firstChild)
  15. // }
  16. // catch (e) { alert(e); }
  17. $("#unit").prepend($("#unit>div:last"));
  18. $("#unit").animate({ "left": 0 }, 500);
  19. //$("#unit").stop(true, false).animate({ "left": 0 }, 500);
  20.  
  21. });
  22. $("#btb").click(function () {
  23. $("#unit").animate({ "left": -300 }, 500);
  24. //$("#unit").stop(true, false).animate({ "left": -300 }, 500);
  25.  
  26. function gundong() {
  27. $("#unit").css("left", "0px");
  28. //document.getElementById("unit").style.left = "0px";
  29. $("#unit").append($("#unit>div:first"));
  30. // var container = document.getElementById("unit");
  31. // try {
  32. // container.appendChild(container.firstChild);
  33. // }
  34. // catch (e) { alert(e); }
  35. }//等待动画滚动后执行
  36. setTimeout(function () { gundong() }, 700);
  37. })
  38. });
  39.  
  40. </script>
  41. <style type="text/css">
  42. *
  43. {
  44. padding: 0;
  45. margin: 0;
  46. }
  47. #box
  48. {
  49. width: 300px;
  50. height: 150px;
  51. margin-bottom: 50px;
  52. position: relative;
  53. overflow: hidden;
  54. }
  55. #unit
  56. {
  57. width: 1200px;
  58. position: absolute;
  59. }
  60. #unit div
  61. {
  62. float: left;
  63. width: 300px;
  64. height: 150px;
  65. }
  66. #bga
  67. {
  68. background-color: #F30;
  69. }
  70. #bgb
  71. {
  72. background-color: #F90;
  73. }
  74. #bta, #btb
  75. {
  76. float: left;
  77. width: 50px;
  78. padding-right: 50px;
  79. color: #FFF;
  80. cursor: pointer;
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <div style="width: 800px; height: 300px; padding-top: 100px; background-color: #999;
  86. margin: 0 auto;">
  87. <div id="box">
  88. <div id="unit">
  89. <div id="bga">
  90. 框一</div>
  91. <div id="bgb">
  92. 框二</div>
  93. <div id="bgc">
  94. 框三</div>
  95. <div id="bgd">
  96. 框四</div>
  97. </div>
  98. </div>
  99. <div id="bta">
  100. </div>
  101. <div id="btb">
  102. </div>
  103. </div>
  104. </body>
  105. </html>

jquery左右滑动效果的实现的更多相关文章

  1. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  2. jquery 上下滑动效果

    <script type="text/javascript"> var myar = setInterval('AutoScroll(".li_gundong ...

  3. Jquery Mobile左右滑动效果

    首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...

  4. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  5. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  6. jquery 如何实现回顶部 带滑动效果

    $("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollT ...

  7. bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  8. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  9. 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

    今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...

随机推荐

  1. CSS--字体

    通用字体系列 CSS中定义了5种通用字体系列 举例说明:指定通用字体系列 body { font-family:sans-serif;/*如果你希望文档使用一种sans-serif字体而并不关心是哪一 ...

  2. 从.o文件中提取指定开头依赖于外部接口的脚本

    nm -g audio_la-audio.o | grep " U " | awk '{ print $2}' | grep "^gst_"

  3. 签名有元程序集 Signed Friend Assemblies

    下面的例子演示了创建签名程序集和有元程序集.这就要求两个程序集都是强命名,在下面的例子中,两个程序集都用了同一个秘钥,也可以用不同的秘钥. 1. 生成秘钥, 这个在前面的博客中有说明,生成秘钥文件sn ...

  4. nginx 学习笔记(9) 配置HTTPS服务器--转载

    HTTPS服务器优化SSL证书链合并HTTP/HTTPS主机基于名字的HTTPS主机带有多个主机名的SSL证书主机名指示兼容性 配置HTTPS主机,必须在server配置块中打开SSL协议,还需要指定 ...

  5. CentOS7安装Nginx并部署

    服务器IP是192.168.36.136 1.直接yum install nginx即可 2.主配置文件是/etc/nginx/下的nginx.conf,另外一个是/etc/nginx/conf.d/ ...

  6. 初识Hadoop一,配置及启动服务

    一.Hadoop简介: Hadoop是由Apache基金会所开发的分布式系统基础架构,实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS:Hadoo ...

  7. JavaWeb学习笔记——javabean

  8. 快速lable内边距

  9. Django笔记-helloworld

    网上的Django资料太乱了,我想写一下自己的学习过程(只记大体过程,有时间就完善).(用eclipse+PyDev工具开发的) 1.项目结构 2.关键代码:(注意缩进,可能贴上来缩进格式等有变化,我 ...

  10. ASP.NET WebAPI 08 Message,HttpConfiguration,DependencyResolver

    ASP.NET WebAPI 08 Message,HttpConfiguration,DependencyResolver   Message WebAPI作为通信架构必定包含包含请求与响应两个方法 ...