devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

jquery 分页 下拉框

作者：很楠不爱3 | 2024-02-16 22:12:07

赞

踩

jquery下拉框pre
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6.    
  7.  
  8. 		<style>
  9. 		 *{ margin: 0 ;padding: 0;}
  10. 			ul,li{ list-style: none;}
  11. 			#tables{  width: 100%; height: auto;; overflow: hidden; margin-bottom: 40px;;}
  12. 			#tables li{list-style: none; width: 100px; height: 150px; overflow: hidden; border: 2px solid red;  float: left; display: inline;}
  13. 		   #tables li img{ width: 100px; float: left;}
  14.  
  15.         .fenye {
  16.   height: 40px;
  17.   line-height: 40px;
  18.   position: relative; z-index: 88;;
  19.   
  20.   text-align: center;  
  21. }
  22. .fenye input {
  23.   
  24.  outline: 0;;
  25. }
  26. .fenye button {
  27.   padding: 0 10px;
  28.   margin: 0 10px;
  29.   height: 40px;
  30.   float: left; outline: 0;;
  31.   cursor: pointer;
  32.   border: 1px solid #ebebeb;
  33.   background-color: #ffffff;
  34. }
  35. .fenye .prePage,.fenye .turnPage,.fenye .last-page,.fenye .jump-button{ background:#157fcc ; color: #fff;}
  36.  
  37.  
  38. .fenye button:disabled{ 
  39. background-color: #eee; 
  40. }
  41.  
  42. .fenye .first-page,
  43. .fenye .last-page {
  44.   margin: 0;
  45. }
  46. .fenye .pageWrap {
  47.   height: 38px;
  48.   float: left;
  49.   overflow: hidden;border: 1px solid #ebebeb;
  50. }
  51. .fenye .pageWrap ul {
  52.   width: 100000px;
  53.   height: 40px;
  54.   float: left;list-style: none;  overflow: hidden;
  55. }
  56. .fenye .pageWrap ul li:first-of-type(1){
  57. 	 border-left: 1px solod #ebebeb;;
  58. }
  59. .fenye .pageWrap ul li:hover{
  60. 	 background-color: #eee;
  61. }
  62. .fenye .pageWrap ul li {list-style: none;
  63.   width: 60px;
  64.   height: 40px;
  65.   border-right: 1px solid #ebebeb;
  66.   line-height: 40px;
  67.   box-sizing: border-box;
  68.   cursor: pointer;
  69.   float: left;
  70. }
  71. .fenye .pageWrap ul .sel-page {
  72.   background-color: #157fcc; color: #fff;
  73. }
  74. .fenye .jump-text {
  75.   width: 60px;
  76.   height: 40px;
  77.   box-sizing: border-box;
  78.   text-align: center;
  79.   margin: 0 5px;
  80.   float: left;
  81. }
  82. .fenye .jump-button {
  83.   margin: 0;
  84.   float: left; position: relative; z-index: 89;;
  85. }
  86. .fenye .total-pages,
  87. .fenye .total-count {
  88.   margin-left: 10px;
  89.   float: left;
  90.   font-size: 14px;
  91. }
  92. .total-count{border: 1px solid #ebebeb;
  93.     background-color: #ffffff; padding: 0 10px;}
  94.  
  95.  
  96. 		</style>
  97. 		
  98. 	</head>
  99. 	<body>
  100. 		
  101. 		<div id="tables">
  102. 			<li>11 动态数据</li>
  103. 		</div>
  104. 		
  105. 		<div class=" fenye" id="fenbox"></div>
  106.    
  107. 		<div id="saa">重新初始化2</div>	
  108. 		<div style="padding: 10px;;">-----------------------------------</div>
  109. 		
  110. 		<div id="tables2">
  111. 			<li>22 动态数据</li>
  112. 		</div>
  113. 				<div class=" fenye" id="fenbox2"></div>
  114.  
  115. 		
  116. 		
  117. 	<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">	</script>
  118. 	<script >
  119. 		
  120. 		(function($, window, document) {
  121.     // 定义构造函数
  122.     function Paging(el, options) {
  123.         this.el = el;
  124.         var defaults = {
  125.             pageNo:  1, // 初始页码
  126.             totalPages:  1, //总页数
  127.             totalCount:  1, // 条目总数
  128.             slideSpeed: 0, // 缓动速度
  129.             jump:  false, // 支持跳转，
  130.             first:true,
  131.             callback:function() {} // 回调函数，
  132.         };
  133.         
  134.        this.options = $.extend({},defaults,options)
  135.         //console.log("最喜欢总",  this.options );
  136.         
  137.         this.init(this.el);
  138.     }
  139.     // 给实例对象添加公共属性和方法
  140.     Paging.prototype = {
  141.         constructor: Paging,
  142.         init: function(ele) {
  143.             this.createDom();
  144.             this.bindEvents(ele);
  145.         },
  146.         createDom: function() {
  147.             var that = this,
  148.                 ulDom = '',
  149.                 jumpDom = '',
  150.                 content = '',
  151.                 liWidth = 60, // li的宽度
  152.                 totalPages = that.options.totalPages||1, // 总页数
  153.                 wrapLength = 0;
  154.                 if(typeof totalPages!='number'||typeof totalPages<=0){
  155.                  	totalPages=1;
  156.                 }
  157.                
  158.                
  159.                 
  160.             totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth;
  161.             if(totalPages<=1){
  162.                	ulDom += '<li class="sel-page">' + 1 + '</li>';
  163.             }else{
  164.             for (var i = 1; i <= that.options.totalPages; i++) {
  165.             	  
  166.                 i != 1 ? ulDom += '<li>' + i + '</li>' : ulDom += '<li class="sel-page">' + i + '</li>';
  167.             }
  168.             }
  169.             that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text jumpText" ><button type="button" class="jump-button  jumpBtn">跳转</button>' : jumpDom = '';
  170.             content = '<button type="button"  class="turnPage firstPage first-page">首页</button>' +
  171.                 '<button class="turnPage prePage" >上一页</button>' +
  172.                 '<div class="pageWrap" style="width:' + wrapLength + 'px">' +
  173.                 '<ul class="pageSelect"   style="transition:all ' + that.options.slideSpeed + 'ms">' +
  174.                 ulDom +
  175.                 '</ul></div>' +
  176.                 '<button class="turnPage nextPage" >下一页</button>' +
  177.                 '<button type="button"  class="last-page lastPage">尾页</button>' +
  178.                 jumpDom +
  179.                 '<p class="total-pages">共 ' +
  180.                 that.options.totalPages +
  181.                 ' 页</p>' +
  182.                 '<p class="total-count">' +
  183.                 that.options.totalCount +
  184.                 '</p>';
  185.             that.el.html(content);
  186.         },
  187.         bindEvents: function(ele) {
  188.         	 
  189.         	
  190.         	   var ele=ele;
  191.             var that = this,
  192.                 pageSelect =ele.find('.pageSelect'), // ul
  193.                 lis = pageSelect.children(), // li的集合
  194.                 liWidth = lis[0]?(lis[0].offsetWidth):0, // li的宽度
  195.                 totalPages = that.options.totalPages, // 总页数
  196.                 pageIndex = that.options.pageNo, // 当前选择的页码
  197.                 distance = 0, // ul移动距离
  198.                 prePage = ele.find('.prePage'),
  199.                 nextPage = ele.find('.nextPage'),
  200.                 firstPage = ele.find('.firstPage'),
  201.                 lastPage = ele.find('.lastPage'),
  202.                 jumpBtn = ele.find('.jumpBtn'),
  203.                 jumpText =ele.find('.jumpText');
  204.     // console.log(firstPage);
  205.             prePage.on('click', function() {
  206.                 pageIndex--;
  207.                 	that.options.first=true;
  208.                 if (pageIndex < 1) pageIndex = 1;
  209.                 handles(pageIndex);
  210.             })
  211.  
  212.             nextPage.on('click', function() {
  213.                 pageIndex++;
  214.                 	that.options.first=true;
  215.                 if (pageIndex > lis.length) pageIndex = lis.length;
  216.                 handles(pageIndex);
  217.             })
  218.  
  219.             firstPage.on('click', function() {
  220.                 pageIndex = 1;
  221.                 	that.options.first=true;
  222.                 handles(pageIndex);
  223.             })
  224.  
  225.             lastPage.on('click', function() {
  226.                 pageIndex = totalPages;
  227.                 	that.options.first=true;
  228.                 handles(pageIndex);
  229.             })
  230.            
  231.           $(document).on("click", jumpBtn, function() {
  232.            // jumpBtn.on('click', function() {
  233.            
  234.                 var jumpNum = parseInt(jumpText.val().replace(/\D/g, ''));
  235.                 if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) {
  236.                     pageIndex = jumpNum;
  237.                     	that.options.first=true;
  238.                     handles(pageIndex);
  239.                     jumpText.val(jumpNum);
  240.                 }
  241.             })
  242.        //$(document).on("click", lis, function() {
  243.             lis.on('click', function() {
  244.               	that.options.first=true;
  245.                 pageIndex = $(this).index() + 1;
  246.                  handles(pageIndex);
  247.             })
  248.  
  249.             function handles(pageIndex) {
  250.           //debugger;
  251.                 lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page');
  252.                 
  253.                
  254.                 if(totalPages<=1){
  255.               
  256.                 firstPage.attr('disabled', true);
  257.                 prePage.attr('disabled', true);
  258.                 nextPage.attr('disabled', true);
  259.                 lastPage.attr('disabled', true) ;
  260.                 jumpBtn.attr('disabled', true) ;
  261.                 jumpText.attr('disabled', true) ;
  262.                     if(that.options.first){
  263.                 that.options.callback(pageIndex);
  264.                 }
  265.                     return false;
  266.                 }
  267.                 
  268.                 
  269.                 if (totalPages <= 5) {
  270.                     if(that.options.first){
  271.                 that.options.callback(pageIndex);
  272.                 }
  273.                    // console.log("222totalPages",totalPages)
  274.                     return false;
  275.                 }
  276.                 if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
  277.                 if (pageIndex == 2 || pageIndex == 1) distance = 0;
  278.                 if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
  279.                 pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
  280.                 pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
  281.                 pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false);
  282.                 pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false);
  283.                 pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false);
  284.                   
  285.                  if(that.options.first){
  286.                 that.options.callback(pageIndex);
  287.                 }
  288.             }
  289.            //if(that.options.first){
  290.             handles(that.options.pageNo); // 初始化页码位置
  291.             //}
  292.             
  293.         }
  294.     }
  295.     $.fn.paging = function(options) {
  296.     //	console.log($(this));
  297.         return new Paging($(this), options);
  298.     }
  299. })(jQuery, window, document);
  300. 		
  301. 	</script>
  302.      <script>
  303.      	
  304.      	//http://layer.layui.com/
  305. 		$(document).ready(function(){
  306.            var tables=$("#tables");
  307.            var page=1;
  308.            //ajaxDATA(1)
  309.              function ajaxDATA(page){
  310.              var urls="http://mktm.biqiang8.com/home/goods?firstCid=0&secCid=0&pageNo="+page+"&pageSize=5&exsitIdList="
  311.  
  312.               $.ajax({
  313.                type: "GET",
  314.                url: urls,
  315.                 dataType: "json",
  316.                
  317.              success: function(data){
  318.                        if(data.code==0){
  319.                        	var htmlStr="";
  320.                        	//console.log(data.goods_list);
  321.                        	for(var i=0;i<data.data.goods_list.length;i++){
  322.                        		htmlStr+='<li>'+i+data.data.goods_list[i].title+'<img src="'+data.data.goods_list[i].img_url+'"</li>'
  323.                        	}
  324.                       $("#tables").html(htmlStr);
  325.                        }
  326.                        
  327.                   }
  328.             });
  329.              }
  330.          
  331.          
  332.           var setTotalCount = 301;
  333.          var fenyeObj={
  334.             initPageNo: 1, // 初始页码
  335.             totalPages: 1, //总页数
  336.             totalCount: '合计' + 0 + '条数据', // 条目总数
  337.             slideSpeed: 600, // 缓动速度。单位毫秒
  338.             jump: true, //是否支持跳转
  339.              first:false,  //初始化 是否立即执行回掉
  340.             callback: function(page) { // 回调函数
  341.                 console.log("立11即查询",page);
  342.                   ajaxDATA(page)
  343.             }
  344.         }
  345.            
  346.        
  347.         $('#fenbox').paging(fenyeObj)
  348.         
  349.         $("#saa").on("click",function(){
  350.                	setTotalCount = 71;
  351.         	      fenyeObj.totalCount = '合计' + setTotalCount + '条数据', // 条目总数;
  352.         	      fenyeObj.totalPages=24;
  353.         	      fenyeObj.first=false;
  354.         	      //console.log("立重置即查询",fenyeObj);
  355.         	     $('#fenbox').paging(fenyeObj)
  356.         })
  357.         
  358.         
  359.         
  360.         
  361.         
  362.           var setTotalCount2 = 31;
  363.          var fenyeObj2={
  364.             initPageNo: 1, // 初始页码
  365.             totalPages: 20, //总页数
  366.             totalCount: '合计' + setTotalCount2 + '条数据', // 条目总数
  367.             slideSpeed: 600, // 缓动速度。单位毫秒
  368.             jump: true, //是否支持跳转
  369.             // first:false,
  370.             callback: function(page) { // 回调函数
  371.                 console.log("立即22查询",page);
  372.                   ajaxDATA(page)
  373.             }
  374.         }
  375.            
  376.        
  377.         $('#fenbox2').paging(fenyeObj2)
  378.         
  379.              
  380.  });
  381. 	</script>
  382. 	</body>
  383. </html>

　

 

