搜索到
1341
篇与
的结果
-
使用lazyframe延迟加载第三方资源 第三方资源通常用于展示广告或视频，以及与社交媒体集成。 默认方法是在网页加载后立即加载第三方资源，但这可能会使网页加载速度减慢。如果第三方内容不重要，可以通过延迟加载来降低此性能成本。插件直通车：https://gitee.com/YuJian11/lazyframe网站在嵌套iframe 使用youtube或者其他平台视频的时候，会加载很慢，我们可以使用上面的插件实现延迟加载1、首先，引入插件<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.css"><script src="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.min.js"></script>2、使用<script> lazyframe('.lazyframe'); </script>3、完整案例demo<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lazyframe Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.css"> <style> .container { max-width: 500px; margin: 0 auto; width: 100%; } p { font-family: "Helvetica Neue", Helvetica, Arial; } .lazyframe { margin-bottom: 200px; } .lazyframe--custom { background: #bada55; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .lazyframe--custom .lazyframe__title { position: relative; width: 100%; display: block; font-size: 32px; font-family: Arial; color: #fff; } .lazyframe--custom::before { width: auto; } </style> </head> <body> <div class="container"> <p>Youtube video with thumbnail and title from API</p> <div class="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-vendor="youtube"></div> </div> <script src="https://cdn.jsdelivr.net/npm/lazyframe/dist/lazyframe.min.js"></script> <script> lazyframe('.lazyframe'); </script> </body> </html> -
jquery 实现类似淘宝换一换功能 类似淘宝换一换功能在工作中我们经常会遇到，以下是一个简单的案例，仅供大家参考。实现效果图：实现代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>换一换</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> </head> <body> <style> *{margin:0;padding: 0px;} .hsow{width: 400px; height: 400px; margin: 0 auto; background-color: #fff;} .news-sub{ width: 400px; height: 266px; float: left; position: relative; } .news-list-v{ width: 400px; height: 266px; position: absolute; left: 0px; top: 0px;visibility: hidden;opacity: 0;transition: 0s 0.2s;} .news-list-v li{ list-style: none; width: 133px; height: 133px; float: left; text-align: center;} .news-list-v li a{ color: #fff;list-style: none; font-size: 50px; text-decoration: none; margin:0 auto; line-height: 133px} .news-list-v li:nth-of-type(odd){ background-color: #55cbc4;} .news-list-v li:nth-of-type(even){ background-color: #f45a8d;} .news-change{ width: 133px; height: 133px; background-color: #f04124; color: #fff; font-size: 34px; text-align: center; line-height: 133px; cursor: pointer; display: inline-block; float: left; margin-left: 133px;} .news-list-v.show{z-index: 1;visibility: visible;opacity: 1;transition: 0.2s;} </style> <div> <div> <ul class="news-list-v show"> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >1</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >2</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >3</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >4</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >5</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >6</a></li></ul> <ul> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >7</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >8</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >9</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >10</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >11</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >12</a></li> </ul> <ul> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >13</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >14</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >15</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >16</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >17</a></li> <li><a href="https://www.tpxhm.com/fdetail/202.html#" >18</a></li> </ul> </div> <a> <span>换一换</span> </a> </div> <script type="text/javascript"> //换一换 var $newsLists = $('.news-sub').find('.news-list-v'); function changeNews() { var $currentNews = $newsLists.filter('.show'); var $nextNews = $currentNews.next(); if($nextNews.length === 0) { $nextNews = $newsLists.eq(0); } $newsLists.removeClass('show'); $nextNews.addClass('show'); } $('.news-change').on('click', function() { changeNews(); }); </script> </body> </html>
-
jQuery根据屏幕下拉到一定高度显示返回顶部按钮 jQuery根据屏幕下拉到一定高度显示返回顶部按钮例子：$(function(){ $('.getop').hide(); $(window).scroll(function(){ if($(window).scrollTop()>900){ $('.getop').fadeIn(300); } else{$('.getop').fadeOut(200);} }); $('.getop').click(function(){ $('body,html').animate({scrollTop:0},900); return false; }) })
-
jQuery实现购物车物品数量的加减 实现购物车物品数量的加减，最小值为1，当最小值为1时再按减少，减少按钮不可编辑，当按增加数量时恢复减少按钮状态。这个除了加减功能外，也可以自动计算价格。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现购物车物品数量的加减</title> <script type="text/javascript" src="https://www.tpxhm.com/public/static/tpl/index/foundation/js/jquery.js"></script> <script> $(function(){ var t = $("#quantity"); $("#add").click(function(){ t.val(parseInt(t.val())+1); $("#min").removeAttr("disabled"); //当按加1时，解除$("#min")不可读状态 setTotal(); }) $("#min").click(function(){ if (parseInt(t.val())>1) { //判断数量值大于1时才可以减少 t.val(parseInt(t.val())-1) }else{ $("#min").attr("disabled","disabled") //当$("#min")为1时，$("#min")不可读状态 } setTotal(); }) function setTotal(){ $("#total").html((parseInt(t.val())*3.95).toFixed(2)); } setTotal(); }) </script> </head> <body> <p>单价：1.23</p> <input id="min" name="" type="button" value="-" /> <input id="quantity" name="" type="text" value="1" /> <input id="add" name="" type="button" value="+" /> <p>总价：<label id="total"></label></p> </body> </html>
-
JS实现Base64加密解密 JavaScript实现Base64加密解密。Base64与其说是加密算法不如说是方便数据传输而生的数据转换手段。测试代码：<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8"> <script type="text/javascript" src="https://www.tpxhm.com/fdetail/js/base64.js"></script> <style> .resource_enc, .resource_dec{ width: 500px; } .p1, .p2{ min-height: 100px; background-color: #dcffe1; } </style> </head> <body> <input type="text" class="resource_enc"><input type="button" onclick="encoding()" value="编码"><br/> <p class="p1"></p> <input type="text" class="resource_dec"><input type="button" onclick="decoding()" value="解码"><br/> <p class="p2"></p> <script type="text/javascript"> var base = new Base64(); function encoding() { var text = document.getElementsByClassName("resource_enc")[0].value; document.getElementsByClassName("p1")[0].innerText = base.encode(text); } function decoding() { var text = document.getElementsByClassName("resource_dec")[0].value; document.getElementsByClassName("p2")[0].innerText = base.decode(text); } </script> </body> </html>Base64.jsfunction Base64() { var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; this.encode = function (input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = utf8Encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4); } return output; }; this.decode = function (input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) { enc1 = _keyStr.indexOf(input.charAt(i++)); enc2 = _keyStr.indexOf(input.charAt(i++)); enc3 = _keyStr.indexOf(input.charAt(i++)); enc4 = _keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 !== 64) { output = output + String.fromCharCode(chr2); } if (enc4 !== 64) { output = output + String.fromCharCode(chr3); } } output = utf8Decode(output); return output; }; utf8Encode = function (string) { string = string.replace(/\r\n/g,"\n"); var utfText = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utfText += String.fromCharCode(c); } else if((c > 127) && (c < 2048)) { utfText += String.fromCharCode((c >> 6) | 192); utfText += String.fromCharCode((c & 63) | 128); } else { utfText += String.fromCharCode((c >> 12) | 224); utfText += String.fromCharCode(((c >> 6) & 63) | 128); utfText += String.fromCharCode((c & 63) | 128); } } return utfText; }; utf8Decode = function (utfText) { var string = ""; var i = 0; var c = 0; var c1 = 0; var c2 = 0; while ( i < utfText.length ) { c = utfText.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if((c > 191) && (c < 224)) { c1 = utfText.charCodeAt(i+1); string += String.fromCharCode(((c & 31) << 6) | (c1 & 63)); i += 2; } else { c1 = utfText.charCodeAt(i+1); c2 = utfText.charCodeAt(i+2); string += String.fromCharCode(((c & 15) << 12) | ((c1 & 63) << 6) | (c2 & 63)); i += 3; } } return string; } }
