<!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>