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程序设计有所帮助。

Javascript 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
js异步编程小技巧详解
Aug 14 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
教你一步步实现一个简易promise
Nov 02 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
You might like
PHP的伪随机数与真随机数详解
2015/05/27 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
详解K-means算法在Python中的实现
2017/12/05 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
TensorFlow的权值更新方法
2018/06/14 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
创建卫生先进单位实施方案
2014/03/10 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
警用民用对讲机找不同
2022/02/18 无线电