<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0 ;padding: 0;}
ul,li{ list-style: none;}
#tables{ 100%; height: auto;; overflow: hidden; margin-bottom: 40px;;}
#tables li{list-style: none; 100px; height: 150px; overflow: hidden; border: 2px solid red; float: left; display: inline;}
#tables li img{ 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 {
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;
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 {
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="' + 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-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{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{ 100%; }
.form_content_submit{ margin: 20px auto; display: block; font-size: 16px; text-align: center; 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:table9;
}
.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-cell9;
}
.selected_icon{ position: relative; 100%; height: 100%;}
.selected_icon .check{ position:absolute;background: #157fcc;}
.selected_icon .check.plus{ left: 50%; top: 50%; margin-left: -8px; 16px; height: 1px; }
.selected_icon .check.reduce{left: 50%;top: 50%;; margin-top: -8px;; position:absolute; 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; 22px;
background:#e0e0e0;
left: 22px; top: 65px;
z-index: 26;}
.showone.on:before{ position: absolute;
content: "";
height: 22px; 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 {
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;
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 {
0;
height:0;
overflow:hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-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 {
4px;
height: 4px;
}
.filter-list::-webkit-scrollbar-track {
background: #fff
}
.filter-list::-webkit-scrollbar-thumb {
background: #CBCBCB;
}
#j_searchtask{ background: #666; padding: 10px 20px;}
</style>
<div>
<!-- 这里开始 -->
<div class="filter-box filter-box1 fl">
<div class="filter-text">
<input class="filter-title" id="j_qudao" data-val="" type="text" readonly placeholder="请选择渠道" />
<i class="icon icon-filter-arrow"></i>
</div>
<select name="filter">
<option value="new" disabled>请选择渠道</option>
<option value="11渠道1" >渠道1</option>
<option value="22渠道2">渠道2</option>
<option value="33渠道3">渠道3</option>
</select>
</div>
<!-- 这里结束 -->
<!-- 这里开始 -->
<div class="filter-box filter-box2 fl">
<div class="filter-text">
<input class="filter-title" id="j_qudao2" data-val="" type="text" readonly placeholder="请选择支付" />
<i class="icon icon-filter-arrow"></i>
</div>
<select name="filter">
<option value="new" disabled>请选类型</option>
<option value="淘宝1" >淘宝</option>
<option value="支付宝2">支付宝</option>
</select>
</div>
<!-- 这里结束 -->
<div class="right fr" class="flex1" id="j_searchtask">查询结果</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script>
<script type="text/javascript" >
;jQuery.fn.selectFilter = function(options) {
var defaults = {
callBack: function(res) {}
};
var ops = $.extend({}, defaults, options);
var selectList = $(this).find('select option');
var that = this;
var html = '';
html += '<ul class="filter-list">';
$(selectList).each(function(idx, item) {
var val = $(item).val();
var valText = $(item).html();
var selected = $(item).attr('selected');
var disabled = $(item).attr('disabled');
var isSelected = selected ? 'filter-selected' : '';
var isDisabled = disabled ? 'filter-disabled' : '';
if (selected) {
html += '<li class="' + isSelected + '" data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
$(that).find('.filter-title').val(valText);
} else if (disabled) {
html += '<li class="' + isDisabled + '" data-value="' + val + '"><a>' + valText + '</a></li>';
} else {
html += '<li data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
}
;
});
html += '</ul>';
$(that).append(html);
$(that).find('select').hide();
$(that).on('click', '.filter-text', function() {
$(that).find('.filter-list').slideToggle(100);
$(that).find('.filter-list').toggleClass('filter-open');
$(that).find('.icon-filter-arrow').toggleClass('filter-show');
});
$(that).find('.filter-list li').not('.filter-disabled').on('click', function() {
var val = $(this).data('value');
var valText = $(this).find('a').html();
$(that).find('.filter-title').val(valText);
$(that).find('.icon-filter-arrow').toggleClass('filter-show');
$(this).addClass('filter-selected').siblings().removeClass('filter-selected');
$(this).parent().slideToggle(50);
for (var i = 0; i < selectList.length; i++) {
var selectVal = selectList.eq(i).val();
if (val == selectVal) {
$(that).find('select').val(val);
}
;
}
;ops.callBack(val);
});
$(document).on('mousedown', function(e) {
closeSelect(that, e);
});
$(document).on('touchstart', function(e) {
closeSelect(that, e);
});
function closeSelect(that, e) {
var filter = $(that).find('.filter-list')
, filterEl = $(that).find('.filter-list')[0];
var filterBoxEl = $(that)[0];
var target = e.target;
if (filterEl !== target && !$.contains(filterEl, target) && !$.contains(filterBoxEl, target)) {
filter.slideUp(50);
$(that).find('.filter-list').removeClass('filter-open');
$(that).find('.icon-filter-arrow').removeClass('filter-show');
}
;
}
}
;
</script>
<script type="text/javascript">
//本小插件支持移动端哦
</script>
<script>
$(document).ready(function(){
//下拉组件
$('.filter-box1').selectFilter({
callBack : function (val){
//返回选择的值
//document.getElementById("j_qudao").setAttribute("data-val",val)
console.log(val+'-是返回的值')
}
});
//下拉组件
$('.filter-box2').selectFilter({
callBack : function (val){
//返回选择的值
//document.getElementById("j_qudao").setAttribute("data-val",val)
console.log(val+'-是返回的值')
}
});
//查询点击
$("#j_searchtask").on("click",function(){
var qudao_val=$("#j_qudao").attr("data-val");//渠道
var qudao_val2=$("#j_qudao2").attr("data-val");//渠道
alert("值-----："+qudao_val);
alert("值-----："+qudao_val2);
});
});
</script>
</body>
</html>
水波纹
!function(t, e) { "use strict"; if (void 0 === n || !n) var n = function(t) { var e = { opacity: .5, speed: .6, bgColor: "#ffffff", cursor: !0 }; this.option = this.extend(t, e), this.isltIE9() || this.init() }; n.prototype = { createEle: function(t) { return e.createElement(t) }, extend: function(t, e) { var n = JSON.parse(JSON.stringify(e)); for (var i in t) n[i] = t[i]; return n }, isltIE9: function() { return !!/MSIE6.0|MSIE7.0|MSIE8.0|MSIE9.0/i.test(navigator.userAgent.split(";")[1].replace(/[ ]/g, "")) }, getPosition: function(t) { var e = this.getBoundingClientRect() , n = Math.max(e.width, e.height); return { range: n, x: t.clientX - e.left - n / 2, y: t.clientY - e.top - n / 2 } }, loadCss: function() { var t = e.scripts , n = t[t.length - 1].src , i = n.substring(0, n.lastIndexOf("/") + 1); e.head.appendChild(function() { var t = e.createElement("link"); return t.href = i + "need/ripple.css", t.type = "text/css", t.rel = "styleSheet", t.id = "ripplecss", t }()) }, addEvent: function() { for (var t = this, n = 0; n < this.elements.length; n++) "boolean" == typeof t.option.cursor && t.option.cursor && (this.elements[n].style.cursor = "pointer"), this.elements[n].addEventListener("mousedown", function(n) { n.stopPropagation(); var i = t.getPosition.call(this, n) , o = e.createElement("span"); o.className = "ripple", o.style.top = i.y + "px", o.style.left = i.x + "px", o.style.width = i.range + "px", o.style.height = i.range + "px", o.style.animationDuration = t.option.speed + "s", o.style.background = t.option.bgColor, o.style.opacity = t.option.opacity, o.addEventListener("animationend", function() { this.parentNode.removeChild(this) }, !1), this.appendChild(o) }, !1) } }, n.prototype.init = function() { this.loadCss(); var n = this; t.onload = function() { n.elements = e.querySelectorAll('[data-ripple="ripple"]'), n.addEvent() } } , t.Ripple = n }(window, document);
css
[data-ripple=ripple] { position: relative; overflow: hidden; -webkit-user-select: none; -moz-webkit-user-select: none; -ms-user-select: none } [data-ripple=ripple] .ripple { display: block; width: 100%; height: 100%; border-radius: 100%; position: absolute; top: 0; left: 0; z-index: 888; background: rgba(255,255,255,.5); transform: scale(0); animation: ripple .6s 0s linear } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5) } }
效果
<!DOCTYPE html> <html lang="en"> <head> <title>Demo</title> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style type="text/css"> *{ margin:0; padding: 0; } div,a,button,h1{ background: blue; height: 50px; line-height: 50px; color: #fff; text-align: center; width: 200px; margin: 5px; border-radius: 5px; font-size:14px ; font-family: "微软雅黑","Arial Narrow" } a{ display: block; } </style> </head> <body> <div data-ripple="ripple"> div标签 </div> <a data-ripple="ripple"> a标签 </a> <button data-ripple="ripple"> button标签 </button> <h1 data-ripple="ripple"> h1标签 </h1> </body> </html> <script src="ripple.min.js" charset="UTF-8"></script> <script type="text/javascript"> new Ripple({ opacity : 0.6, //水波纹透明度 speed : 1, //水波纹扩散速度 bgColor : "#fff", //水波纹颜色 cursor : true //是否显示手型指针 }) </script>
摇一摇 函数
/* * Author: Alex Gibson * https://github.com/alexgibson/shake.js * License: MIT license */ (function(global, factory) { if (typeof define === 'function' && define.amd) { define(function() { return factory(global, global.document); }); } else if (typeof module !== 'undefined' && module.exports) { module.exports = factory(global, global.document); } else { global.Shake = factory(global, global.document); } } (typeof window !== 'undefined' ? window : this, function (window, document) { 'use strict'; function Shake(options) { //feature detect this.hasDeviceMotion = 'ondevicemotion' in window; this.options = { threshold: 15, //default velocity threshold for shake to register timeout: 1000 //default interval between events }; if (typeof options === 'object') { for (var i in options) { if (options.hasOwnProperty(i)) { this.options[i] = options[i]; } } } //use date to prevent multiple shakes firing this.lastTime = new Date(); //accelerometer values this.lastX = null; this.lastY = null; this.lastZ = null; //create custom event if (typeof document.CustomEvent === 'function') { this.event = new document.CustomEvent('shake', { bubbles: true, cancelable: true }); } else if (typeof document.createEvent === 'function') { this.event = document.createEvent('Event'); this.event.initEvent('shake', true, true); } else { return false; } } //reset timer values Shake.prototype.reset = function () { this.lastTime = new Date(); this.lastX = null; this.lastY = null; this.lastZ = null; }; //start listening for devicemotion Shake.prototype.start = function () { this.reset(); if (this.hasDeviceMotion) { window.addEventListener('devicemotion', this, false); } }; //stop listening for devicemotion Shake.prototype.stop = function () { if (this.hasDeviceMotion) { window.removeEventListener('devicemotion', this, false); } this.reset(); }; //calculates if shake did occur Shake.prototype.devicemotion = function (e) { var current = e.accelerationIncludingGravity; var currentTime; var timeDifference; var deltaX = 0; var deltaY = 0; var deltaZ = 0; if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) { this.lastX = current.x; this.lastY = current.y; this.lastZ = current.z; return; } deltaX = Math.abs(this.lastX - current.x); deltaY = Math.abs(this.lastY - current.y); deltaZ = Math.abs(this.lastZ - current.z); if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) { //calculate time in milliseconds since last shake registered currentTime = new Date(); timeDifference = currentTime.getTime() - this.lastTime.getTime(); if (timeDifference > this.options.timeout) { window.dispatchEvent(this.event); this.lastTime = new Date(); } } this.lastX = current.x; this.lastY = current.y; this.lastZ = current.z; }; //event handler Shake.prototype.handleEvent = function (e) { if (typeof (this[e.type]) === 'function') { return this[e.type](e); } }; return Shake; }));
其他
360 科学技术
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title>主页</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <link rel="stylesheet" href="css/tabris.css"> <link rel="stylesheet" href="css/lib.css"> </head> <body> <div class="bg0 pa"> <div class="bg1"></div> </div> <div class="hx-box pa"> <ul class="pr"> <li class="hx-k1 pa0"> <span></span> </li> <li class="hx-k2 pa0"> <span></span> </li> <li class="hx-k3 pa0"> <span></span> </li> </ul> </div> </body> </html>
@charset 'utf-8';article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary { display: block } hr,img { border: 0 } pre,textarea { overflow: auto } hr,legend,td,th { padding: 0 } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { color: #333; font-size: 1em; line-height: 1.42857143; font-family: Helvetica,hiragino sans gb,microsoft yahei,微软雅黑,Arial,sans-serif } body,form,h1,h2,h3,h4,h5,h6,ol,p,ul { margin: 0 } ol,ul { padding-left: 0; list-style-type: none } h1,h2,h3,h4,h5,h6 { font-size: 1em; font-weight: 400 } a { text-decoration: none; background-color: transparent; color: inherit } a:active,a:hover { outline: 0 } li { list-style: none } audio,canvas,progress,video { display: inline-block; vertical-align: baseline } .vm,audio,canvas,iframe,img,svg,video { vertical-align: middle } audio:not([controls]) { display: none; height: 0 } [hidden],template { display: none } abbr[title] { border-bottom: 1px dotted } b,optgroup,strong { font-weight: 700 } dfn { font-style: italic } mark { background: #ff0; color: #000 } small { font-size: 80% } sup { top: -.5em } sub { bottom: -.25em } svg:not(:root) { overflow: hidden } figure { margin: 1em 40px } hr { height: 1px; border-top: 1px solid #ccc; margin: 1em 0 } code,kbd,pre,samp { font-family: monospace,monospace; font-size: 1em } button,input,optgroup,select,textarea { color: inherit; font: inherit; margin: 0 } button { overflow: visible } button,select { text-transform: none } button,html input[type=button],input[type=reset],input[type=submit] { -webkit-appearance: button; cursor: pointer } button[disabled],html input[disabled] { cursor: default } button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0 } input { line-height: normal } input[type=checkbox],input[type=radio] { box-sizing: border-box; padding: 0 } input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { height: auto } input[type=search] { -webkit-appearance: textfield; box-sizing: content-box } input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { -webkit-appearance: none } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } legend { border: 0 } textarea { resize: vertical } table { border-collapse: collapse; border-spacing: 0 } ::-moz-selection { background: #b3d4fc; text-shadow: none } ::selection { background: #b3d4fc; text-shadow: none } .browserupgrade { margin: .2em 0; background: #ccc; color: #000; padding: .2em 0 } .dv { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; 1px } .dv.dvv:active,.dv.dvv:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; 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 { 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 { 100%; height: 100% } body { 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 { 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../images/bg0.png) no-repeat center center; background-size: 150% } .bg1 { 100%; height: 100%; background: url(../images/bg1.png) no-repeat center center } .hx-box { top: 50%; left: 50%; 500px; height: 500px; transform-style: preserve-3d; transform: translate(-50%,-50%) rotateY(75deg) } .hx-box ul { 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 { 500px; height: 500px; border: 4px solid #5ec0ff; border-radius: 1e3px } .hx-box ul li span { display: block; 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{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>