1.倒计时：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="apple-mobile-web-app-capable" content="no"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="format-detection" content="telephone=no,email=no"/>
<meta name="apple-mobile-web-app-status-bar-style" content="white"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-control" content="no-cache"/>
<meta http-equiv="Cache" content="no-cache"/>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="time-item">
<div class="time-item" id="msg"><h1>备注：请使用微信扫码扫一扫</h1> </div>
<strong id="hour_show">0时</strong>
<strong id="minute_show">0分</strong>
<strong id="second_show">0秒</strong>
</div>
<!--注意下面加载顺序 顺序错乱会影响业务-->
<script>
$(document).ready(function () {
$(function () {
timer(360);
});
//定时检测订单支付情况
var myTimer;
function timer(intDiff) {
var i = 0;
myTimer = window.setInterval(function () {
i++;
var day = 0,
hour = 0,
minute = 0,
second = 0;//时间默认值
if (intDiff > 0) {
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if ((intDiff-1) % 20 == 0) {
checkOrder();
}
if (minute <= 9)
minute = '0' + minute;
if (second <= 9)
second = '0' + second;
$('#hour_show').html('<s id="h"></s>' + hour + '时');
$('#minute_show').html('<s></s>' + minute + '分');
$('#second_show').html('<s></s>' + second + '秒');
if (hour <= 0 && minute <= 0 && second <= 0) {
qrcode_timeout()
clearInterval(myTimer);
}
intDiff--;
}, 1000);
}
qrcode_timeout = function () { //二维码超时则停止显示二维码
//事件
}
checkOrder = function () { //获取订单状态
//事件
}
});
</script>
</body>
</html>
2.点击图片放大：（替换相应的class 和ID即可）
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片展示及切换-wangdahai.cn</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> * { margin:0; padding:0; list-style:none; } .imgbox { 640px; height:220px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .imgbox li { 150px; height:100px; margin:10px 0px 0px 10px; float:left; } .imgbox li img { 100%; height:100%; display:block; } .showimg { 600px; height:400px; position:absolute; left:0; right:0; top:0; margin:auto; bottom:0; background:#fff; box-shadow:0px 0px 0px 1000px rgba(0,0,0,0.7); z-index:10; transform:scale(0,0); transition:transform 1s; } .showimg img { 100%; height:100%; } .btnL,.btnR { 100px; height:200px; position:absolute; top:0; bottom:0; margin:auto; } .btnL { background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/left2.png); background-size:100px 200px; left:0; } .btnR { background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/right2.png); background-size:100px 200px; right:0; } .close { 50px; height:50px; background:url(http://www.jq22.com/tp/45f352e9-fc7f-44ed-9990-2a100a0c422b.png); background-size:50px 50px; border-radius:50%; position:absolute; right:-25px; top:-25px; } body .active { transform:scale(1,1); } </style> </head> <body> <ul class="imgbox"> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-1.png" alt=""></li> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-2.png" alt=""></li> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-3.png" alt=""></li> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-4.png" alt=""></li> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-5.png" alt=""></li> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-6.png" alt=""></li> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-7.png" alt=""></li> <li class="img_li"><img class="images" src="http://www.jq22.com/img/cs/500x300-8.png" alt=""></li> </ul> <div class="showimg"> <img id="imgage_id" src="" alt=""> <div class="btnL"></div> <div class="btnR"></div> <div class="close"></div> </div> <script> var imgbox = $('.imgbox'); var lise = $('li', imgbox);//li可以换成元素的class,如：var lise = $('.img_li', imgbox); var show = $('.showimg'); var leftbtn = $('.btnL'); var rightbtn = $('.btnR'); var close = $('.close'); var num = 0; $(document).ready(function() { var num = $(this).index(); lise.on('click', function() { var src = $('img', this).prop('src');//img可以换为class,如：var src = $('.images', this).prop('src'); $('img', show).prop('src', src);//img可以换为class,如：var src = $('#imgage_id', this).prop('src'); show.addClass('active'); }) close.click(function() { show.removeClass('active'); }) rightbtn.click(function() { num++; if (num >= lise.length) { num = 0; } var url = lise.eq(num).find('img').prop('src'); $('img', show).prop('src', url);//img可以换为class,如：var src = $('#imgage_id', this).prop('src'); }) leftbtn.click(function() { num--; if (num <= 0) { num = lise.length; } var url = lise.eq(num).find('img').prop('src'); $('img', show).prop('src', url);//img可以换为class,如：var src = $('#imgage_id', this).prop('src'); }) }) </script> </body> </html>
3.点击图片放大缩小：
<!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" /> <script src='jquery.js' /></script> <script src='zoom.js' /></script> <title>点击图片放大</title> <style type="text/css"> .bgimg{background:url(../img/bg.png);} .bigimg{600px;position: fixed;left: 0;top: 0; right: 0;bottom: 0;margin:auto;display: none;z-index:99999;border: 10px solid #fff;} .mask{position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: #000;opacity:0.5;filter: Alpha(opacity=50);z-index: 9999;transition:all 1s;display: none} .bigbox{40px;background: #fff;border:1px solid #ededed;margin:0 auto;border-radius: 5px;overflow: hidden;} .bigbox>.imgbox{40px;height:60px;float:left;border-radius:5px;overflow: hidden;} .bigbox>.imgbox>img{100%;} .imgbox:hover{cursor:zoom-in} .mask:hover{cursor:zoom-out} .mask>img{position: fixed;right:10px;top: 10px; 26px;} .mask>img:hover{cursor:pointer} </style> </head> <body> <div class="bigbox"> <div class="imgbox"> <img src="./aa.png" style='100%;' class="smallimg" alt=""> </div> </div> <img src="" alt="" class="bigimg" id='bigimgid' style='600px;'> <div class="mask"> <img src="./cc.png" alt=""> </div> </body> <script> $(document).ready(function () { //图片放大 var obj = new zoom('mask', 'bigimg','smallimg'); obj.init(); }) </script> </html>
zoom.js:
function zoom(mask,bigimg,smallimg){this.bigimg=bigimg;this.smallimg=smallimg;this.mask=mask}zoom.prototype={init:function(){var that=this;this.smallimgClick();this.maskClick();this.mouseWheel()},smallimgClick:function(){var that=this;$("."+that.smallimg).click(function(){$("."+that.bigimg).css({height:$("."+that.smallimg).height()*8.5,$("."+that.smallimg).width()*8.5});$("."+that.mask).fadeIn();$("."+that.bigimg).attr("src",$(this).attr("src")).fadeIn()})},maskClick:function(){var that=this;$("."+that.mask).click(function(){$("."+that.bigimg).fadeOut();$("."+that.mask).fadeOut()})},mouseWheel:function(){function mousewheel(obj,upfun,downfun){if(document.attachEvent){obj.attachEvent("onmousewheel",scrollFn)}else{if(document.addEventListener){obj.addEventListener("mousewheel",scrollFn,false);obj.addEventListener("DOMMouseScroll",scrollFn,false)}}function scrollFn(e){var ev=e||window.event;var dir=ev.wheelDelta||ev.detail;if(ev.preventDefault){ev.preventDefault()}else{ev.returnValue=false}if(dir==-3||dir==120){upfun()}else{downfun()}}}var that=this;mousewheel($("."+that.bigimg)[0],function(){if($("."+that.bigimg).innerWidth()>$("body").width()-20){alert("不能再放大了");return}if($("."+that.bigimg).innerHeight()>$("body").height()-50){alert("不能再放大");return}var zoomHeight=$("."+that.bigimg).innerHeight()*1.03;var zoomWidth=$("."+that.bigimg).innerWidth()*1.03;$("."+that.bigimg).css({height:zoomHeight+"px",zoomWidth+"px"})},function(){if($("."+that.bigimg).innerWidth()<100){alert("不能再缩小了哦！");return}if($("."+that.bigimg).innerHeight()<100){alert("不能再缩小了哦！");return}var zoomHeight=$("."+that.bigimg).innerHeight()/1.03;var zoomWidth=$("."+that.bigimg).innerWidth()/1.03;$("."+that.bigimg).css({height:zoomHeight+"px",zoomWidth+"px"})})}};
zoom.js中调整图片大小：
4.触底跳转：
// window.onscroll = function () { // //监听事件内容 // if($(document).height() == $(window).height() + $(window).scrollTop()){ // window.location.href = "http://www.xxxx.com"; // } // }
5.JS获取随机数：
var nn = fRandomBy(10,20);alert(nn); function fRandomBy(under, over){ switch(arguments.length){ case 1: return parseInt(Math.random()*under+1); case 2: return parseInt(Math.random()*(over-under+1) + under); default: return 0; } }
6.JS数字动态增长：
$(function(){ var num = 1000; (function(){ var v=parseInt($('.word').html()); if(v<num){ // 改这里,word这个元素里面的数字一直增长到num $word_th.html(++v); setTimeout(arguments.callee,30); // 每30毫秒增长一次 } })(); });
7.JS数字动态减少：
//$('.word-3').html()的内容5秒一变,初始10000 setInterval(function(){ var i=fRandomBys(-1900,1900); var ii = word_3+i; $(".word-3").html(ii); }, 5000); // 每秒执行一次 function fRandomBys(under, over){ switch(arguments.length){ case 1: return parseInt(Math.random()*under+1); case 2: return parseInt(Math.random()*(over-under+1) + under); default: return 0; } }
8.侧边栏插件一：
<!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> <script src="jquery-1.11.3.min.js"></script> <style> /*重置一些样式*/ *, *::after, *::before { box-sizing: border-box; /*padding: 0;*/ margin: 0; font-size: 14px; } .cd-vertical-nav ul{ list-style: none; } a { color: #c0a672; text-decoration: none; } .nav{ height: 80px; } .cd-image-replace { /* 小屏显示的图标 */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; } /* -------------------------------- 小屏时的图标样式，和小图标响应式的显示与隐藏 -------------------------------- */ .cd-nav-trigger { display: block; position: fixed; z-index: 2; bottom: 30px; right: 5%; height: 44px; width: 44px; border-radius: 0.25em; background: rgba(9, 150,90, 0.9); /* reset button style */ cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: none; outline: none; } .cd-nav-trigger span { position: absolute; height: 4px; width: 4px; background-color: #3a2c41; border-radius: 50%; left: 50%; top: 50%; bottom: auto; right: auto; transform: translateX(-50%) translateY(-50%); } .cd-nav-trigger span::before, .cd-nav-trigger span::after { content: ''; position: absolute; left: 0; height: 100%; width: 100%; background-color: #3a2c41; border-radius: inherit; } .cd-nav-trigger span::before { top: -9px; } .cd-nav-trigger span::after { bottom: -9px; } @media only screen and (min- 768px) { .cd-nav-trigger { display: none; } } /* -------------------------------- 导航条的背景等属性 -------------------------------- */ /*移动优先原则 这里是小屏时的导航*/ .cd-vertical-nav { position: fixed; z-index: 1; right: 5%; bottom: 30px; width: 90%; max- 400px; max-height: 90%; overflow-y: auto; transform: scale(0); transform-origin: right bottom; transition: transform 0.2s; border-radius: 0.25em; background-color: rgba(9, 9, 9, 0.9); } .cd-vertical-nav li{ height:auto; } .cd-vertical-nav a { display: block; padding: 1em; color: #3a2c41; font-weight: bold; border-bottom: 1px solid rgba(58, 44, 65, 0.1); } .cd-vertical-nav a.active { color: #c0a672; } .cd-vertical-nav.open { transform: scale(1); z-index: 10; -webkit-overflow-scrolling: touch; } .cd-vertical-nav.open + .cd-nav-trigger { background-color: transparent; } .cd-vertical-nav.open + .cd-nav-trigger span { background-color: rgba(58, 44, 65, 0); } .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after { /* 给点击后的按钮做叉号（×）样式 */ height: 3px; width: 20px; border-radius: 0; left: -8px; } .cd-vertical-nav.open + .cd-nav-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1px; } .cd-vertical-nav.open + .cd-nav-trigger span::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); bottom: 0; } @media only screen and (min- 768px) { .cd-vertical-nav { /* pc端展示的效果，首先重置一下样式 */ right: 0; top: 0; bottom: auto; text-align: center; /*这里的vh是相对可视屏幕的高度，100vh表示高度始终等于浏览器可是高度*/ height: 100vh; width: 90px; max- none; max-height: none; transform: scale(1); background-color: transparent; overflow: hidden; /* 下面通过flex弹性盒子，让内容的主轴线编程垂直的。 然后通过修改主轴的元素排列方式让他们居中*/ display: flex; flex-direction: column; justify-content: center; } /*下面通过调节内容的缩放比和padding，margin等属性来调节个选项间的距离，实现动画效果*/ .cd-vertical-nav::before { /* 背景色 */ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: translateX(100%); transition: transform 0.4s; } .cd-vertical-nav:hover::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-vertical-nav ul { vertical-align: middle; text-align: center; padding-left: 15px; } .cd-vertical-nav a { position: relative; padding: 0.5em 0 0; margin:0 auto; border-bottom: none; font-size: 1.2rem; color: #eaf2e3; transition: all .5s; } .cd-vertical-nav a.active i{ background-color: #00a58c; color: #ffffff; } .cd-vertical-nav a.active span{ color: #00a58c; } .cd-vertical-nav a.active::before, .cd-vertical-nav a:hover::before { background-color: #c0a672; } .cd-vertical-nav .label { display: block; opacity: 0; transform: translateX(150%); height: 0; transition: all 0.5s; } .cd-vertical-nav:hover .label { height:auto; opacity: 1; transform: translateX(0); padding-top: 5px; } .cd-vertical-nav:hover a { padding: 1em 0 0; margin-top: 0.8em; margin-right: 15px; } .cd-vertical-nav i{ display: inline-block; width: 32px; height: 32px; font-size: 18px; line-height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #0a9dc7; background-color: #fff; transform: scale(0.3); transition: all 0.3s; } .cd-vertical-nav:hover i{ transform: scale(1); } } /*配合页面css*/ section{ height: 100vh; } section:nth-of-type(2n){ background-color: #ff0000; } section:nth-of-type(2n+1){ background-color: #ffff00; } </style> </head> <body> <div class="nav">这是顶部的导航</div> <nav class="cd-vertical-nav navbar collapse"> <ul> <li><a data-scroll href="#tab1" class="active"><i class="iconfont icon-shouyeshouye"></i><span class="label">首页</span></a></li> <li><a data-scroll href="#tab2"><i class="iconfont icon-guanyu"></i><span class="label">关于</span></a></li> <li><a data-scroll href="#tab3"><i class="iconfont icon-jineng"></i><span class="label">技能</span></a></li> <li><a data-scroll href="#tab4"><i class="iconfont icon-gongzuojingyan"></i><span class="label">工作经验</span></a></li> </ul> </nav> <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button> <section id="tab1"></section> <section id="tab2"></section> <section id="tab3"></section> <section id="tab4"></section> </body> <script> $(function(){ var a =$("section"); //获取每个大块的元素 var b = []; for (i=0;i< a.length;i++){ b[i]=a[i].offsetTop; //把每个大块距离页面最顶部的距离，赋给b数组 } var c = $(window).scrollTop();//页面刷新是获取滚动条的位置 if(c>=80){ //顶部导航栏高80；顶部导航消失的时候让侧边导航出来 $(".cd-vertical-nav").show(); if(window.innerWidth<768){ //小屏的情况下让按钮隐藏/出现 $(".cd-nav-trigger").show();} }else { //否则让它隐藏 $(".cd-vertical-nav").hide(); if(window.innerWidth<768) { $(".cd-nav-trigger").hide(); } } $(window).scroll(function(){ //监听滚动条的滚动事件 c = $(window).scrollTop(); //实时监听滚动条位置 if(c>=80){ //页面滚动时，判断滚动条位置，控制侧边导航的隐显 $(".cd-vertical-nav").show(); if(window.innerWidth<768){ $(".cd-nav-trigger").show();} }else { $(".cd-vertical-nav").hide(); $(".cd-nav-trigger").hide(); } //下面是判断页面所处位置，实时更新导航条，是导航栏选项跟页面同步 for (i=0;i< a.length;i++){ var d =c-b[i]; //c是滚动条位置，b是元素到页面顶部的距离，d表示当前浏览器顶部所处的位置。 var e = a[i].offsetHeight; //获取元素的高度 var f = a[i].id; //获取元素的id var g = $(".cd-vertical-nav a[href='#"+f+"']"); //拼接字符串，通过属性选择器找到当前所处页面对应的超链接 if (d>=0&&d<e){ if(g.hasClass("active")){ //如果当前元素本就处于激活状态直接break break; } //如果当前页面没有处于激活状态，就将正在激活的移出激活的样式表 $(".cd-vertical-nav .active").removeClass("active"); g.addClass("active"); //给当前需要激活的属性添加激活样式表 break; } } }); }) //下面为小屏时通过点击按钮开关导航栏， $(".cd-nav-trigger").on("click",function(){ //处于open状态，就关闭 if($(".cd-vertical-nav").hasClass("open")) $(".cd-vertical-nav").removeClass("open"); //反之打开 else $(".cd-vertical-nav").addClass("open"); }) //选中导航某一项后，关闭导航栏 $(".cd-vertical-nav a").on("click",function(){ $(".cd-vertical-nav").removeClass("open"); }) </script> </html>
9.侧边栏插件二：
index.html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery网站侧边隐藏展开导航插件 - 站长素材</title> <link rel="stylesheet" type="text/css" href="fancynav/css/fancynav.min.css"> </head> <body> <div class="opener"><span data-fancynav-header="My cool company name">Navigation Header</span></div> <div class="wrapper"> <ul class="demolist fancynav-add" style="display: none"> <li><a href="index.html">Item #1</a></li> <li><a href="index.html">Item #2</a></li> <li><a href="index.html">Item #3</a></li> <li><a href="index.html">Item #4</a></li> </ul> </div> <script type="text/javascript" src="assets/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="fancynav/js/jquery.fancynav.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.demo-buttons span, .opener > span').fancynav(); }); </script> </body> </html>
fancynav.min.css:
/** * FancyNav - Mobile Navigation with CSS3 Transitions * http://kratzik.com/fancynav * Copyright (c) 2017 Johann Kratzik * Version 1.0.0 */ .fancynav-inner,.fancynav-mainnav,.fancynav-subnav,.fancynav-overlay{-moz-transition:all .5s;-o-transition:all .5s;-webkit-transition:all .5s;transition:all .5s}.fancynav-outer{position:relative;overflow:hidden;min-height:100vh;background:rgba(68,68,68,0.3)}.fancynav-inner{background:#fff;min-height:100vh;position:relative;z-index:999}.fancynav-mainnav{position:absolute;left:0;top:0;bottom:0;300px;z-index:1001;visibility:hidden;background:#444}.fancynav-header{font-size:18px;color:#fff;overflow:hidden;background:rgba(0,0,0,0.2)}.fancynav-header::before,.fancynav-header::after{display:table;content:" "}.fancynav-header::after{clear:both}.fancynav-title{float:left;padding:15px}.fancynav-close{float:right;50px;text-align:center;padding:15px 0;font-size:16px;font-weight:700;color:#fff;line-height:1.2;cursor:pointer}.fancynav-close::before{content:"2715"}.fancynav-mainnav ul{margin:0;padding:0;list-style-type:none;border-top:1px solid rgba(0,0,0,0.3)}.fancynav-mainnav > ul{position:relative;z-index:1}.fancynav-mainnav ul > li{border-bottom:1px solid rgba(0,0,0,0.3)}.fancynav-mainnav ul > li > a{display:block;padding:15px 60px 15px 15px;position:relative;color:#fff;font-size:16px;line-height:1.2;text-decoration:none}.fancynav-subnav{position:absolute;left:0;top:0;z-index:1;100%;height:100vh;background:#444;visibility:hidden;-moz-transform:translate(-100%,0);-0-transform:translate(-100%,0);-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.fancynav-subnav-active{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-next{position:absolute;top:0;right:0;50px;height:100%;cursor:pointer;color:#fff;background:rgba(0,0,0,0.1)}.fancynav-next::before,.fancynav-next::after{content:' ';position:absolute;10px;height:2px;left:20px;top:50%;background:#fff;border-radius:1px}.fancynav-next::before{margin-top:-5px;-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancynav-next::after{margin-top:1px;-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.fancynav-back{box-sizing:border-box;position:relative;font-size:13px;line-height:1;font-weight:700;padding:10px 15px 10px 45px;display:block;text-transform:uppercase;color:#fff;cursor:pointer;background:rgba(0,0,0,0.1)}.fancynav-back::before,.fancynav-back::after{content:' ';position:absolute;10px;height:2px;left:15px;top:50%;background:#fff;border-radius:1px}.fancynav-back::before{margin-top:-5px;-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.fancynav-back::after{margin-top:1px;-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancynav-overlay{visibility:hidden;position:absolute;left:0;top:0;100%;height:100%;z-index:1000;background:rgba(68,68,68,0.3);cursor:pointer}.fancynav .fancynav-overlay{visibility:visible}.fancynav-blue .fancynav-mainnav,.fancynav-blue .fancynav-subnav{background:#336ca6}.fancynav-blue .fancynav-outer,.fancynav-blue .fancynav-overlay{background:rgba(51,108,166,0.3)}.fancynav-green .fancynav-mainnav,.fancynav-green .fancynav-subnav{background:#48a770}.fancynav-green .fancynav-outer,.fancynav-green .fancynav-overlay{background:rgba(72,167,112,0.3)}.fancynav-animation-slide-top .fancynav-mainnav{-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.fancynav-animation-slide-top.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-slide-along .fancynav-mainnav{-moz-transform:translate(-50%,0);-o-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.fancynav-animation-slide-along.fancynav-opened .fancynav-mainnav{visibility:visible;z-index:999;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-slide-along .fancynav-inner{z-index:1001}.fancynav-animation-slide-along.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-slide-reverse .fancynav-mainnav{-moz-transform:translate(100%,0);-o-transform:translate(100%,0);-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.fancynav-animation-slide-reverse.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-slide-reverse .fancynav-inner{z-index:1001}.fancynav-animation-slide-reverse.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-reveal.fancynav-opened .fancynav-mainnav{visibility:visible}.fancynav-animation-reveal .fancynav-inner{z-index:1001}.fancynav-animation-reveal.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-push .fancynav-mainnav{-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.fancynav-animation-push.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-push .fancynav-inner{z-index:1001}.fancynav-animation-push.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-rotate-in .fancynav-mainnav{-moz-transform:translate(-100%,0) rotateY(-90deg);-o-transform:translate(-100%,0) rotateY(-90deg);-webkit-transform:translate(-100%,0) rotateY(-90deg);-ms-transform:translate(-100%,0) rotateY(-90deg);transform:translate(-100%,0) rotateY(-90deg);-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.fancynav-animation-rotate-in.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0) rotateY(0);-o-transform:translate(0,0) rotateY(0);-webkit-transform:translate(0,0) rotateY(0);-ms-transform:translate(0,0) rotateY(0);transform:translate(0,0) rotateY(0)}.fancynav-animation-rotate-in .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-rotate-in.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-rotate-out .fancynav-mainnav{-moz-transform:translate(-100%,0) rotateY(90deg);-o-transform:translate(-100%,0) rotateY(90deg);-webkit-transform:translate(-100%,0) rotateY(90deg);-ms-transform:translate(-100%,0) rotateY(90deg);transform:translate(-100%,0) rotateY(90deg);-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.fancynav-animation-rotate-out.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0) rotateY(0);-o-transform:translate(0,0) rotateY(0);-webkit-transform:translate(0,0) rotateY(0);-ms-transform:translate(0,0) rotateY(0);transform:translate(0,0) rotateY(0)}.fancynav-animation-rotate-out .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-rotate-out.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-rotate-delayed .fancynav-mainnav{-moz-transform:translate3d(-100%,0,0) rotateY(90deg);-o-transform:translate3d(-100%,0,0) rotateY(90deg);-webkit-transform:translate3d(-100%,0,0) rotateY(90deg);-ms-transform:translate3d(-100%,0,0) rotateY(90deg);transform:translate3d(-100%,0,0) rotateY(90deg);-moz-transform-origin:0 50%;-o-transform-origin:0 50%;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.fancynav-animation-rotate-delayed.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transition-delay:.1s;-o-transition-delay:.1s;-webkit-transition-delay:.1s;transition-delay:.1s;-moz-transform:translate3d(0,0,0) rotateY(0deg);-o-transform:translate3d(0,0,0) rotateY(0deg);-webkit-transform:translate3d(0,0,0) rotateY(0deg);-ms-transform:translate3d(0,0,0) rotateY(0deg);transform:translate3d(0,0,0) rotateY(0deg)}.fancynav-animation-rotate-delayed .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-rotate-delayed .fancynav-inner{z-index:1001}.fancynav-animation-rotate-delayed.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}.fancynav-animation-scale-up .fancynav-mainnav{-moz-transform:translate3d(0,0,-300px);-o-transform:translate3d(0,0,-300px);-webkit-transform:translate3d(0,0,-300px);-ms-transform:translate3d(0,0,-300px);transform:translate3d(0,0,-300px);-moz-perspective:1000px;-webkit-perspective:1000px;perspective:1000px}.fancynav-animation-scale-up.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fancynav-animation-scale-up .fancynav-outer{-moz-perspective:1500px;-webkit-perspective:1500px;perspective:1500px;-moz-perspective-origin:0 50%;-webkit-perspective-origin:0 50%;perspective-origin:0 50%}.fancynav-animation-scale-up .fancynav-inner{-moz-perspective:1000px;-webkit-perspective:1000px;perspective:1000px;z-index:1001}.fancynav-animation-scale-up.fancynav-opened .fancynav-inner{-moz-transform:translate3d(300px,0,0);-o-transform:translate3d(300px,0,0);-webkit-transform:translate3d(300px,0,0);-ms-transform:translate3d(300px,0,0);transform:translate3d(300px,0,0)}.fancynav-animation-fall-down .fancynav-mainnav{-moz-transform:translate(0,-100%);-o-transform:translate(0,-100%);-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%)}.fancynav-animation-fall-down.fancynav-opened .fancynav-mainnav{visibility:visible;-moz-transform:translate(0,0);-o-transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fancynav-animation-fall-down .fancynav-inner{z-index:1001}.fancynav-animation-fall-down.fancynav-opened .fancynav-inner{-moz-transform:translate(300px,0);-o-transform:translate(300px,0);-webkit-transform:translate(300px,0);-ms-transform:translate(300px,0);transform:translate(300px,0)}
jquery.fancynav.min.js:
/** * FancyNav - Mobile Navigation with CSS3 Transitions * http://kratzik.com/fancynav * Copyright (c) 2017 Johann Kratzik * Version 1.0.0 */ !function(a,b){"use strict";function c(b,c){this.options=c,this.$currentLink=b,this.$rootBody=a("body"),void 0!==b.data("fancynav-add")&&(this.options=a.extend({},this.options,{add:b.data("fancynav-add")})),void 0!==b.data("fancynav-animation")&&(this.options=a.extend({},this.options,{animation:b.data("fancynav-animation")})),void 0!==b.data("fancynav-class")&&(this.options=a.extend({},this.options,{navClass:b.data("fancynav-class")})),void 0!==b.data("fancynav-header")&&(this.options=a.extend({},this.options,{navHeader:b.data("fancynav-header")})),void 0!==b.data("fancynav-back")&&(this.options=a.extend({},this.options,{backText:b.data("fancynav-back")})),this.init()}c.prototype={init:function(){this.initNavLinkEvents()},initNavLinkEvents:function(){var a=this;this.$currentLink.on("click",function(b){b.preventDefault(),a.initPageLayout(),a.generateNavBlock(),setTimeout(function(){a.$rootBody.addClass("fancynav-opened")},10)})},initPageLayout:function(){this.$outerWrap=a('<div class="fancynav-outer"></div>'),this.$innerWrap=a('<div class="fancynav-inner"></div>'),this.$innerWrap.append(this.$rootBody.contents()),this.$outerWrap.append(this.$innerWrap),this.$rootBody.append(this.$outerWrap),this.initOverlay()},initOverlay:function(){var b=this;this.pageOverlay=a('<div class="fancynav-overlay">'),this.pageOverlay.on("click",function(a){b.destroy()}),this.$innerWrap.append(this.pageOverlay)},generateNavBlock:function(){var b=this;this.$mainNavContent=a('<nav class="fancynav-mainnav"></nav>'),this.$mainNav=a("<ul>"),b.$rootBody.addClass("fancynav fancynav-animation-"+b.options.animation),b.options.navClass&&b.$rootBody.addClass(b.options.navClass),this.$navHeader=a('<header class="fancynav-header"></header>'),this.$navTitle=a('<div class="fancynav-title"></div>'),this.$navTitle.text(b.options.navHeader),this.$navCloser=a('<span class="fancynav-close"></span>'),this.$navCloser.on("click",function(a){b.destroy()}),this.navBlocksClone=this.convertIntoArray(this.options.add),this.navBlocksClone.forEach(function(c){var d=a(c).clone();b.setNavLinksFromClone(d.contents())}),this.customizeNavBlock(),this.$mainNavContent.prepend(this.$navHeader).append(this.$mainNav),this.$outerWrap.prepend(this.$mainNavContent),this.$navHeader.prepend(this.$navTitle).append(this.$navCloser),this.listItems=a("li",this.$mainNavContent),this.listItems.each(function(b){var c=b+1;a(this).addClass("fancynav-item-"+c)})},convertIntoArray:function(b){if("string"==typeof b){var c=a.map(b.split(","),a.trim);return c}return b},setNavLinksFromClone:function(a){this.$mainNav.append(a)},customizeNavBlock:function(){var b=this,c=this.$mainNav.find('li:has("ul")');c.each(function(){var c=a(this),d=c.find("> a"),e=c.find("ul").eq(0);c.addClass("fancynav-has-inner");var f=b.options.backText?b.options.backText:d.text(),g=a("<div>");g.addClass("fancynav-subnav");var h=a('<span class="fancynav-back"></span>');h.text(f),h.on("click",function(a){a.preventDefault(),g.removeClass("fancynav-subnav-active")});var i=a('<span class="fancynav-next"></span>');i.on("click",function(a){a.preventDefault(),g.hasClass("fancynav-subnav-active")||g.addClass("fancynav-subnav-active")}),d.append(i),g.append(h).append(e),c.append(g)})},destroy:function(){var a=this;a.$rootBody.find(".fancynav-mainnav");a.$rootBody.removeClass("fancynav-opened"),setTimeout(function(){a.$navCloser.off(),a.$currentLink.removeData("FancyNav"),a.pageOverlay.off(),a.pageOverlay.remove(),a.$mainNavContent.remove(),a.$rootBody.removeClass("fancynav fancynav-animation-"+a.options.animation).removeClass(a.options.navClass).append(a.$innerWrap.contents()),a.$outerWrap.remove()},a.options.hideDelay)}},a.fn.fancynav=function(b){return b=a.extend({},{add:".fancynav-add",animation:"slide-top",navClass:"",navHeader:"",backText:"",hideDelay:510},b),this.each(function(){var d=a(this);d.data("FancyNav",new c(d,b))})}}(jQuery,jQuery(window));
10.懒加载(Jquery)：
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Lazyload 1</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="lazyload.js"></script>
</head>
<body>
<div style="height: 800px; 200px;background: #ccc"></div>
<img class="lazy" data-original="images/bg3.gif" src="images/aaaa.jpg" width="300" heigh="200">
<div style="height: 800px; 200px;background: #ccc"></div>
<img class="lazy" data-original="images/bg3.gif" src="images/aaaa.jpg" width="300" heigh="200">
<script>
$("img.lazy").lazyload({
effect : "fadeIn",
failure_limit: 20
});
</script>
</body>
</html>
lazyload.js
// JavaScript Document /*! * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2015 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * http://www.appelsiini.net/projects/lazyload * * Version: 1.9.7 * */ (function($, window, document, undefined) { var $window = $(window); $.fn.lazyload = function(options) { var elements = this; var $container; var settings = { threshold : 0, failure_limit : 0, event : "scroll.lazyload", effect : "show", container : window, data_attribute : "original", data_srcset : "srcset", skip_invisible : false, appear : null, load : null, placeholder : "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" }; function update() { var counter = 0; elements.each(function() { var $this = $(this); if (settings.skip_invisible && !$this.is(":visible")) { return; } if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $this.trigger("appear"); /* if we found an image we'll load, reset the counter */ counter = 0; } else { if (++counter > settings.failure_limit) { return false; } } }); } if(options) { /* Maintain BC for a couple of versions. */ if (undefined !== options.failurelimit) { options.failure_limit = options.failurelimit; delete options.failurelimit; } if (undefined !== options.effectspeed) { options.effect_speed = options.effectspeed; delete options.effectspeed; } $.extend(settings, options); } /* Cache container as jQuery as object. */ $container = (settings.container === undefined || settings.container === window) ? $window : $(settings.container); /* Fire one scroll event per scroll. Not one scroll event per image. */ if (0 === settings.event.indexOf("scroll")) { $container.off(settings.event).on(settings.event, function() { return update(); }); } this.each(function() { var self = this; var $self = $(self); self.loaded = false; /* If no src attribute given use data:uri. */ if ($self.attr("src") === undefined || $self.attr("src") === false) { if ($self.is("img")) { $self.attr("src", settings.placeholder); } } /* When appear is triggered load original image. */ $self.one("appear", function() { if (!this.loaded) { if (settings.appear) { var elements_left = elements.length; settings.appear.call(self, elements_left, settings); } $("<img />") .one("load", function() { var original = $self.attr("data-" + settings.data_attribute); var srcset = $self.attr("data-" + settings.data_srcset); if (original != $self.attr("src")) { $self.hide(); if ($self.is("img")) { $self.attr("src", original); if (srcset != null) { $self.attr("srcset", srcset); } } else { $self.css("background-image", "url('" + original + "')"); } $self[settings.effect](settings.effect_speed); } self.loaded = true; /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); if (settings.load) { var elements_left = elements.length; settings.load.call(self, elements_left, settings); } }) .attr({ "src": $self.attr("data-" + settings.data_attribute), "srcset": $self.attr("data-" + settings.data_srcset) || "" }); } }); /* When wanted event is triggered load original image */ /* by triggering appear. */ if (0 !== settings.event.indexOf("scroll")) { $self.off(settings.event).on(settings.event, function() { if (!self.loaded) { $self.trigger("appear"); } }); } }); /* Check if something appears when window is resized. */ $window.off("resize.lazyload").bind("resize.lazyload", function() { update(); }); /* With IOS5 force loading images when navigating with back button. */ /* Non optimal workaround. */ if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { $window.on("pageshow", function(event) { if (event.originalEvent && event.originalEvent.persisted) { elements.each(function() { $(this).trigger("appear"); }); } }); } /* Force initial check if images should appear. */ $(function() { update(); }); return this; }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop(); } else { fold = $(settings.container).offset().top + $(settings.container).height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.width() + $window.scrollLeft(); } else { fold = $(settings.container).offset().left + $(settings.container).width(); } return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.scrollTop(); } else { fold = $(settings.container).offset().top; } return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.scrollLeft(); } else { fold = $(settings.container).offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; $.inviewport = function(element, settings) { return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); }; /* Custom selectors for your convenience. */ /* Use as $("img:below-the-fold").something() or */ /* $("img").filter(":below-the-fold").something() which is faster */ $.extend($.expr[":"], { "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }, "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); }, "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); }, "in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); }, /* Maintain BC for couple of versions. */ "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); }, "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); } }); })(jQuery, window, document);
11.懒加载(Js)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } img{ border: none; vertical-align: middle; } .in{ border: 1px solid black; margin: 10px; text-align: center; height: 400px; width: 400px; float: left; } .in img{ height: 400px; width: 400px; } </style> </head> <body> <ul class="list"> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li> </ul> <script> var oBtn = document.getElementsByTagName('button')[0]; var aImages = document.images; loadImg(aImages); window.onscroll = function(){ loadImg(aImages); }; function loadImg(arr){ for( var i = 0,len = arr.length; i < len; i++){ if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){ arr[i].isLoad = true; arr[i].style.cssText = "transition: ''; opacity: 0;" if(arr[i].dataset){ aftLoadImg(arr[i],arr[i].dataset.original); }else{ aftLoadImg(arr[i],arr[i].getAttribute("data-original")); } (function(i){ setTimeout(function(){ arr[i].style.cssText = "transition: 1s; opacity: 1;" },16) })(i); } } } function aftLoadImg(obj,url){ var oImg = new Image(); oImg.onload = function(){ obj.src = oImg.src; } oImg.src = url; } </script> </body> </html>
12.锚点平滑滚动：
<!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>js平滑滚动到顶部、底部、指定地方</title> <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> <style> .box{ height:200px; 100%; background:#ccc; margin:10px 0;} .location{ position:fixed; right:0; bottom:10px; 20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; </style> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box bottom"></div> <div class="location"> <p class="scroll_top">返回顶部</p> <p class="scroll_a">产品介绍</p> <p class="scroll_bottom">滑到底部</p> </div> <script type="text/javascript"> jQuery(document).ready(function($){ $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); }); </script> </body> </html>
13.下拉触底无限加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上拉刷新</title> <style> .news-wrap{width:500px;height:auto;border:solid 1px #0AA6E8;padding-top:10px;padding-bottom:10px;} .news-wrap .list{width:100%;height:200px;border-bottom:1px solid #FF0000;line-height:50px;} </style> </head> <body> <div id="news-wrap" class="news-wrap"> <div class="list">新闻1</div> <div class="list">新闻2</div> <div class="list">新闻2</div> <div class="list">新闻2</div> <div class="list">新闻2</div> <div class="list">新闻2</div> <div class="list">新闻1</div> <div class="list">新闻2</div> <div class="list">新闻2</div> <div class="list">新闻2</div> <div class="list">新闻2</div> <div class="list">新闻2</div> </div> <script src="jquery-3.1.1.min.js"></script> <script src="uprefresh.js"></script> <script> $(function(){ var oNewsWrap=$("#news-wrap"); oNewsWrap.uprefresh({"curPage":1,"maxPage":10,"offsetBottom":100},function(curpage){ $.ajax({ type:"get", url:"http://jsonplaceholder.typicode.com/posts/"+curpage+"/comments", success:function(data){ var str=''; for(i in data){ str+='<div class="list">'+data[i].name+'</div>' } oNewsWrap.append(str); } }); }); }); </script> </body> </html>
uprefresh.js:
/*滚动触底无限加载*/ +function($){'use strict'; var UpRefresh=function(opts,callback){ if(opts instanceof Object) { this.opts = opts; this.iMaxPage=this.opts.maxPage; this.oWin=$(window); this.fnCallback=callback; this.oHtml=$("html"); this.iOffsetBottom=this.opts.offsetBottom; this.iCurPage=this.opts.curPage; this.init(); } }; UpRefresh.prototype={ init:function(){ var _this=this; _this.eventScroll(); }, eventScroll:function(){ var _this=this; _this.oWin.on("scroll",_this.scrollBottom()); }, scrollBottom:function(){//函数节流检测是否到了最底部 var _this=this; var bScroll=true; return function(){ if(!bScroll){ return; } bScroll=false; setTimeout(function(){ var iScrollHeight=$(document).innerHeight();//获取滚轮页面的高 var iScrollTop=_this.oWin.scrollTop();//获取滚动条到哪里的高 var iWinHeight=_this.oWin.height();//获取当前页面第一屏的高 if(iScrollHeight-(iWinHeight+iScrollTop)<=_this.iOffsetBottom){ if(_this.iCurPage<_this.iMaxPage) { //console.log("scrollHeight:"+iScrollHeight+",winHeight:"+(parseInt(iScrollTop)+parseInt(iWinHeight))); _this.iCurPage++; //console.log(_this.iCurPage); _this.fnCallback(_this.iCurPage);//利用回调函数将页码发送到index.html里面 } } bScroll=true; },1800); } } }; $.fn.uprefresh=function(opts,callback){ return new UpRefresh(opts,callback); } }(window.jQuery);
14.密码验证规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script src='jquery.js'></script> <script> $(function () { var str=" sssss - 在 # vvvvv "; if(check_str(str)){ console.log("密码可以使用"); }else{ console.log("请输入6-16位由大小写字母或数字组成的密码！"); } }); function check_str(str){ var strc = str.replace(/ +/g,"");//去掉空格 //strc = strc.replace(/[ ]/g,"");//去掉回车换行 var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\[\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");//验证特殊字符 var reg_words = new RegExp("[\u4E00-\u9FFF]+","g");//验证中文 if(strc.length<6 || strc.length>16){ console.log("长度小于6或者大于16"); return false; } if (strc.indexOf("-") != -1) { console.log("包含-"); return false; } if(pattern.test(strc)){ console.log("包含特殊字符"); return false; } if(reg_words.test(strc)){ console.log("包含中文！"); return false; } return true; //返回true:密码可以使用 返回false: 请输入6-16位由大小写字母或数字组成的密码！ } </script> </body> </html>
15.懒加载 echo.js
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js演示1</title> <style> .demo img { 736px; height: 490px; background: url(images/loading1.gif) 50% no-repeat;} </style> </head> <body> <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1> <div class="menu"> <a class="cur" href="./">演示1</a> <a href="index_2.html">演示2（图片延迟5秒加载）</a> </div> <div class="demo" style=" 736px; margin: 0 auto;"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.png"> <img class="lazy" src="images/blank.gif" data-echo="images/big-2.png"> <img class="lazy" src="images/blank.gif" data-echo="images/big-3.png"> <img class="lazy" src="images/blank.gif" data-echo="images/big-4.png"> <img class="lazy" src="images/blank.gif" data-echo="images/big-5.png"> <img class="lazy" src="images/blank.gif" data-echo="images/big-6.png"> <img class="lazy" src="images/blank.gif" data-echo="images/big-7.png"> </div> <script src="echo.js"></script> <script> Echo.init({ offset: 0, throttle: 0 }); </script>
index_2.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js演示2</title> <style> .demo img { 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;} </style> </head> <body> <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示2</h1> <div class="menu"> <a href="./">演示1</a> <a class="cur" href="index_2.html">演示2（图片延迟3秒加载）</a> </div> <div class="demo" style=" 736px; margin: 0 auto;"> <img class="lazy" src="images/blank11.gif" data-echo="images/big-1.png"> <img class="lazy" src="images/blank11.gif" data-echo="images/big-2.png"> <img class="lazy" src="images/blank11.gif" data-echo="images/big-3.png"> <img class="lazy" src="images/blank11.gif" data-echo="images/big-4.png"> <img class="lazy" src="images/blank11.gif" data-echo="images/big-5.png"> <img class="lazy" src="images/blank11.gif" data-echo="images/big-6.png"> <img class="lazy" src="images/blank11.gif" data-echo="images/big-7.png"> </div> <script src="echo.js"></script> <script> Echo.init({ offset: 0, throttle: 3000 }); </script>
echo.js
window.Echo=(function(window,document,undefined){'use strict';var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute('data-echo');store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll('[data-echo]');var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener('scroll',_throttle,false);}else{window.attachEvent('onscroll',_throttle);}};return{init:init,render:_throttle};})(window,document);
——————————————————————