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

　

下拉框

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>信息查询</title>
  6.         <meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />
  7.  
  8.     </head>
  9.     <body>
  10.  
  11. <style>
  12. 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;}
  13. html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-width:320px;font-size:62.5%;}
  14. 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;}
  15. article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
  16. dl,li,menu,ol,ul{list-style:none}
  17. address,em,i,th{font-weight:400;font-style:normal}
  18. a{color:#999;display:block;}
  19. a:link,a:visited{color:#999;text-decoration:none;cursor:pointer}
  20. a:hover{cursor:pointer}
  21. a:active,a:focus{outline:0;}
  22. img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;}
  23. input,select{outline:0}
  24. h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal;font-weight:normal;}
  25. button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none}
  26. ::-webkit-input-placeholder{color:#777;}
  27. ::input-placeholder{color:#777;}
  28. input:focus::-webkit-input-placeholder{-webkit-transition:.2s;opacity:0;}
  29. input:focus::input-placeholder{transition:.2s;opacity:0;}
  30. .clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}
  31. .fl{float:left}
  32. .fr{float:right}
  33. .fl,.fr{display:inline}
  34. .disabled{pointer-events:none;}
  35. .hover{ }
  36. .hover:hover{ cursor: pointer;}        
  37.  
  38. /*    业务css*/
  39. .my_form{ background: #fafafa;
  40.     border: 1px solid #e0e0e0;
  41.     margin-top: 20px; padding: 21px; m }
  42.  
  43. .my_form .my_form_content{ width: 100%; }
  44. .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;;}
  45.  
  46. .my_form_table{ border: 1px solid #e0e0e0; }
  47.     .flexbox{display:-webkit-box;
  48. display:-moz-box;
  49. display:box;
  50. display:-webkit-flex;
  51. display:-moz-flex;
  52. display:-ms-flexbox;
  53. display:flex;
  54. display:table\9;
  55. }
  56. .flexbox .flex1{
  57. -webkit-box-flex:1;
  58. -moz-box-flex:1;
  59. box-flex:1;
  60. -webkit-flex:1;
  61. -moz-flex:1;
  62. -ms-flex:1;
  63. flex:1;
  64. display:table-cell\9;
  65. }
  66.  
  67. .selected_icon{ position: relative; width: 100%; height: 100%;}
  68. .selected_icon .check{ position:absolute;background: #157fcc;}
  69. .selected_icon .check.plus{ left: 50%; top: 50%; margin-left: -8px; width: 16px; height: 1px; }
  70. .selected_icon .check.reduce{left: 50%;top: 50%;; margin-top: -8px;; position:absolute;width: 1px; height: 16px; }
  71. .showone.on .check{background: red !important;}
  72. .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;;}
  73. .showone{ position: relative;;border-bottom: 1px solid #e0e0e0 ;}
  74. .hideone{ background: #fff; margin:20px 44px;;border: 1px solid #ccc ;}
  75. .hideoneinner { position: relative;; height:44px; line-height: 44px; text-align: center; border-bottom: 1px solid #e0e0e0;}
  76. .hideoneinner div { height:44px; line-height: 44px;border-right: 1px solid #e0e0e0; }
  77. .showone.on:after{position: absolute;
  78.     content: "";
  79.     height: 1px; width: 22px;
  80.     background:#e0e0e0;
  81.     left: 22px; top: 65px;
  82.     z-index: 26;}
  83.  .showone.on:before{ position: absolute;
  84.     content: "";
  85.     height: 22px; width:1px;
  86.     background:#e0e0e0;
  87.     left: 22px; top: 44px;
  88.     z-index: 26;}
  89.  
  90. .hideoneinner div:last-child{ border-right:0; }
  91. .hideoneinner div:first-child{  font-weight: bold; }
  92. .hideoneinner:last-of-type{  border-bottom: 0;}
  93. .my_form_table .showone:hover{ background:#f5f5f5 ;}
  94.  
  95. .filter-disabled {
  96.     -moz-user-select: none;
  97.     -webkit-user-select: none;
  98.     -ms-user-select: none;
  99. }
  100.  
  101. .filter-box {
  102.     position: relative; z-index: 92;;
  103. }
  104.  
  105. .filter-box select {
  106.     display: none;
  107. }
  108.  
  109. .filter-text {
  110.     height: 100%;
  111.     overflow: hidden;
  112.     position: relative;
  113.     cursor: pointer;
  114.     padding: 0 30px 0 10px;
  115.     background: #fff;
  116.     border: 1px solid #e6e6e6;
  117. }
  118.  
  119. .filter-text input {
  120.     font-size: 14px;
  121. }
  122.  
  123. .filter-text .filter-title {
  124.     width: 100%;
  125.     height: 36px;
  126.     line-height: 36px;
  127.     border: 0;
  128.     background-color: transparent;
  129.     white-space: nowrap;
  130.     overflow: hidden;
  131.     text-overflow: ellipsis;
  132.     padding: 0;
  133.     cursor: pointer;
  134. }
  135.  
  136. .filter-list {
  137.     display: none;
  138.     width: 100%; z-index: 99;
  139.     max-height: 300px;
  140.     background-color: #fff;
  141.     font-size: 14px;
  142.     position: absolute;
  143.     top: 42px;
  144.     left: 0;
  145.     z-index: 99;
  146.     border: 1px solid #e6e6e6;
  147.     overflow: auto;
  148. }
  149.  
  150. .filter-list li.filter-null a {
  151.     color: #d2d2d2;
  152. }
  153.  
  154. .filter-list li a {
  155.     display: block;
  156.     padding: 0 10px;
  157.     line-height: 36px;
  158.     white-space: nowrap;
  159.     overflow: hidden;
  160.     text-overflow: ellipsis;
  161.     cursor: pointer;
  162. }
  163.  
  164. .filter-list li:hover {
  165.     background-color: #f2f2f2;
  166. }
  167.  
  168. .filter-list li.filter-selected {
  169.     background-color: #5FB878;
  170. }
  171.  
  172. .filter-list li.filter-selected a{
  173.     display: block;
  174.     color: #fff;
  175. }
  176.  
  177. .filter-list li.filter-disabled {
  178.     background-color: #fff;
  179. }
  180.  
  181. .filter-list li.filter-disabled a{
  182.     display: block;
  183.     color: #d2d2d2;
  184. }
  185.  
  186. .filter-list li.filter-disabled:hover a {
  187.     cursor: not-allowed!important;
  188.     background-color: #fff;
  189. }
  190.  
  191. .icon {
  192.     position: absolute;
  193. }
  194.  
  195. .icon-filter-arrow {
  196.      width:0;
  197.     height:0;
  198.     overflow:hidden;
  199.     font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
  200.     line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
  201.     border-width:8px;
  202.     border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
  203.     border-color:#999 transparent transparent transparent;
  204.     right: 10px;
  205.     top: 13px;
  206.     transition: all .2s;
  207. }
  208.  
  209. .icon-filter-arrow.filter-show {
  210.     -webkit-transform: rotate(-180deg);
  211.     transform: rotate(-180deg);
  212. }
  213.  
  214. .filter-list::-webkit-scrollbar {
  215.     width: 4px;
  216.     height: 4px;
  217. }
  218.  
  219. .filter-list::-webkit-scrollbar-track {
  220.     background: #fff
  221. }
  222.  
  223. .filter-list::-webkit-scrollbar-thumb {
  224.     background: #CBCBCB;
  225. }
  226.  
  227. #j_searchtask{  background: #666; padding: 10px 20px;}
  228. </style>
  229.  
  230.             <div>  
  231.  
  232.                       <!-- 这里开始 -->
  233.  
  234.             <div class="filter-box filter-box1 fl">
  235.                 <div class="filter-text">
  236.                     <input class="filter-title" id="j_qudao"  data-val="" type="text" readonly placeholder="请选择渠道" />
  237.                     <i class="icon icon-filter-arrow"></i>
  238.                 </div>
  239.                 <select name="filter">
  240.                     <option value="new"  disabled>请选择渠道</option>
  241.                     <option value="11渠道1" >渠道1</option>
  242.  
  243.                     <option value="22渠道2">渠道2</option>
  244.                     <option value="33渠道3">渠道3</option>
  245.  
  246.                 </select>
  247.             </div>
  248.  
  249.             <!-- 这里结束 -->
  250.                       <!-- 这里开始 -->
  251.  
  252.             <div class="filter-box  filter-box2 fl">
  253.                 <div class="filter-text">
  254.                     <input class="filter-title" id="j_qudao2"  data-val="" type="text" readonly placeholder="请选择支付" />
  255.                     <i class="icon icon-filter-arrow"></i>
  256.                 </div>
  257.                 <select name="filter">
  258.                     <option value="new"  disabled>请选类型</option>
  259.                     <option value="淘宝1" >淘宝</option>
  260.  
  261.                     <option value="支付宝2">支付宝</option>
  262.  
  263.                 </select>
  264.             </div>
  265.  
  266.             <!-- 这里结束 -->
  267.  
  268.                    <div class="right fr" class="flex1" id="j_searchtask">查询结果</div>     
  269.  
  270.         </div>  
  271.  
  272.     <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">    </script>
  273.  
  274.     <script type="text/javascript" >
  275.  
  276.         ;jQuery.fn.selectFilter = function(options) {
  277.     var defaults = {
  278.         callBack: function(res) {}
  279.     };
  280.     var ops = $.extend({}, defaults, options);
  281.     var selectList = $(this).find('select option');
  282.     var that = this;
  283.     var html = '';
  284.     html += '<ul class="filter-list">';
  285.     $(selectList).each(function(idx, item) {
  286.         var val = $(item).val();
  287.         var valText = $(item).html();
  288.         var selected = $(item).attr('selected');
  289.         var disabled = $(item).attr('disabled');
  290.         var isSelected = selected ? 'filter-selected' : '';
  291.         var isDisabled = disabled ? 'filter-disabled' : '';
  292.         if (selected) {
  293.             html += '<li class="' + isSelected + '" data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
  294.             $(that).find('.filter-title').val(valText);
  295.         } else if (disabled) {
  296.             html += '<li class="' + isDisabled + '" data-value="' + val + '"><a>' + valText + '</a></li>';
  297.         } else {
  298.             html += '<li data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
  299.         }
  300.         ;
  301.     });
  302.     html += '</ul>';
  303.     $(that).append(html);
  304.     $(that).find('select').hide();
  305.     $(that).on('click', '.filter-text', function() {
  306.         $(that).find('.filter-list').slideToggle(100);
  307.         $(that).find('.filter-list').toggleClass('filter-open');
  308.         $(that).find('.icon-filter-arrow').toggleClass('filter-show');
  309.     });
  310.     $(that).find('.filter-list li').not('.filter-disabled').on('click', function() {
  311.         var val = $(this).data('value');
  312.         var valText = $(this).find('a').html();
  313.         $(that).find('.filter-title').val(valText);
  314.         $(that).find('.icon-filter-arrow').toggleClass('filter-show');
  315.         $(this).addClass('filter-selected').siblings().removeClass('filter-selected');
  316.         $(this).parent().slideToggle(50);
  317.         for (var i = 0; i < selectList.length; i++) {
  318.             var selectVal = selectList.eq(i).val();
  319.             if (val == selectVal) {
  320.                 $(that).find('select').val(val);
  321.             }
  322.             ;
  323.         }
  324.         ;ops.callBack(val);
  325.     });
  326.     $(document).on('mousedown', function(e) {
  327.         closeSelect(that, e);
  328.     });
  329.     $(document).on('touchstart', function(e) {
  330.         closeSelect(that, e);
  331.     });
  332.     function closeSelect(that, e) {
  333.         var filter = $(that).find('.filter-list')
  334.           , filterEl = $(that).find('.filter-list')[0];
  335.         var filterBoxEl = $(that)[0];
  336.         var target = e.target;
  337.         if (filterEl !== target && !$.contains(filterEl, target) && !$.contains(filterBoxEl, target)) {
  338.             filter.slideUp(50);
  339.             $(that).find('.filter-list').removeClass('filter-open');
  340.             $(that).find('.icon-filter-arrow').removeClass('filter-show');
  341.         }
  342.         ;
  343.     }
  344. }
  345. ;
  346.  
  347.     </script>
  348.         <script type="text/javascript">
  349.             //本小插件支持移动端哦
  350.  
  351.         </script>
  352.  
  353.      <script>
  354.         $(document).ready(function(){
  355.  
  356.                //下拉组件
  357.             $('.filter-box1').selectFilter({
  358.                 callBack : function (val){
  359.                     //返回选择的值
  360.                     //document.getElementById("j_qudao").setAttribute("data-val",val)
  361.                     console.log(val+'-是返回的值')
  362.                 }
  363.             });
  364.                    //下拉组件
  365.             $('.filter-box2').selectFilter({
  366.                 callBack : function (val){
  367.                     //返回选择的值
  368.                     //document.getElementById("j_qudao").setAttribute("data-val",val)
  369.                     console.log(val+'-是返回的值')
  370.                 }
  371.             });  
  372.  
  373.                       //查询点击
  374.                       $("#j_searchtask").on("click",function(){
  375.                           var qudao_val=$("#j_qudao").attr("data-val");//渠道
  376.                             var qudao_val2=$("#j_qudao2").attr("data-val");//渠道
  377.                                  alert("值-----："+qudao_val);
  378.                                       alert("值-----："+qudao_val2);
  379.  
  380.                           });
  381.  
  382.  });
  383.     </script>
  384.  
  385.     </body>
  386. </html>

水波纹

  1. !function(t, e) {
  2.     "use strict";
  3.     if (void 0 === n || !n)
  4.         var n = function(t) {
  5.             var e = {
  6.                 opacity: .5,
  7.                 speed: .6,
  8.                 bgColor: "#ffffff",
  9.                 cursor: !0
  10.             };
  11.             this.option = this.extend(t, e),
  12.             this.isltIE9() || this.init()
  13.         };
  14.     n.prototype = {
  15.         createEle: function(t) {
  16.             return e.createElement(t)
  17.         },
  18.         extend: function(t, e) {
  19.             var n = JSON.parse(JSON.stringify(e));
  20.             for (var i in t)
  21.                 n[i] = t[i];
  22.             return n
  23.         },
  24.         isltIE9: function() {
  25.             return !!/MSIE6.0|MSIE7.0|MSIE8.0|MSIE9.0/i.test(navigator.userAgent.split(";")[1].replace(/[ ]/g, ""))
  26.         },
  27.         getPosition: function(t) {
  28.             var e = this.getBoundingClientRect()
  29.               , n = Math.max(e.width, e.height);
  30.             return {
  31.                 range: n,
  32.                 x: t.clientX - e.left - n / 2,
  33.                 y: t.clientY - e.top - n / 2
  34.             }
  35.         },
  36.         loadCss: function() {
  37.             var t = e.scripts
  38.               , n = t[t.length - 1].src
  39.               , i = n.substring(0, n.lastIndexOf("/") + 1);
  40.             e.head.appendChild(function() {
  41.                 var t = e.createElement("link");
  42.                 return t.href = i + "need/ripple.css",
  43.                 t.type = "text/css",
  44.                 t.rel = "styleSheet",
  45.                 t.id = "ripplecss",
  46.                 t
  47.             }())
  48.         },
  49.         addEvent: function() {
  50.             for (var t = this, n = 0; n < this.elements.length; n++)
  51.                 "boolean" == typeof t.option.cursor && t.option.cursor && (this.elements[n].style.cursor = "pointer"),
  52.                 this.elements[n].addEventListener("mousedown", function(n) {
  53.                     n.stopPropagation();
  54.                     var i = t.getPosition.call(this, n)
  55.                       , o = e.createElement("span");
  56.                     o.className = "ripple",
  57.                     o.style.top = i.y + "px",
  58.                     o.style.left = i.x + "px",
  59.                     o.style.width = i.range + "px",
  60.                     o.style.height = i.range + "px",
  61.                     o.style.animationDuration = t.option.speed + "s",
  62.                     o.style.background = t.option.bgColor,
  63.                     o.style.opacity = t.option.opacity,
  64.                     o.addEventListener("animationend", function() {
  65.                         this.parentNode.removeChild(this)
  66.                     }, !1),
  67.                     this.appendChild(o)
  68.                 }, !1)
  69.         }
  70.     },
  71.     n.prototype.init = function() {
  72.         this.loadCss();
  73.         var n = this;
  74.         t.onload = function() {
  75.             n.elements = e.querySelectorAll('[data-ripple="ripple"]'),
  76.             n.addEvent()
  77.         }
  78.     }
  79.     ,
  80.     t.Ripple = n
  81. }(window, document);

css

  1. [data-ripple=ripple] {
  2.     position: relative;
  3.     overflow: hidden;
  4.     -webkit-user-select: none;
  5.     -moz-webkit-user-select: none;
  6.     -ms-user-select: none
  7. }
  8.  
  9. [data-ripple=ripple] .ripple {
  10.     display: block;
  11.     width: 100%;
  12.     height: 100%;
  13.     border-radius: 100%;
  14.     position: absolute;
  15.     top:;
  16.     left:;
  17.     z-index:;
  18.     background: rgba(255,255,255,.5);
  19.     transform: scale(0);
  20.     animation: ripple .6s 0s linear
  21. }
  22.  
  23. @keyframes ripple {
  24.     100% {
  25.         opacity:;
  26.         transform: scale(2.5)
  27.     }
  28. }

效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Demo</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  7. <style type="text/css">
  8.     *{
  9.         margin:0;
  10.         padding: 0;
  11.     }
  12.     div,a,button,h1{
  13.         background: blue;
  14.         height: 50px;
  15.         line-height: 50px;
  16.         color: #fff;
  17.         text-align: center;
  18.         width: 200px;
  19.         margin: 5px;
  20.         border-radius: 5px;
  21.         font-size:14px ;
  22.         font-family: "微软雅黑","Arial Narrow"
  23.     }
  24.     a{
  25.         display: block;
  26.     }
  27. </style>
  28. </head>
  29. <body>
  30. <div data-ripple="ripple">
  31. div标签
  32. </div>
  33. <a data-ripple="ripple">
  34. a标签
  35. </a>
  36. <button data-ripple="ripple">
  37. button标签
  38. </button>
  39. <h1 data-ripple="ripple">
  40. h1标签
  41. </h1>
  42. </body>
  43. </html>
  44. <script src="ripple.min.js" charset="UTF-8"></script>
  45. <script type="text/javascript">
  46.     new Ripple({
  47.         opacity : 0.6,  //水波纹透明度
  48.         speed : 1,      //水波纹扩散速度
  49.         bgColor : "#fff", //水波纹颜色
  50.         cursor : true  //是否显示手型指针
  51.     })
  52. </script>

摇一摇 函数

  1. /*
  2.  * Author: Alex Gibson
  3.  * https://github.com/alexgibson/shake.js
  4.  * License: MIT license
  5.  */
  6.  
  7. (function(global, factory) {
  8.     if (typeof define === 'function' && define.amd) {
  9.         define(function() {
  10.             return factory(global, global.document);
  11.         });
  12.     } else if (typeof module !== 'undefined' && module.exports) {
  13.         module.exports = factory(global, global.document);
  14.     } else {
  15.         global.Shake = factory(global, global.document);
  16.     }
  17. } (typeof window !== 'undefined' ? window : this, function (window, document) {
  18.  
  19.     'use strict';
  20.  
  21.     function Shake(options) {
  22.         //feature detect
  23.         this.hasDeviceMotion = 'ondevicemotion' in window;
  24.  
  25.         this.options = {
  26.             threshold: 15, //default velocity threshold for shake to register
  27.             timeout: 1000 //default interval between events
  28.         };
  29.  
  30.         if (typeof options === 'object') {
  31.             for (var i in options) {
  32.                 if (options.hasOwnProperty(i)) {
  33.                     this.options[i] = options[i];
  34.                 }
  35.             }
  36.         }
  37.  
  38.         //use date to prevent multiple shakes firing
  39.         this.lastTime = new Date();
  40.  
  41.         //accelerometer values
  42.         this.lastX = null;
  43.         this.lastY = null;
  44.         this.lastZ = null;
  45.  
  46.         //create custom event
  47.         if (typeof document.CustomEvent === 'function') {
  48.             this.event = new document.CustomEvent('shake', {
  49.                 bubbles: true,
  50.                 cancelable: true
  51.             });
  52.         } else if (typeof document.createEvent === 'function') {
  53.             this.event = document.createEvent('Event');
  54.             this.event.initEvent('shake', true, true);
  55.         } else {
  56.             return false;
  57.         }
  58.     }
  59.  
  60.     //reset timer values
  61.     Shake.prototype.reset = function () {
  62.         this.lastTime = new Date();
  63.         this.lastX = null;
  64.         this.lastY = null;
  65.         this.lastZ = null;
  66.     };
  67.  
  68.     //start listening for devicemotion
  69.     Shake.prototype.start = function () {
  70.         this.reset();
  71.         if (this.hasDeviceMotion) {
  72.             window.addEventListener('devicemotion', this, false);
  73.         }
  74.     };
  75.  
  76.     //stop listening for devicemotion
  77.     Shake.prototype.stop = function () {
  78.         if (this.hasDeviceMotion) {
  79.             window.removeEventListener('devicemotion', this, false);
  80.         }
  81.         this.reset();
  82.     };
  83.  
  84.     //calculates if shake did occur
  85.     Shake.prototype.devicemotion = function (e) {
  86.         var current = e.accelerationIncludingGravity;
  87.         var currentTime;
  88.         var timeDifference;
  89.         var deltaX = 0;
  90.         var deltaY = 0;
  91.         var deltaZ = 0;
  92.  
  93.         if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
  94.             this.lastX = current.x;
  95.             this.lastY = current.y;
  96.             this.lastZ = current.z;
  97.             return;
  98.         }
  99.  
  100.         deltaX = Math.abs(this.lastX - current.x);
  101.         deltaY = Math.abs(this.lastY - current.y);
  102.         deltaZ = Math.abs(this.lastZ - current.z);
  103.  
  104.         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))) {
  105.             //calculate time in milliseconds since last shake registered
  106.             currentTime = new Date();
  107.             timeDifference = currentTime.getTime() - this.lastTime.getTime();
  108.  
  109.             if (timeDifference > this.options.timeout) {
  110.                 window.dispatchEvent(this.event);
  111.                 this.lastTime = new Date();
  112.             }
  113.         }
  114.  
  115.         this.lastX = current.x;
  116.         this.lastY = current.y;
  117.         this.lastZ = current.z;
  118.  
  119.     };
  120.  
  121.     //event handler
  122.     Shake.prototype.handleEvent = function (e) {
  123.         if (typeof (this[e.type]) === 'function') {
  124.             return this[e.type](e);
  125.         }
  126.     };
  127.  
  128.     return Shake;
  129. }));

其他

360  科学技术

  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
  6. <title>主页</title>
  7. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <link rel="stylesheet" href="css/tabris.css">
  9. <link rel="stylesheet" href="css/lib.css">
  10. </head>
  11. <body>
  12. <div class="bg0 pa">
  13. <div class="bg1"></div>
  14. </div>
  15. <div class="hx-box pa">
  16. <ul class="pr">
  17. <li class="hx-k1 pa0">
  18. <span></span>
  19. </li>
  20. <li class="hx-k2 pa0">
  21. <span></span>
  22. </li>
  23. <li class="hx-k3 pa0">
  24. <span></span>
  25. </li>
  26. </ul>
  27. </div>
  28. </body>
  29. </html>
  1. @charset 'utf-8';article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary {
  2.     display: block
  3. }
  4.  
  5. hr,img {
  6.     border: 0
  7. }
  8.  
  9. pre,textarea {
  10.     overflow: auto
  11. }
  12.  
  13. hr,legend,td,th {
  14.     padding: 0
  15. }
  16.  
  17. html {
  18.     font-family: sans-serif;
  19.     -ms-text-size-adjust: 100%;
  20.     -webkit-text-size-adjust: 100%
  21. }
  22.  
  23. body {
  24.     color: #333;
  25.     font-size: 1em;
  26.     line-height: 1.42857143;
  27.     font-family: Helvetica,hiragino sans gb,microsoft yahei,微软雅黑,Arial,sans-serif
  28. }
  29.  
  30. body,form,h1,h2,h3,h4,h5,h6,ol,p,ul {
  31.     margin: 0
  32. }
  33.  
  34. ol,ul {
  35.     padding-left: 0;
  36.     list-style-type: none
  37. }
  38.  
  39. h1,h2,h3,h4,h5,h6 {
  40.     font-size: 1em;
  41.     font-weight: 400
  42. }
  43.  
  44. a {
  45.     text-decoration: none;
  46.     background-color: transparent;
  47.     color: inherit
  48. }
  49.  
  50. a:active,a:hover {
  51.     outline: 0
  52. }
  53.  
  54. li {
  55.     list-style: none
  56. }
  57.  
  58. audio,canvas,progress,video {
  59.     display: inline-block;
  60.     vertical-align: baseline
  61. }
  62.  
  63. .vm,audio,canvas,iframe,img,svg,video {
  64.     vertical-align: middle
  65. }
  66.  
  67. audio:not([controls]) {
  68.     display: none;
  69.     height: 0
  70. }
  71.  
  72. [hidden],template {
  73.     display: none
  74. }
  75.  
  76. abbr[title] {
  77.     border-bottom: 1px dotted
  78. }
  79.  
  80. b,optgroup,strong {
  81.     font-weight: 700
  82. }
  83.  
  84. dfn {
  85.     font-style: italic
  86. }
  87.  
  88. mark {
  89.     background: #ff0;
  90.     color: #000
  91. }
  92.  
  93. small {
  94.     font-size: 80%
  95. }
  96.  
  97. sup {
  98.     top: -.5em
  99. }
  100.  
  101. sub {
  102.     bottom: -.25em
  103. }
  104.  
  105. svg:not(:root) {
  106.     overflow: hidden
  107. }
  108.  
  109. figure {
  110.     margin: 1em 40px
  111. }
  112.  
  113. hr {
  114.     height: 1px;
  115.     border-top: 1px solid #ccc;
  116.     margin: 1em 0
  117. }
  118.  
  119. code,kbd,pre,samp {
  120.     font-family: monospace,monospace;
  121.     font-size: 1em
  122. }
  123.  
  124. button,input,optgroup,select,textarea {
  125.     color: inherit;
  126.     font: inherit;
  127.     margin: 0
  128. }
  129.  
  130. button {
  131.     overflow: visible
  132. }
  133.  
  134. button,select {
  135.     text-transform: none
  136. }
  137.  
  138. button,html input[type=button],input[type=reset],input[type=submit] {
  139.     -webkit-appearance: button;
  140.     cursor: pointer
  141. }
  142.  
  143. button[disabled],html input[disabled] {
  144.     cursor: default
  145. }
  146.  
  147. button::-moz-focus-inner,input::-moz-focus-inner {
  148.     border: 0;
  149.     padding: 0
  150. }
  151.  
  152. input {
  153.     line-height: normal
  154. }
  155.  
  156. input[type=checkbox],input[type=radio] {
  157.     box-sizing: border-box;
  158.     padding: 0
  159. }
  160.  
  161. input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
  162.     height: auto
  163. }
  164.  
  165. input[type=search] {
  166.     -webkit-appearance: textfield;
  167.     box-sizing: content-box
  168. }
  169.  
  170. input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
  171.     -webkit-appearance: none
  172. }
  173.  
  174. fieldset {
  175.     border: 1px solid silver;
  176.     margin: 0 2px;
  177.     padding: .35em .625em .75em
  178. }
  179.  
  180. legend {
  181.     border: 0
  182. }
  183.  
  184. textarea {
  185.     resize: vertical
  186. }
  187.  
  188. table {
  189.     border-collapse: collapse;
  190.     border-spacing: 0
  191. }
  192.  
  193. ::-moz-selection {
  194.     background: #b3d4fc;
  195.     text-shadow: none
  196. }
  197.  
  198. ::selection {
  199.     background: #b3d4fc;
  200.     text-shadow: none
  201. }
  202.  
  203. .browserupgrade {
  204.     margin: .2em 0;
  205.     background: #ccc;
  206.     color: #000;
  207.     padding: .2em 0
  208. }
  209.  
  210. .dv {
  211.     border: 0;
  212.     clip: rect(0 0 0 0);
  213.     height: 1px;
  214.     margin: -1px;
  215.     overflow: hidden;
  216.     padding: 0;
  217.     position: absolute;
  218.     width: 1px
  219. }
  220.  
  221. .dv.dvv:active,.dv.dvv:focus {
  222.     clip: auto;
  223.     height: auto;
  224.     margin: 0;
  225.     overflow: visible;
  226.     position: static;
  227.     width: auto
  228. }
  229.  
  230. .dn {
  231.     display: none
  232. }
  233.  
  234. .db {
  235.     display: block
  236. }
  237.  
  238. .fix:after,.fix:before {
  239.     content: " ";
  240.     display: table
  241. }
  242.  
  243. .fix:after {
  244.     clear: both
  245. }
  246.  
  247. .fl {
  248.     float: left
  249. }
  250.  
  251. .fr {
  252.     float: right
  253. }
  254.  
  255. .pr {
  256.     position: relative
  257. }
  258.  
  259. .pa,.pa0 {
  260.     position: absolute
  261. }
  262.  
  263. .pa0 {
  264.     left: 0;
  265.     top: 0
  266. }
  267.  
  268. .oh {
  269.     overflow: hidden
  270. }
  271.  
  272. .wh {
  273.     width: 100%;
  274.     height: 100%
  275. }
  276.  
  277. .bo {
  278.     border: 1px solid red
  279. }
  280.  
  281. .mg {
  282.     margin-left: auto;
  283.     margin-right: auto
  284. }
  285.  
  286. .tc {
  287.     text-align: center
  288. }
  289.  
  290. .wp {
  291.     margin: 0 auto
  292. }
  293.  
  294. *,:after,:before {
  295.     -webkit-box-sizing: border-box;
  296.     -moz-box-sizing: border-box;
  297.     box-sizing: border-box
  298. }
  299.  
  300. @charset 'utf-8';html {
  301.     width: 100%;
  302.     height: 100%
  303. }
  304.  
  305. body {
  306.     width: 100%;
  307.     height: 100%;
  308.     overflow: hidden;
  309.     background-image: -webkit-linear-gradient(90deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
  310.     background-image: -moz-linear-gradient(90deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
  311.     background-image: -ms-linear-gradient(90deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
  312.     background-image: linear-gradient(0deg,#395ecb 0%,#3657be 35%,#242161 75%,#1a0531 100%);
  313.     perspective: 1e3px
  314. }
  315.  
  316. .bg0 {
  317.     width: 500px;
  318.     height: 500px;
  319.     top: 50%;
  320.     left: 50%;
  321.     transform: translate(-50%,-50%);
  322.     background: url(../images/bg0.png) no-repeat center center;
  323.     background-size: 150%
  324. }
  325.  
  326. .bg1 {
  327.     width: 100%;
  328.     height: 100%;
  329.     background: url(../images/bg1.png) no-repeat center center
  330. }
  331.  
  332. .hx-box {
  333.     top: 50%;
  334.     left: 50%;
  335.     width: 500px;
  336.     height: 500px;
  337.     transform-style: preserve-3d;
  338.     transform: translate(-50%,-50%) rotateY(75deg)
  339. }
  340.  
  341. .hx-box ul {
  342.     width: 500px;
  343.     height: 500px;
  344.     transform-style: preserve-3d;
  345.     animation: hxz 20s linear infinite
  346. }
  347.  
  348. @keyframes hxz {
  349.     0% {
  350.         transform: rotateX(0deg)
  351.     }
  352.  
  353.     100% {
  354.         transform: rotateX(-360deg)
  355.     }
  356. }
  357.  
  358. .hx-box ul li {
  359.     width: 500px;
  360.     height: 500px;
  361.     border: 4px solid #5ec0ff;
  362.     border-radius: 1e3px
  363. }
  364.  
  365. .hx-box ul li span {
  366.     display: block;
  367.     width: 100%;
  368.     height: 100%;
  369.     background: url(../images/hx.png) no-repeat center center;
  370.     background-size: 100% 100%;
  371.     animation: hx 4s linear infinite
  372. }
  373.  
  374. @keyframes hx {
  375.     to {
  376.         transform: rotate(360deg)
  377.     }
  378. }
  379.  
  380. .hx-k2 {
  381.     transform: rotateX(60deg) rotateZ(60deg)
  382. }
  383.  
  384. .hx-k3 {
  385.     transform: rotateX(-60deg) rotateZ(-60deg)
  386. }

无缝轮播

  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.     //自动每8秒切换一次 
  26.  
  27.     timer=setInterval(init,8000);    
  28.  
  29.     function init(){
  30.  
  31.          $(".scroll .next").trigger('click'); //当页面一加载就触发next按钮的点击事件，用trigger的好处是减少重复代码,如果不用，就要把按钮click事件里代码全部复制过来，因为加载的代码和点击next按钮代码和效果相同，所以就用trigger触发执行click里面代码。
  32.  
  33.     }
  34.  
  35.     $("ul li").hover(function(){
  36.  
  37.          clearInterval(timer);
  38.  
  39.         },function(){
  40.  
  41.             timer=setInterval(init,8000);
  42.  
  43.        });
  44.  
  45.       $(".prev").click(function(){
  46.  
  47.           l=parseInt($("ul").css("left"))+w;  //这里要转成整数，因为后面带了px单位
  48.  
  49.              showCurrent(l); 
  50.  
  51.           });
  52.  
  53.           $(".next").click(function(){
  54.  
  55.              l=parseInt($("ul").css("left"))-w;  //这里要转成整数，因为后面带了px单位
  56.  
  57.             showCurrent(l);
  58.  
  59.       });
  60.  
  61.        function showCurrent(l){     //把图片的左右切换封装成一个函数
  62.  
  63.        if($("ul").is(':animated')){ //当ul正在执行动画的过程中，阻止执行其它动作。关键之处，不然图片切换显示不完全，到最后图片空白不显示。
  64.  
  65.           return;
  66.  
  67.        }
  68.  
  69.           $("ul").animate({"left":l},500,function(){
  70.  
  71.                 if(l==0){ //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张。注意这里的设置的css一定到写在animate动画完成时的执行  //函数里。否则图片只是一瞬间回到第一张，但是没有向右的动画效果。 我在做的时候，用的不是css,而是用animate()定位到第二个第一张，结果切换时，是反方向的运动，一直觉得无论怎样，图片方向都会发生变化 ，弄得花了一天时间才找到原因，所以一定 要用css。
  72.  
  73.                $("ul").css("left",-len*w/2);   
  74.  
  75.              }else if(l==(1-len)*w){ //图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张。从而显示的是第一份最后一张。
  76.  
  77.                  $("ul").css('left',(1-len/2)*w); 
  78.  
  79.                 }
  80.  
  81.             });       
  82.  
  83.          }
  84.  
  85.       });

　　

无缝文字上下

  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. </body>
  76. </html>

　　

jquery 分页 下拉框的更多相关文章

  1. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  2. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  3. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

  4. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  5. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  6. Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

  7. jQuery操作下拉框的text值和val值

    jQuery操作下拉框的text值和val值 1,JS源码 <select name="select1" id="select1" style=" ...

  8. jquery获得下拉框值的代码

    jquery获得下拉框值的代码   获取Select :  获取select 选中的 text :  $("#ddlRegType").find("option:sele ...

  9. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

随机推荐

  1. kibana做图表无法选取需要选的字段

    kibana做图表无法选取需要选的字段,即通过term的方式过滤选择某一个field时发现列表里无此选项. 再去discover里看,发现此字段前面带有问号,点击后提示这个字段未做索引,不能用于vis ...

  2. JS动态更新微信浏览器中的title

    问题: 最近在做一个微信中分享的宣传页,分不同的场景,切换不同的场景时需要设置不同的title,实现的方案很简单,当用户切换场景的时候,修改document对象的title属性,可是在实际测试中,io ...

  3. codevs 2147 数星星

    2147 数星星 http://codevs.cn/problem/2147/ 题目描述 Description 小明是一名天文爱好者,他喜欢晚上看星星.这天,他从淘宝上买下来了一个高级望远镜.他十分 ...

  4. 20155306 2016-2017-2 《Java程序设计》第七周学习总结

    20155306 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 第十三章 时间与日期 三种时间: 格林威治标准时间(GMT)的正午是太阳抵达天空最高点之时, ...

  5. Vue的生命周期的介绍

    [推荐链接] https://segmentfault.com/a/1190000008010666

  6. Django 使用mysql 所遇到问题一：Error loading MySQLdb module

    在配置完mysql 的配置信息后执行 python manage.py runserver 时出现如下错误.(py3的环境) 解决 在 python2 中,使用 pip install mysql-p ...

  7. Java NIO之拥抱Path和Files

    Java面试通关手册(Java学习指南)github地址(欢迎star和pull):https://github.com/Snailclimb/Java_Guide 历史回顾: Java NIO 概览 ...

  8. C# 执行固定个数任务自行控制进入线程池的线程数量，多任务同时但是并发数据限定

    思路来源:http://bbs.csdn.NET/topics/390819824,引用该页面某网友提供的方法. 题目:我现在有100个任务,需要多线程去完成,但是要限定同时并发数量不能超过5个. 原 ...

  9. Ｃ＃　日文网址转punnycode

    Uri uri = new Uri(url); IdnMapping idn = new IdnMapping();url= url.Replace(uri.Host, idn.GetAscii(ur ...

  10. 利用github pages五分钟建好个人网站+个人博客

    笔者自己在建个人网站/个人博客的时候其实遇到了不少麻烦,但是都一一解决了,这里教给大家最简单的方式. 首先你需要一个GitHub账号,访问https://github.com创建新账号即可. 然后访问 ...