jquery 分页 下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <style>
*{ margin: 0 ;padding: 0;}
ul,li{ list-style: none;}
#tables{ width: 100%; height: auto;; overflow: hidden; margin-bottom: 40px;;}
#tables li{list-style: none; width: 100px; height: 150px; overflow: hidden; border: 2px solid red; float: left; display: inline;}
#tables li img{ width: 100px; float: left;} .fenye {
height: 40px;
line-height: 40px;
position: relative; z-index: 88;; text-align: center;
}
.fenye input { outline: 0;;
}
.fenye button {
padding: 0 10px;
margin: 0 10px;
height: 40px;
float: left; outline: 0;;
cursor: pointer;
border: 1px solid #ebebeb;
background-color: #ffffff;
}
.fenye .prePage,.fenye .turnPage,.fenye .last-page,.fenye .jump-button{ background:#157fcc ; color: #fff;} .fenye button:disabled{
background-color: #eee;
} .fenye .first-page,
.fenye .last-page {
margin: 0;
}
.fenye .pageWrap {
height: 38px;
float: left;
overflow: hidden;border: 1px solid #ebebeb;
}
.fenye .pageWrap ul {
width: 100000px;
height: 40px;
float: left;list-style: none; overflow: hidden;
}
.fenye .pageWrap ul li:first-of-type(1){
border-left: 1px solod #ebebeb;;
}
.fenye .pageWrap ul li:hover{
background-color: #eee;
}
.fenye .pageWrap ul li {list-style: none;
width: 60px;
height: 40px;
border-right: 1px solid #ebebeb;
line-height: 40px;
box-sizing: border-box;
cursor: pointer;
float: left;
}
.fenye .pageWrap ul .sel-page {
background-color: #157fcc; color: #fff;
}
.fenye .jump-text {
width: 60px;
height: 40px;
box-sizing: border-box;
text-align: center;
margin: 0 5px;
float: left;
}
.fenye .jump-button {
margin: 0;
float: left; position: relative; z-index: 89;;
}
.fenye .total-pages,
.fenye .total-count {
margin-left: 10px;
float: left;
font-size: 14px;
}
.total-count{border: 1px solid #ebebeb;
background-color: #ffffff; padding: 0 10px;} </style> </head>
<body> <div id="tables">
<li>11 动态数据</li>
</div> <div class=" fenye" id="fenbox"></div> <div id="saa">重新初始化2</div>
<div style="padding: 10px;;">-----------------------------------</div> <div id="tables2">
<li>22 动态数据</li>
</div>
<div class=" fenye" id="fenbox2"></div> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script>
<script > (function($, window, document) {
// 定义构造函数
function Paging(el, options) {
this.el = el;
var defaults = {
pageNo: 1, // 初始页码
totalPages: 1, //总页数
totalCount: 1, // 条目总数
slideSpeed: 0, // 缓动速度
jump: false, // 支持跳转，
first:true,
callback:function() {} // 回调函数，
}; this.options = $.extend({},defaults,options)
//console.log("最喜欢总", this.options ); this.init(this.el);
}
// 给实例对象添加公共属性和方法
Paging.prototype = {
constructor: Paging,
init: function(ele) {
this.createDom();
this.bindEvents(ele);
},
createDom: function() {
var that = this,
ulDom = '',
jumpDom = '',
content = '',
liWidth = 60, // li的宽度
totalPages = that.options.totalPages||1, // 总页数
wrapLength = 0;
if(typeof totalPages!='number'||typeof totalPages<=0){
totalPages=1;
} totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth;
if(totalPages<=1){
ulDom += '<li class="sel-page">' + 1 + '</li>';
}else{
for (var i = 1; i <= that.options.totalPages; i++) { i != 1 ? ulDom += '<li>' + i + '</li>' : ulDom += '<li class="sel-page">' + i + '</li>';
}
}
that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text jumpText" ><button type="button" class="jump-button jumpBtn">跳转</button>' : jumpDom = '';
content = '<button type="button" class="turnPage firstPage first-page">首页</button>' +
'<button class="turnPage prePage" >上一页</button>' +
'<div class="pageWrap" style="width:' + wrapLength + 'px">' +
'<ul class="pageSelect" style="transition:all ' + that.options.slideSpeed + 'ms">' +
ulDom +
'</ul></div>' +
'<button class="turnPage nextPage" >下一页</button>' +
'<button type="button" class="last-page lastPage">尾页</button>' +
jumpDom +
'<p class="total-pages">共 ' +
that.options.totalPages +
' 页</p>' +
'<p class="total-count">' +
that.options.totalCount +
'</p>';
that.el.html(content);
},
bindEvents: function(ele) { var ele=ele;
var that = this,
pageSelect =ele.find('.pageSelect'), // ul
lis = pageSelect.children(), // li的集合
liWidth = lis[0]?(lis[0].offsetWidth):0, // li的宽度
totalPages = that.options.totalPages, // 总页数
pageIndex = that.options.pageNo, // 当前选择的页码
distance = 0, // ul移动距离
prePage = ele.find('.prePage'),
nextPage = ele.find('.nextPage'),
firstPage = ele.find('.firstPage'),
lastPage = ele.find('.lastPage'),
jumpBtn = ele.find('.jumpBtn'),
jumpText =ele.find('.jumpText');
// console.log(firstPage);
prePage.on('click', function() {
pageIndex--;
that.options.first=true;
if (pageIndex < 1) pageIndex = 1;
handles(pageIndex);
}) nextPage.on('click', function() {
pageIndex++;
that.options.first=true;
if (pageIndex > lis.length) pageIndex = lis.length;
handles(pageIndex);
}) firstPage.on('click', function() {
pageIndex = 1;
that.options.first=true;
handles(pageIndex);
}) lastPage.on('click', function() {
pageIndex = totalPages;
that.options.first=true;
handles(pageIndex);
}) $(document).on("click", jumpBtn, function() {
// jumpBtn.on('click', function() { var jumpNum = parseInt(jumpText.val().replace(/\D/g, ''));
if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) {
pageIndex = jumpNum;
that.options.first=true;
handles(pageIndex);
jumpText.val(jumpNum);
}
})
//$(document).on("click", lis, function() {
lis.on('click', function() {
that.options.first=true;
pageIndex = $(this).index() + 1;
handles(pageIndex);
}) function handles(pageIndex) {
//debugger;
lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page'); if(totalPages<=1){ firstPage.attr('disabled', true);
prePage.attr('disabled', true);
nextPage.attr('disabled', true);
lastPage.attr('disabled', true) ;
jumpBtn.attr('disabled', true) ;
jumpText.attr('disabled', true) ;
if(that.options.first){
that.options.callback(pageIndex);
}
return false;
} if (totalPages <= 5) {
if(that.options.first){
that.options.callback(pageIndex);
}
// console.log("222totalPages",totalPages)
return false;
}
if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
if (pageIndex == 2 || pageIndex == 1) distance = 0;
if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false);
pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false);
pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false); if(that.options.first){
that.options.callback(pageIndex);
}
}
//if(that.options.first){
handles(that.options.pageNo); // 初始化页码位置
//} }
}
$.fn.paging = function(options) {
// console.log($(this));
return new Paging($(this), options);
}
})(jQuery, window, document); </script>
<script> //http://layer.layui.com/
$(document).ready(function(){
var tables=$("#tables");
var page=1;
//ajaxDATA(1)
function ajaxDATA(page){
var urls="http://mktm.biqiang8.com/home/goods?firstCid=0&secCid=0&pageNo="+page+"&pageSize=5&exsitIdList=" $.ajax({
type: "GET",
url: urls,
dataType: "json", success: function(data){
if(data.code==0){
var htmlStr="";
//console.log(data.goods_list);
for(var i=0;i<data.data.goods_list.length;i++){
htmlStr+='<li>'+i+data.data.goods_list[i].title+'<img src="'+data.data.goods_list[i].img_url+'"</li>'
}
$("#tables").html(htmlStr);
} }
});
} var setTotalCount = 301;
var fenyeObj={
initPageNo: 1, // 初始页码
totalPages: 1, //总页数
totalCount: '合计' + 0 + '条数据', // 条目总数
slideSpeed: 600, // 缓动速度。单位毫秒
jump: true, //是否支持跳转
first:false, //初始化 是否立即执行回掉
callback: function(page) { // 回调函数
console.log("立11即查询",page);
ajaxDATA(page)
}
} $('#fenbox').paging(fenyeObj) $("#saa").on("click",function(){
setTotalCount = 71;
fenyeObj.totalCount = '合计' + setTotalCount + '条数据', // 条目总数;
fenyeObj.totalPages=24;
fenyeObj.first=false;
//console.log("立重置即查询",fenyeObj);
$('#fenbox').paging(fenyeObj)
}) var setTotalCount2 = 31;
var fenyeObj2={
initPageNo: 1, // 初始页码
totalPages: 20, //总页数
totalCount: '合计' + setTotalCount2 + '条数据', // 条目总数
slideSpeed: 600, // 缓动速度。单位毫秒
jump: true, //是否支持跳转
// first:false,
callback: function(page) { // 回调函数
console.log("立即22查询",page);
ajaxDATA(page)
}
} $('#fenbox2').paging(fenyeObj2) });
</script>
</body>
</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:;
left:;
z-index:;
background: rgba(255,255,255,.5);
transform: scale(0);
animation: ripple .6s 0s linear
}
@keyframes ripple {
100% {
opacity:;
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)
}
无缝轮播
//兼容各种浏览器
$(function(){
var w=630;
var l=0;
var timer=null;
var len=$("ul li").length*2; //复制了一份图片，长度变了。
//复制一份图片，是为了解决第一张图片切换到最后一张或 最后一张切换到第一张时，图片区域会出现空白，用户体验不友好。
// 页面一加载，就把ul定位到追加图片的第一张（本身图片在前，追加图片在后。）
//当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张,图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张,
//这样图片后面或前面还有一张图片，切换时不会留下空白。（关键之处）
//加载后图片排列像这样：1 2 3 4 5 1 2 3 4 5
$("ul").append($("ul").html()).css({'width':len*w, 'left': -len*w/2});
//自动每8秒切换一次
timer=setInterval(init,8000);
function init(){
$(".scroll .next").trigger('click'); //当页面一加载就触发next按钮的点击事件，用trigger的好处是减少重复代码,如果不用，就要把按钮click事件里代码全部复制过来，因为加载的代码和点击next按钮代码和效果相同，所以就用trigger触发执行click里面代码。
}
$("ul li").hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(init,8000);
});
$(".prev").click(function(){
l=parseInt($("ul").css("left"))+w; //这里要转成整数，因为后面带了px单位
showCurrent(l);
});
$(".next").click(function(){
l=parseInt($("ul").css("left"))-w; //这里要转成整数，因为后面带了px单位
showCurrent(l);
});
function showCurrent(l){ //把图片的左右切换封装成一个函数
if($("ul").is(':animated')){ //当ul正在执行动画的过程中，阻止执行其它动作。关键之处，不然图片切换显示不完全，到最后图片空白不显示。
return;
}
$("ul").animate({"left":l},500,function(){
if(l==0){ //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张。注意这里的设置的css一定到写在animate动画完成时的执行 //函数里。否则图片只是一瞬间回到第一张，但是没有向右的动画效果。 我在做的时候，用的不是css,而是用animate()定位到第二个第一张，结果切换时，是反方向的运动，一直觉得无论怎样，图片方向都会发生变化 ，弄得花了一天时间才找到原因，所以一定 要用css。
$("ul").css("left",-len*w/2);
}else if(l==(1-len)*w){ //图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张。从而显示的是第一份最后一张。
$("ul").css('left',(1-len/2)*w);
}
});
}
});
无缝文字上下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现无缝上下滚动</title>
<link href="css/usually.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
</head> <body>
<p class="back"><a href="index.html">返回首页>></a></p> <style>
.list_top{width:280px; height:100px; overflow:hidden; border:1px solid #ddd; padding:10px;}
.list_ul li{height:30px; line-height:30px;}
</style>
<div class="list_top">
<ul class="clearfix list_ul">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<script>
(function($){
$.fn.extend({
slideFn:function(options){
var defaults = {
isTop:true,//是否
slideTimer:"1000"
};
var options = $.extend(defaults,options);
this.each(function(){
var o = options;
var obj = $(this);
var oUl = obj.find("ul:first");
var oLi = $("li",oUl); var Timer;
obj.hover(function(){
clearInterval(Timer);
},function(){
Timer = setInterval(function(){
if(o.isTop==true){
slideTop(oUl);
}else{
slideLeft(oUl);
}
}, o.slideTimer )
}).trigger("mouseleave"); var slideTop = function(box){
var oLiHeight = box.find("li:first").height();
box.animate({"marginTop":-oLiHeight+"px"},800,function(){
box.css("marginTop",0).find("li:first").appendTo(box);
})
};//上滚
var slideLeft = function(box2){
box2.css("width",((oLi.width())*(oLi.length))+"px");
var oLiWidth = box2.find("li:first").width();
box2.animate({"marginLeft":-oLiWidth+"px"},800,function(){
box2.css("marginLeft",0).find("li:first").appendTo(box2);
})
};//左滚
})
} })
})(jQuery);
//实现无缝上下滚动 无缝左右滚动-------------------------------------------------------------- $(".list_top").slideFn();
</script> </body>
</html>
jquery 分页 下拉框的更多相关文章
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
- js,jquery获取下拉框选中的option
js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...
- Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)
Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...
- jQuery操作下拉框的text值和val值
jQuery操作下拉框的text值和val值 1,JS源码 <select name="select1" id="select1" style=" ...
- jquery获得下拉框值的代码
jquery获得下拉框值的代码 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:sele ...
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
随机推荐
- NATS_05：NATS服务器部署
1.NATS安装前的普及 NATS 的服务器是使用 GoLang 语言开发的,其可执行文件的名字为:gnatsd,表示:Go NATS Daemon.NATS服务器是一个开源软件,基于 MIT 许可证 ...
- 视音频数据处理入门：PCM音频采样数据处理
===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理 视音频数据处理 ...
- [USACO07FEB]牛的词汇The Cow Lexicon
https://daniu.luogu.org/problemnew/show/P2875 dp[i]表示前i-1个字符,最少删除多少个 枚举位置i, 如果打算从i开始匹配, 枚举单词j,计算从i开始 ...
- bzoj千题计划119：bzoj1029: [JSOI2007]建筑抢修
http://www.lydsy.com/JudgeOnline/problem.php?id=1029 把任务按截止时间从小到大排序 如果当前时间+当前任务耗时<=当前任务截止时间,把这个任务 ...
- mysql 时区设置
##查看当前时间 select curtime(); ##查看当前时区设置 show variables like "%time_zone%"; ##修改mysql全局时区为北京时 ...
- CodeForces - 1040B Shashlik Cooking
Long story short, shashlik is Miroslav's favorite food. Shashlik is prepared on several skewers simu ...
- 【leetcode 简单】 第九十七题 快乐数
写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出“Fizz”: 2. 如果 n 是5的倍数,输出“Buzz”: 3.如果 n 同时是3和5的倍数,输出 “FizzB ...
- 树形dp（A - Anniversary party HDU - 1520 ）
题目链接:https://cn.vjudge.net/contest/277955#problem/A 题目大意:略 具体思路:刚开始接触树形dp,说一下我对这个题的初步理解吧,首先,我们从根节点开始 ...
- win10安装
1.启动盘制作 首先我们需要登陆“微软中国下载中心”,从中下载一款名为“MediaCreationTool”的工具,利用该工具可以制作Win10安装U盘.直接通过以下地址快速进入“Windows下载中 ...
- weight decay（权值衰减）、momentum（冲量）和normalization
一.weight decay(权值衰减)的使用既不是为了提高你所说的收敛精确度也不是为了提高收敛速度,其最终目的是防止过拟合.在损失函数中,weight decay是放在正则项(regularizat ...