首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现的多滑动门，多选项卡效果代码

Posted in Javascript onMarch 28, 2016

本文实例讲述了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>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超多滑动门效果</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}
body {
  font-size:12px;
}
ul, li {
  list-style-type:none;
}
#tab {
  width:500px;
  height:200px;
  margin:20px auto;
  overflow:hidden;
}
#tab .tab_title {
  width:500px;
  height:22px;
  overflow:hidden;
  left:0;
  top:0;
  clear:both;
  overflow:hidden;
  position:relative;
}
#tab .tab_title .u {
  width:465px;
  overflow:hidden;
  position:relative;
}
#tab .tab_title ul {
  margin:0 5px;
  position:absolute;
  float:left;
  width:2784px;/*这个即是滑动门的总长度！就是所有的li的宽度加上间距！计算本案例中的宽度即为：24*100+14*24+24*2（2为边框宽度）=2784 */
}
#tab .tab_title div {
  float:left;
  width:15px;
  height:20px;
  line-height:20px;
  cursor:pointer;
}
#tab .tab_title span.vright {
  top:0;
  right:5px;
  margin-left:2px;
}
#tab .tab_title span.vleft {
  top:0;
  left:0px;
  padding-left:5px;
}
#tab .tab_title li {
  float:left;
  width:100px;/*这个的宽度即是四个滑动门栏目的宽度*/
  height:20px;
  line-height:20px;
  text-align:center;
  background-color:#cccccc;
  margin-right:14px;
  border:1px #999999 solid;
  cursor:pointer;
}
#tab .tab_title li:hover {
  background-color:#999999
}
#tab .tab_title li.selected {
  background-color:#666666;
}
#tab .tab_content {
  width:476px;
  height:156px;
  overflow:hidden;
  padding:10px;
  border:1px #CCCCCC solid;
}
#tab .tab_content div {
  border:1px #999999 dotted;
}
#tab .tab_content div p {
  line-height:1.5;
  text-indent:25px;
  color:#333333;
}
#tab .tab_content .none {
  display:none;
}
#div1 {
  border:1px #CCCCCC solid;
  position:absolute;
  display:none;
  background:#EEF7EE;
  font-size:12px;
  padding:5px;
  color:#999999;
}
#div2 {
  width:120px;
  height:15px;
  border:1px #CCCCCC solid;
  position:absolute;
  display:none;
  background:#CCCCCC;
  font-size:5px;
  padding:2px;
  color:#999999;
}
</style>
<script language="javascript">
 $(function(){
 var index = 0;
 $(".tab_title ul li").click(function(){
  index = $(".tab_title ul li").index(this);
  $(this).addClass("selected").siblings().removeClass("selected");
  $(".tab_content div").eq(index).show().siblings().hide();
 });
 var i = 4; //这个前端展示几个滑动门栏目
 var len = $(".u .scrol li").length;
 var page = 1;
 var maxpage = Math.ceil(len/i);
 var scrollWidth = $(".u").width();
 var divbox = "<div id='div1' >呵呵，没有了</div>";
 $("body").append(divbox);
 $(".vright").click(function(e){
  if(!$(".u .scrol").is(":animated")){
  if(page == maxpage ){
  $(".u .scrol").stop();
  $("#div1").css({
   "top": (e.pageY + 20) +"px",
   "left": (e.pageX + 20) +"px",
   "opacity": "0.9"
  }).stop(true,false).fadeIn(800).fadeOut(800);
  }else{
  $(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);
  page++;
  }
  }
 });
 $(".vleft").click(function(){
 if(!$(".u .scrol").is(":animated")){
  if(page == 1){
  $(".u .scrol").stop();
  }else{
  $(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);
  page--;
  }
  }
 });
 });
</script>
</head>
<body>
<div id="tab">
 <div class="tab_title">
  <div class="vleft"><strong><<</strong></div>
  <div class="u">
   <ul class="scrol">
    <li class="selected">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>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
   </ul>
  </div>
  <div class="vright"><strong>>></strong></div>
 </div>
 <div class="tab_content">
  <div>
   <p>1的内容</p>
  </div>
  <div class="none">
   <p>2的内容</p>
  </div>
  <div class="none">
   <p>3的内容</p>
  </div>
  <div class="none">
   <p>4的内容</p>
  </div>
  <div class="none">
   <p>5的内容</p>
  </div>
  <div class="none">
   <p>6的内容</p>
  </div>
  <div class="none">
   <p>7的内容</p>
  </div>
  <div class="none">
   <p>8的内容</p>
  </div>
  <div class="none">
   <p>9的内容</p>
  </div>
  <div class="none">
   <p>10的内容</p>
  </div>
  <div class="none">
   <p>10的内容</p>
  </div>
  <div class="none">
   <p>12的内容</p>
  </div>
  <div class="none">
   <p>13的内容</p>
  </div>
  <div class="none">
   <p>14的内容</p>
  </div>
  <div class="none">
   <p>15的内容</p>
  </div>
  <div class="none">
   <p>16的内容</p>
  </div>
  <div class="none">
   <p>17的内容</p>
  </div>
  <div class="none">
   <p>18的内容</p>
  </div>
  <div class="none">
   <p>19的内容</p>
  </div>
  <div class="none">
   <p>20的内容</p>
  </div>
  <div class="none">
   <p>21的内容</p>
  </div>
  <div class="none">
   <p>22的内容</p>
  </div>
  <div class="none">
   <p>23的内容</p>
  </div>
  <div class="none">
   <p>24的内容</p>
  </div>
 </div>
</div>
</body>
</html>

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

jQuery实现的多滑动门，多选项卡效果代码

- Author -

沧海小强

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript禁用Tab键脚本实例
Nov 22 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 #Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 #Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 #Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 #Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 #Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 #Javascript
详解javascript跨浏览器事件处理程序
Mar 27 #Javascript
create(1) nginx(76) Mybatis-Plus(3) 组策略(1)  AD域(1) TableField(1) 日志格式分析(1) 子查询(1) Windows server 2012(17) mounted(1)
You might like
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php笔记之常用文件操作
2010/10/12 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较？
2011/10/17 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题
2007/01/09 Javascript
js下弹出窗口的变通
2007/04/18 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
jQuery使用方法
2017/02/04 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python实现BackPropagation算法
2017/12/14 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Pandas透视表（pivot_table）详解
2019/07/22 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
python开发入门——set的使用
2020/09/03 Python
三分钟演讲稿范文
2014/04/24 职场文书
拉歌口号大全
2014/06/13 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书