下拉框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>信息查询</title>
        <meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />

    </head>
    <body>
        
        
        
<style>
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,span,img,button ,em,i,b{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-width:320px;font-size:62.5%;}
body{font-family:"微软雅黑",'Helvetica Neue',Helvetica,tahoma,arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1;font-size:14px;-webkit-touch-callout:none;}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
dl,li,menu,ol,ul{list-style:none}
address,em,i,th{font-weight:400;font-style:normal}
a{color:#999;display:block;}
a:link,a:visited{color:#999;text-decoration:none;cursor:pointer}
a:hover{cursor:pointer}
a:active,a:focus{outline:0;}
img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;}
input,select{outline:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal;font-weight:normal;}
button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none}
::-webkit-input-placeholder{color:#777;}
::input-placeholder{color:#777;}
input:focus::-webkit-input-placeholder{-webkit-transition:.2s;opacity:0;}
input:focus::input-placeholder{transition:.2s;opacity:0;}
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}
.fl{float:left}
.fr{float:right}
.fl,.fr{display:inline}
.disabled{pointer-events:none;}
.hover{ }
.hover:hover{ cursor: pointer;}        
    
/*    业务css*/
.my_form{ background: #fafafa;
    border: 1px solid #e0e0e0;
    margin-top: 20px; padding: 21px; m }

.my_form .my_form_content{ width: 100%; }
.form_content_submit{ margin: 20px auto; display: block; font-size: 16px; text-align: center;  width: 120px;; height: 44px; line-height: 44px;background: #157fcc; color: #fff; border: 0;;}




.my_form_table{ border: 1px solid #e0e0e0; }
    .flexbox{display:-webkit-box;
display:-moz-box;
display:box;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flexbox;
display:flex;
display:table\9;
}
.flexbox .flex1{
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
display:table-cell\9;
}


.selected_icon{ position: relative; width: 100%; height: 100%;}
.selected_icon .check{ position:absolute;background: #157fcc;}
.selected_icon .check.plus{ left: 50%; top: 50%; margin-left: -8px; width: 16px; height: 1px; }
.selected_icon .check.reduce{left: 50%;top: 50%;; margin-top: -8px;; position:absolute;width: 1px; height: 16px; }
.showone.on .check{background: red !important;}
.showone.on .check.reduce{  -webkit-transform:translateY(50%);-moz-transform:translateY(50%);transform:translateY(50%); opacity: 0; -webkit-transition: .3s;-moz-transition: .3s;transition: .3s;;}
.showone{ position: relative;;border-bottom: 1px solid #e0e0e0 ;}
.hideone{ background: #fff; margin:20px 44px;;border: 1px solid #ccc ;}
.hideoneinner { position: relative;; height:44px; line-height: 44px; text-align: center; border-bottom: 1px solid #e0e0e0;}
.hideoneinner div { height:44px; line-height: 44px;border-right: 1px solid #e0e0e0; }
.showone.on:after{position: absolute;
    content: "";
    height: 1px; width: 22px;
    background:#e0e0e0;
    left: 22px; top: 65px;
    z-index: 26;}
 .showone.on:before{ position: absolute;
    content: "";
    height: 22px; width:1px;
    background:#e0e0e0;
    left: 22px; top: 44px;
    z-index: 26;}

.hideoneinner div:last-child{ border-right:0; }
.hideoneinner div:first-child{  font-weight: bold; }
.hideoneinner:last-of-type{  border-bottom: 0;}  
.my_form_table .showone:hover{ background:#f5f5f5 ;}


.filter-disabled {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.filter-box {
    position: relative; z-index: 92;;
}

.filter-box select {
    display: none;
}

.filter-text {
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    padding: 0 30px 0 10px;
    background: #fff;
    border: 1px solid #e6e6e6;
}

.filter-text input {
    font-size: 14px;
}

.filter-text .filter-title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    border: 0;
    background-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    cursor: pointer;
}

.filter-list {
    display: none;
    width: 100%; z-index: 99;
    max-height: 300px;
    background-color: #fff;
    font-size: 14px;
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 99;
    border: 1px solid #e6e6e6;
    overflow: auto;
}

.filter-list li.filter-null a {
    color: #d2d2d2;
}

.filter-list li a {
    display: block;
    padding: 0 10px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.filter-list li:hover {
    background-color: #f2f2f2;
}

.filter-list li.filter-selected {
    background-color: #5FB878;
}

.filter-list li.filter-selected a{
    display: block;
    color: #fff;
}

.filter-list li.filter-disabled {
    background-color: #fff;
}

.filter-list li.filter-disabled a{
    display: block;
    color: #d2d2d2;
}

.filter-list li.filter-disabled:hover a {
    cursor: not-allowed!important;
    background-color: #fff;
}

.icon {
    position: absolute;
}

.icon-filter-arrow {
     width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width:8px;
    border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color:#999 transparent transparent transparent;
    right: 10px;
    top: 13px;
    transition: all .2s;
}

.icon-filter-arrow.filter-show {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.filter-list::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.filter-list::-webkit-scrollbar-track {
    background: #fff 
}

.filter-list::-webkit-scrollbar-thumb {
    background: #CBCBCB;
}



#j_searchtask{  background: #666; padding: 10px 20px;}
</style>

        
            <div>  
    
                      <!-- 这里开始 -->
            
            <div class="filter-box filter-box1 fl">
                <div class="filter-text">
                    <input class="filter-title" id="j_qudao"  data-val="" type="text" readonly placeholder="请选择渠道" />
                    <i class="icon icon-filter-arrow"></i>
                </div>
                <select name="filter">
                    <option value="new"  disabled>请选择渠道</option>
                    <option value="11渠道1" >渠道1</option>
                    
                    <option value="22渠道2">渠道2</option>
                    <option value="33渠道3">渠道3</option>
                    
                </select>
            </div>
            
            <!-- 这里结束 -->
                      <!-- 这里开始 -->
            
            <div class="filter-box  filter-box2 fl">
                <div class="filter-text">
                    <input class="filter-title" id="j_qudao2"  data-val="" type="text" readonly placeholder="请选择支付" />
                    <i class="icon icon-filter-arrow"></i>
                </div>
                <select name="filter">
                    <option value="new"  disabled>请选类型</option>
                    <option value="淘宝1" >淘宝</option>
                    
                    <option value="支付宝2">支付宝</option>
                    
                </select>
            </div>
            
            <!-- 这里结束 -->
                      
                      
                      
                   <div class="right fr" class="flex1" id="j_searchtask">查询结果</div>     
                   

        </div>  

    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">    </script>
    
    <script type="text/javascript" >
        
        ;jQuery.fn.selectFilter = function(options) {
    var defaults = {
        callBack: function(res) {}
    };
    var ops = $.extend({}, defaults, options);
    var selectList = $(this).find('select option');
    var that = this;
    var html = '';
    html += '<ul class="filter-list">';
    $(selectList).each(function(idx, item) {
        var val = $(item).val();
        var valText = $(item).html();
        var selected = $(item).attr('selected');
        var disabled = $(item).attr('disabled');
        var isSelected = selected ? 'filter-selected' : '';
        var isDisabled = disabled ? 'filter-disabled' : '';
        if (selected) {
            html += '<li class="' + isSelected + '" data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
            $(that).find('.filter-title').val(valText);
        } else if (disabled) {
            html += '<li class="' + isDisabled + '" data-value="' + val + '"><a>' + valText + '</a></li>';
        } else {
            html += '<li data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
        }
        ;
    });
    html += '</ul>';
    $(that).append(html);
    $(that).find('select').hide();
    $(that).on('click', '.filter-text', function() {
        $(that).find('.filter-list').slideToggle(100);
        $(that).find('.filter-list').toggleClass('filter-open');
        $(that).find('.icon-filter-arrow').toggleClass('filter-show');
    });
    $(that).find('.filter-list li').not('.filter-disabled').on('click', function() {
        var val = $(this).data('value');
        var valText = $(this).find('a').html();
        $(that).find('.filter-title').val(valText);
        $(that).find('.icon-filter-arrow').toggleClass('filter-show');
        $(this).addClass('filter-selected').siblings().removeClass('filter-selected');
        $(this).parent().slideToggle(50);
        for (var i = 0; i < selectList.length; i++) {
            var selectVal = selectList.eq(i).val();
            if (val == selectVal) {
                $(that).find('select').val(val);
            }
            ;
        }
        ;ops.callBack(val);
    });
    $(document).on('mousedown', function(e) {
        closeSelect(that, e);
    });
    $(document).on('touchstart', function(e) {
        closeSelect(that, e);
    });
    function closeSelect(that, e) {
        var filter = $(that).find('.filter-list')
          , filterEl = $(that).find('.filter-list')[0];
        var filterBoxEl = $(that)[0];
        var target = e.target;
        if (filterEl !== target && !$.contains(filterEl, target) && !$.contains(filterBoxEl, target)) {
            filter.slideUp(50);
            $(that).find('.filter-list').removeClass('filter-open');
            $(that).find('.icon-filter-arrow').removeClass('filter-show');
        }
        ;
    }
}
;

        
    </script>
        <script type="text/javascript">
            //本小插件支持移动端哦
            
            
        </script>

     <script>
        $(document).ready(function(){
                  
               //下拉组件
            $('.filter-box1').selectFilter({
                callBack : function (val){
                    //返回选择的值
                    //document.getElementById("j_qudao").setAttribute("data-val",val)
                    console.log(val+'-是返回的值')
                }
            });
                   //下拉组件
            $('.filter-box2').selectFilter({
                callBack : function (val){
                    //返回选择的值
                    //document.getElementById("j_qudao").setAttribute("data-val",val)
                    console.log(val+'-是返回的值')
                }
            });  
                  
                  
                      
                      //查询点击
                      $("#j_searchtask").on("click",function(){
                          var qudao_val=$("#j_qudao").attr("data-val");//渠道
                            var qudao_val2=$("#j_qudao2").attr("data-val");//渠道
                                 alert("值-----："+qudao_val);
                                      alert("值-----："+qudao_val2);
                            
                          });
                             
                           
                          
                   
 });
    </script>
  
    </body>
</html>

 

水波纹

!function(t, e) {
    "use strict";
    if (void 0 === n || !n)
        var n = function(t) {
            var e = {
                opacity: .5,
                speed: .6,
                bgColor: "#ffffff",
                cursor: !0
            };
            this.option = this.extend(t, e),
            this.isltIE9() || this.init()
        };
    n.prototype = {
        createEle: function(t) {
            return e.createElement(t)
        },
        extend: function(t, e) {
            var n = JSON.parse(JSON.stringify(e));
            for (var i in t)
                n[i] = t[i];
            return n
        },
        isltIE9: function() {
            return !!/MSIE6.0|MSIE7.0|MSIE8.0|MSIE9.0/i.test(navigator.userAgent.split(";")[1].replace(/[ ]/g, ""))
        },
        getPosition: function(t) {
            var e = this.getBoundingClientRect()
              , n = Math.max(e.width, e.height);
            return {
                range: n,
                x: t.clientX - e.left - n / 2,
                y: t.clientY - e.top - n / 2
            }
        },
        loadCss: function() {
            var t = e.scripts
              , n = t[t.length - 1].src
              , i = n.substring(0, n.lastIndexOf("/") + 1);
            e.head.appendChild(function() {
                var t = e.createElement("link");
                return t.href = i + "need/ripple.css",
                t.type = "text/css",
                t.rel = "styleSheet",
                t.id = "ripplecss",
                t
            }())
        },
        addEvent: function() {
            for (var t = this, n = 0; n < this.elements.length; n++)
                "boolean" == typeof t.option.cursor && t.option.cursor && (this.elements[n].style.cursor = "pointer"),
                this.elements[n].addEventListener("mousedown", function(n) {
                    n.stopPropagation();
                    var i = t.getPosition.call(this, n)
                      , o = e.createElement("span");
                    o.className = "ripple",
                    o.style.top = i.y + "px",
                    o.style.left = i.x + "px",
                    o.style.width = i.range + "px",
                    o.style.height = i.range + "px",
                    o.style.animationDuration = t.option.speed + "s",
                    o.style.background = t.option.bgColor,
                    o.style.opacity = t.option.opacity,
                    o.addEventListener("animationend", function() {
                        this.parentNode.removeChild(this)
                    }, !1),
                    this.appendChild(o)
                }, !1)
        }
    },
    n.prototype.init = function() {
        this.loadCss();
        var n = this;
        t.onload = function() {
            n.elements = e.querySelectorAll('[data-ripple="ripple"]'),
            n.addEvent()
        }
    }
    ,
    t.Ripple = n
}(window, document);

css

[data-ripple=ripple] {
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-webkit-user-select: none;
    -ms-user-select: none
}

[data-ripple=ripple] .ripple {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 888;
    background: rgba(255,255,255,.5);
    transform: scale(0);
    animation: ripple .6s 0s linear
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5)
    }
}

效果

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    div,a,button,h1{
        background: blue;
        height: 50px;
        line-height: 50px;
        color: #fff;
        text-align: center;
        width: 200px;
        margin: 5px;
        border-radius: 5px;
        font-size:14px ;
        font-family: "微软雅黑","Arial Narrow"
    }
    a{
        display: block;
    }
</style>
</head>
<body>
<div data-ripple="ripple">
div标签
</div>
<a data-ripple="ripple">
a标签
</a>
<button data-ripple="ripple">
button标签
</button>
<h1 data-ripple="ripple">
h1标签
</h1>
</body>
</html>
<script src="ripple.min.js" charset="UTF-8"></script>
<script type="text/javascript">
    new Ripple({
        opacity : 0.6,  //水波纹透明度
        speed : 1,      //水波纹扩散速度
        bgColor : "#fff", //水波纹颜色
        cursor : true  //是否显示手型指针
    })
</script>

 

摇一摇 函数

/*
 * Author: Alex Gibson
 * https://github.com/alexgibson/shake.js
 * License: MIT license
 */

(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return factory(global, global.document);
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(global, global.document);
    } else {
        global.Shake = factory(global, global.document);
    }
} (typeof window !== 'undefined' ? window : this, function (window, document) {

    'use strict';

    function Shake(options) {
        //feature detect
        this.hasDeviceMotion = 'ondevicemotion' in window;

        this.options = {
            threshold: 15, //default velocity threshold for shake to register
            timeout: 1000 //default interval between events
        };

        if (typeof options === 'object') {
            for (var i in options) {
                if (options.hasOwnProperty(i)) {
                    this.options[i] = options[i];
                }
            }
        }

        //use date to prevent multiple shakes firing
        this.lastTime = new Date();

        //accelerometer values
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;

        //create custom event
        if (typeof document.CustomEvent === 'function') {
            this.event = new document.CustomEvent('shake', {
                bubbles: true,
                cancelable: true
            });
        } else if (typeof document.createEvent === 'function') {
            this.event = document.createEvent('Event');
            this.event.initEvent('shake', true, true);
        } else {
            return false;
        }
    }

    //reset timer values
    Shake.prototype.reset = function () {
        this.lastTime = new Date();
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
    };

    //start listening for devicemotion
    Shake.prototype.start = function () {
        this.reset();
        if (this.hasDeviceMotion) {
            window.addEventListener('devicemotion', this, false);
        }
    };

    //stop listening for devicemotion
    Shake.prototype.stop = function () {
        if (this.hasDeviceMotion) {
            window.removeEventListener('devicemotion', this, false);
        }
        this.reset();
    };

    //calculates if shake did occur
    Shake.prototype.devicemotion = function (e) {
        var current = e.accelerationIncludingGravity;
        var currentTime;
        var timeDifference;
        var deltaX = 0;
        var deltaY = 0;
        var deltaZ = 0;

        if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
            this.lastX = current.x;
            this.lastY = current.y;
            this.lastZ = current.z;
            return;
        }

        deltaX = Math.abs(this.lastX - current.x);
        deltaY = Math.abs(this.lastY - current.y);
        deltaZ = Math.abs(this.lastZ - current.z);

        if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {
            //calculate time in milliseconds since last shake registered
            currentTime = new Date();
            timeDifference = currentTime.getTime() - this.lastTime.getTime();

            if (timeDifference > this.options.timeout) {
                window.dispatchEvent(this.event);
                this.lastTime = new Date();
            }
        }

        this.lastX = current.x;
        this.lastY = current.y;
        this.lastZ = current.z;

    };

    //event handler
    Shake.prototype.handleEvent = function (e) {
        if (typeof (this[e.type]) === 'function') {
            return this[e.type](e);
        }
    };

    return Shake;
}));

 

 

其他

 360  科学技术

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>主页</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="css/tabris.css">
<link rel="stylesheet" href="css/lib.css">
</head>
<body>
<div class="bg0 pa">
<div class="bg1"></div>
</div>
<div class="hx-box pa">
<ul class="pr">
<li class="hx-k1 pa0">
<span></span>
</li>
<li class="hx-k2 pa0">
<span></span>
</li>
<li class="hx-k3 pa0">
<span></span>
</li>
</ul>
</div>
</body>
</html>
@charset 'utf-8';article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary {
    display: block
}

hr,img {
    border: 0
}

pre,textarea {
    overflow: auto
}

hr,legend,td,th {
    padding: 0
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    color: #333;
    font-size: 1em;
    line-height: 1.42857143;
    font-family: Helvetica,hiragino sans gb,microsoft yahei,微软雅黑,Arial,sans-serif
}

body,form,h1,h2,h3,h4,h5,h6,ol,p,ul {
    margin: 0
}

ol,ul {
    padding-left: 0;
    list-style-type: none
}

h1,h2,h3,h4,h5,h6 {
    font-size: 1em;
    font-weight: 400
}

a {
    text-decoration: none;
    background-color: transparent;
    color: inherit
}

a:active,a:hover {
    outline: 0
}

li {
    list-style: none
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline
}

.vm,audio,canvas,iframe,img,svg,video {
    vertical-align: middle
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],template {
    display: none
}

abbr[title] {
    border-bottom: 1px dotted
}

b,optgroup,strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    height: 1px;
    border-top: 1px solid #ccc;
    margin: 1em 0
}

code,kbd,pre,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0
}

textarea {
    resize: vertical
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none
}

::selection {
    background: #b3d4fc;
    text-shadow: none
}

.browserupgrade {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0
}

.dv {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.dv.dvv:active,.dv.dvv:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.dn {
    display: none
}

.db {
    display: block
}

.fix:after,.fix:before {
    content: " ";
    display: table
}

.fix:after {
    clear: both
}

.fl {
    float: left
}

.fr {
    float: right
}

.pr {
    position: relative
}

.pa,.pa0 {
    position: absolute
}

.pa0 {
    left: 0;
    top: 0
}

.oh {
    overflow: hidden
}

.wh {
    width: 100%;
    height: 100%
}

.bo {
    border: 1px solid red
}

.mg {
    margin-left: auto;
    margin-right: auto
}

.tc {
    text-align: center
}

.wp {
    margin: 0 auto
}

*,:after,:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

@charset 'utf-8';html {
    width: 100%;
    height: 100%
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: -webkit-linear-gradient(90deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
    background-image: -moz-linear-gradient(90deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
    background-image: -ms-linear-gradient(90deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
    background-image: linear-gradient(0deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
    perspective: 1e3px
}

.bg0 {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../images/bg0.png) no-repeat center center;
    background-size: 150%
}

.bg1 {
    width: 100%;
    height: 100%;
    background: url(../images/bg1.png) no-repeat center center
}

.hx-box {
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    transform: translate(-50%,-50%) rotateY(75deg)
}

.hx-box ul {
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    animation: hxz 20s linear infinite
}

@keyframes hxz {
    0% {
        transform: rotateX(0deg)
    }

    100% {
        transform: rotateX(-360deg)
    }
}

.hx-box ul li {
    width: 500px;
    height: 500px;
    border: 4px solid #5ec0ff;
    border-radius: 1e3px
}

.hx-box ul li span {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/hx.png) no-repeat center center;
    background-size: 100% 100%;
    animation: hx 4s linear infinite
}

@keyframes hx {
    to {
        transform: rotate(360deg)
    }
}

.hx-k2 {
    transform: rotateX(60deg) rotateZ(60deg)
}

.hx-k3 {
    transform: rotateX(-60deg) rotateZ(-60deg)
}

 

无缝轮播

 

  1. //兼容各种浏览器
  2.  
  3.   $(function(){
  4.  
  5.      var w=630;
  6.  
  7.       var l=0;
  8.  
  9.       var timer=null;
  10.  
  11.       var len=$("ul li").length*2; //复制了一份图片，长度变了。
  12.  
  13.       //复制一份图片，是为了解决第一张图片切换到最后一张或 最后一张切换到第一张时，图片区域会出现空白，用户体验不友好。
  14.  
  15.       // 页面一加载，就把ul定位到追加图片的第一张（本身图片在前，追加图片在后。）
  16.  
  17.       //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张,图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张,
  18.  
  19.       //这样图片后面或前面还有一张图片，切换时不会留下空白。（关键之处）
  20.  
  21.     //加载后图片排列像这样：1  2  3  4  5  1  2  3  4  5 
  22.  
  23.      $("ul").append($("ul").html()).css({'width':len*w, 'left': -len*w/2});
  24.  
  25.      
  26.  
  27.     //自动每8秒切换一次 
  28.  
  29.     timer=setInterval(init,8000);    
  30.  
  31.     function init(){
  32.  
  33.          $(".scroll .next").trigger('click'); //当页面一加载就触发next按钮的点击事件，用trigger的好处是减少重复代码,如果不用，就要把按钮click事件里代码全部复制过来，因为加载的代码和点击next按钮代码和效果相同，所以就用trigger触发执行click里面代码。
  34.  
  35.     }
  36.  
  37.     
  38.  
  39.     $("ul li").hover(function(){
  40.  
  41.          clearInterval(timer);
  42.  
  43.         },function(){
  44.  
  45.             timer=setInterval(init,8000);
  46.  
  47.        });
  48.  
  49.     
  50.  
  51.       $(".prev").click(function(){
  52.  
  53.           l=parseInt($("ul").css("left"))+w;  //这里要转成整数，因为后面带了px单位
  54.  
  55.              showCurrent(l); 
  56.  
  57.           });
  58.  
  59.           $(".next").click(function(){
  60.  
  61.              l=parseInt($("ul").css("left"))-w;  //这里要转成整数，因为后面带了px单位
  62.  
  63.             showCurrent(l);
  64.  
  65.       });
  66.  
  67.        function showCurrent(l){     //把图片的左右切换封装成一个函数
  68.  
  69.        if($("ul").is(':animated')){ //当ul正在执行动画的过程中，阻止执行其它动作。关键之处，不然图片切换显示不完全，到最后图片空白不显示。
  70.  
  71.           return;
  72.  
  73.        }
  74.  
  75.           $("ul").animate({"left":l},500,function(){
  76.  
  77.                 if(l==0){ //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张。注意这里的设置的css一定到写在animate动画完成时的执行  //函数里。否则图片只是一瞬间回到第一张，但是没有向右的动画效果。 我在做的时候，用的不是css,而是用animate()定位到第二个第一张，结果切换时，是反方向的运动，一直觉得无论怎样，图片方向都会发生变化 ，弄得花了一天时间才找到原因，所以一定 要用css。
  78.  
  79.                $("ul").css("left",-len*w/2);   
  80.  
  81.                
  82.  
  83.              }else if(l==(1-len)*w){ //图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张。从而显示的是第一份最后一张。
  84.  
  85.                  $("ul").css('left',(1-len/2)*w); 
  86.  
  87.                 }
  88.  
  89.             });       
  90.  
  91.          }
  92.  
  93.       
  94.  
  95.       });

　　

无缝文字上下

  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>实现无缝上下滚动</title>
  6. <link href="css/usually.css" type="text/css"  rel="stylesheet"  />
  7. <script src="js/jquery-1.10.2.min.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <p class="back"><a href="index.html">返回首页>></a></p>
  12.  
  13. <style>
  14. .list_top{width:280px; height:100px; overflow:hidden; border:1px solid #ddd; padding:10px;}
  15. .list_ul li{height:30px; line-height:30px;}
  16. </style>
  17. <div class="list_top">
  18.     <ul class="clearfix list_ul">
  19.         <li>111</li>
  20.         <li>222</li>
  21.         <li>333</li>
  22.     </ul>
  23. </div>
  24. <script>
  25.  (function($){
  26.         $.fn.extend({
  27.             slideFn:function(options){
  28.                 var defaults = {
  29.                     isTop:true,//是否
  30.                     slideTimer:"1000"
  31.                 };
  32.                 var options = $.extend(defaults,options);
  33.                 this.each(function(){
  34.                     var o = options;
  35.                     var obj = $(this);
  36.                     var oUl = obj.find("ul:first");
  37.                     var oLi = $("li",oUl);
  38.  
  39.                     var Timer;
  40.                     obj.hover(function(){
  41.                         clearInterval(Timer);
  42.                     },function(){
  43.                         Timer = setInterval(function(){
  44.                             if(o.isTop==true){
  45.                                 slideTop(oUl);
  46.                             }else{
  47.                                 slideLeft(oUl);
  48.                             }
  49.                         }, o.slideTimer )
  50.                     }).trigger("mouseleave");
  51.  
  52.                     var slideTop = function(box){
  53.                         var oLiHeight = box.find("li:first").height();
  54.                         box.animate({"marginTop":-oLiHeight+"px"},800,function(){
  55.                             box.css("marginTop",0).find("li:first").appendTo(box);
  56.                         })
  57.                     };//上滚
  58.                     var slideLeft = function(box2){
  59.                         box2.css("width",((oLi.width())*(oLi.length))+"px");
  60.                         var oLiWidth = box2.find("li:first").width();
  61.                         box2.animate({"marginLeft":-oLiWidth+"px"},800,function(){
  62.                             box2.css("marginLeft",0).find("li:first").appendTo(box2);
  63.                         })
  64.                     };//左滚
  65.                 })
  66.             }
  67.  
  68.         })
  69.     })(jQuery);
  70. 	//实现无缝上下滚动 无缝左右滚动--------------------------------------------------------------
  71.  
  72.  $(".list_top").slideFn();
  73. </script>
  74.  
  75.  
  76. 	
  77. </body>
  78. </html>

　　

转载于:https://www.cnblogs.com/surfaces/p/9168400.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/97177
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号