原生js实现分页效果（带实例）
2024-05-11 14:15:41
小小插件（静态分页）
效果图：
首先实现简单功能：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title> pager demo </title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="pager demo" />
</head>
<style>.j-curr{color:red;}#pager{width:400px;margin:50px auto;text-align:center;line-height:26px;}#pager li{display:inline-block;padding:0 5px;cursor:pointer;}
</style>
<body>
<div id="list"><figure>sjfejkgnvkn</figure><figure>0222222</figure><figure>块</figure><figure>了</figure><figure>是</figure><figure>0666666</figure><figure>0777777</figure><figure>0888888</figure><figure>我</figure><figure>10101010</figure><figure>11111111</figure><figure>12121212</figure><figure>13131313</figure><figure>14141414</figure><figure>15151515</figure><figure>16161616</figure><figure>17171717</figure><figure>18181818</figure><figure>19191919</figure><figure>20202020</figure><figure>01111111</figure><figure>0222222</figure><figure>0333333</figure><figure>0444444</figure><figure>0555555</figure>
</div>
<div id="pager"></div><script>
var pager = function(){//公共函数function T$(id){return document.getElementById(id);}function T$$(root,tag){return (root || document).getElementsByTagName(tag);}function $extend(object1,object2){for(var p in object2){object1[p] = object2[p];}return object1;}function $each(arr, callback, thisp) {if (arr.forEach){arr.forEach(callback, thisp);}else{for(var i = 0, len = arr.length; i < len; i++){callback.call(thisp, arr[i], i, arr);}}}//默认参数配置var defaultOptions = {elemShowCount:5, //每页显示条数，默认为5条
pageShowCount:4, //显示的页码数目，默认显示4个页码
showFirstPageBtnAndLastPageBtn:true, //是否显示首页，尾页，默认显示
showPrevBtnAndNextBtn:true, //是否显示上一页，下一页，默认显示
showPageNumTips:true, //是否显示【1/7页】页面提示，默认显示
showPageNum:true //是否显示分页的数字，默认显示
};//主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数var showPage = function(bid,pid,options){ var self = this; if(!(self instanceof showPage)){return new showPage(bid,pid,options);}self.container = T$(bid); //元素容器div
self.pagerBox = T$(pid); //翻页容器divif(!self.container){return; }self.options = $extend(defaultOptions,options||{});self.elem = T$$(self.container,'figure'); //需要分页的元素
self.elemTotalCount = self.elem.length || 0; //分页元素的总个数
self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0; //总页数
};showPage.prototype = {constructor:showPage,//显示当页的元素内容，参数currPageNum为当前页码，从0开始
showChangeElemCont: function(currPageNum){ var self = this; //this为showPage对象var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount; //判断为最后一页时，最后一页应该显示的数据条数for(var i=0;i<self.elemTotalCount;i++){self.elem[i].style.display = 'none';}for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){self.elem[i].style.display = 'block';}},//显示当页的页码内容，参数currPageNum为当前页码，从0开始
showChangePageCont: function(currPageNum){ var self = this; //this为showPage对象var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = ''; //firstPageHtml:首页 prevPageHtml:上一页 pageLinkHtml:页码表 nextPageHtml:下一页 lastPageHtml:尾页 pageTips:页码提示var startPage,endPage; //startPage:页码列表中的第一页 endPage:页码列表中的最后一页var pageShowMidCount = Math.ceil(self.options.pageShowCount/2); //页码中间值，当超过这个值时，页码列表发生变化if(self.pageTotalCount <= self.options.pageShowCount){ //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
startPage = 0;endPage = self.pageTotalCount-1;}else{if(self.options.pageShowCount%2 == 0){if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;endPage = self.options.pageShowCount-1;}else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;endPage = self.pageTotalCount-1;}else{startPage = currPageNum - pageShowMidCount + 1;endPage = currPageNum + pageShowMidCount;} }else{if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;endPage = self.options.pageShowCount-1;}else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;endPage = self.pageTotalCount-1;}else{startPage = currPageNum - pageShowMidCount + 1;endPage = currPageNum + pageShowMidCount - 1;} } }//显示首页尾页if(self.options.showFirstPageBtnAndLastPageBtn == true){firstPageHtml = '<li>首页</li>';lastPageHtml = '<li>尾页</li>'; }//显示上一页下一页if(self.options.showPrevBtnAndNextBtn == true){if(currPageNum != 0) prevPageHtml = '<li>上一页</li>'; //首页不显示上一页if(currPageNum != self.pageTotalCount-1) nextPageHtml = '<li>下一页</li>'; //尾页不显示最后一页
}//显示页码数字链接for(var i=startPage,l=endPage;i<=l;i++){if(currPageNum==i){pageLinkHtml += '<li class="j-curr">' + (i+1) + '</li>';}else{pageLinkHtml += '<li>' + (i+1) + '</li>';}}//显示页码提示信息if(self.options.showPageNumTips == true){pageTips = '<span>' +(currPageNum+1) + '/' + self.pageTotalCount + '</span>';}//拼出页码元素的整体内容
self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips; var elems = T$$(self.pagerBox,'li');$each(elems, function(o, i) {o.onclick = function() {if(o.innerText == '首页'){self.showChangeElemCont(0);self.showChangePageCont(0);}else if(o.innerText == '尾页'){self.showChangeElemCont(self.pageTotalCount-1);self.showChangePageCont(self.pageTotalCount-1);}else if(o.innerText == '上一页'){self.showChangeElemCont(currPageNum-1);self.showChangePageCont(currPageNum-1);}else if(o.innerText == '下一页'){self.showChangeElemCont(currPageNum+1);self.showChangePageCont(currPageNum+1);}else{index = parseInt(o.innerText) - 1;self.showChangeElemCont(index);self.showChangePageCont(index);} }});}};return{onShowPage:function(bid,pid,options){//调用主类var st = new showPage(bid,pid,options);st.showChangeElemCont(0);st.showChangePageCont(0);}}
}();pager.onShowPage('list','pager',{elemShowCount:4,pageShowCount:5});
</script>
</body>
</html>然后填充内容和样式：(修改css和js以及html)
实例：
css:
#pager {margin:50px auto;text-align:center;line-height:26px;
}
#pager li {display:inline-block;min-width: 40px;height: 40px;line-height: 40px;margin: 5px;cursor:pointer;color: #999;background-color: #fff;border: 1px solid #f6f6f6;
}
#pager span {color: #999;margin-left: 5px;
}
.j-curr{color:#fff !important;background-color: #16ab95 !important;
}.messageMain {background-color: #fff;padding: 20px 0;display: flex;flex-wrap: wrap;
}
figure {overflow: hidden;width: 360px;font-size: 14px;color: #333;position: relative;margin: 0 20px 20px;
}
figure img {width: 150px;height: 100px;float: left;margin-right: 18px;
}
figcaption {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin-top: 2px;
}
figcaption {float: left;width: 192px;color: #333;
}
figcaption:hover {color: #16ab95;
/* cursor:pointer;*/
}
figure>span {position: absolute;left: 168px;bottom: 2px;color: #999;
}js:
var pager = function(){//公共函数function T$(id){return document.getElementById(id);}function T$$(root,tag){return (root || document).getElementsByTagName(tag);}function $extend(object1,object2){for(var p in object2){object1[p] = object2[p];}return object1;}function $each(arr, callback, thisp) {if (arr.forEach){arr.forEach(callback, thisp);}else{for(var i = 0, len = arr.length; i < len; i++){callback.call(thisp, arr[i], i, arr);}}}//默认参数配置var defaultOptions = {elemShowCount:5, //每页显示条数，默认为5条pageShowCount:4, //显示的页码数目，默认显示4个页码showFirstPageBtnAndLastPageBtn:true, //是否显示首页，尾页，默认显示showPrevBtnAndNextBtn:true, //是否显示上一页，下一页，默认显示showPageNumTips:true, //是否显示【1/7页】页面提示，默认显示showPageNum:true //是否显示分页的数字，默认显示
};//主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数var showPage = function(bid,pid,options){ var self = this; if(!(self instanceof showPage)){return new showPage(bid,pid,options);}self.container = T$(bid); //元素容器divself.pagerBox = T$(pid); //翻页容器divif(!self.container){return; }self.options = $extend(defaultOptions,options||{});self.elem = T$$(self.container,'figure'); //需要分页的元素self.elemTotalCount = self.elem.length || 0; //分页元素的总个数self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0; //总页数
};showPage.prototype = {constructor:showPage,//显示当页的元素内容，参数currPageNum为当前页码，从0开始showChangeElemCont: function(currPageNum){ var self = this; //this为showPage对象var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount; //判断为最后一页时，最后一页应该显示的数据条数for(var i=0;i<self.elemTotalCount;i++){self.elem[i].style.display = 'none';}for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){self.elem[i].style.display = 'block';}},//显示当页的页码内容，参数currPageNum为当前页码，从0开始showChangePageCont: function(currPageNum){ var self = this; //this为showPage对象var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = ''; //firstPageHtml:首页 prevPageHtml:上一页 pageLinkHtml:页码表 nextPageHtml:下一页 lastPageHtml:尾页 pageTips:页码提示var startPage,endPage; //startPage:页码列表中的第一页 endPage:页码列表中的最后一页var pageShowMidCount = Math.ceil(self.options.pageShowCount/2); //页码中间值，当超过这个值时，页码列表发生变化if(self.pageTotalCount <= self.options.pageShowCount){ //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码startPage = 0;endPage = self.pageTotalCount-1;}else{if(self.options.pageShowCount%2 == 0){if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页startPage = 0;endPage = self.options.pageShowCount-1;}else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){ //尾页startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;endPage = self.pageTotalCount-1;}else{startPage = currPageNum - pageShowMidCount + 1;endPage = currPageNum + pageShowMidCount;} }else{if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页startPage = 0;endPage = self.options.pageShowCount-1;}else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){ //尾页startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;endPage = self.pageTotalCount-1;}else{startPage = currPageNum - pageShowMidCount + 1;endPage = currPageNum + pageShowMidCount - 1;} } }//显示首页尾页if(self.options.showFirstPageBtnAndLastPageBtn == true){firstPageHtml = '<li>首页</li>';lastPageHtml = '<li>尾页</li>'; }//显示上一页下一页if(self.options.showPrevBtnAndNextBtn == true){if(currPageNum != 0) prevPageHtml = '<li><</li>'; //首页不显示上一页if(currPageNum != self.pageTotalCount-1) nextPageHtml = '<li>></li>'; //尾页不显示最后一页
}//显示页码数字链接for(var i=startPage,l=endPage;i<=l;i++){if(currPageNum==i){pageLinkHtml += '<li class="j-curr">' + (i+1) + '</li>';}else{pageLinkHtml += '<li>' + (i+1) + '</li>';}}//显示页码提示信息if(self.options.showPageNumTips == true){pageTips = '<span>' +(currPageNum+1) + '/' + self.pageTotalCount + '</span>';}//拼出页码元素的整体内容self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips; var elems = T$$(self.pagerBox,'li');$each(elems, function(o, i) {o.onclick = function() {if(o.innerText == '首页'){self.showChangeElemCont(0);self.showChangePageCont(0);}else if(o.innerText == '尾页'){self.showChangeElemCont(self.pageTotalCount-1);self.showChangePageCont(self.pageTotalCount-1);}else if(o.innerText == '<'){self.showChangeElemCont(currPageNum-1);self.showChangePageCont(currPageNum-1);}else if(o.innerText == '>'){self.showChangeElemCont(currPageNum+1);self.showChangePageCont(currPageNum+1);}else{index = parseInt(o.innerText) - 1;self.showChangeElemCont(index);self.showChangePageCont(index);} }});}};return{onShowPage:function(bid,pid,options){//调用主类var st = new showPage(bid,pid,options);st.showChangeElemCont(0);st.showChangePageCont(0);}}
}();pager.onShowPage('list','pager',{elemShowCount:8,pageShowCount:5});html:
<!-- 分页 --><div class="messageMain" id="list"><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>1发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>2发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>3发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>4发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>5发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>6发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>7发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>8发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>9发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>10发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>11发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>12发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>13发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>1发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>2发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>3发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>4发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>5发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>6发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>7发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>8发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>9发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>10发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>11发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>12发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure><figure><a href="#"><img src="img/education.png" alt=""></a><a href="#"><figcaption>13发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a><span>2018/07/17</span></figure></div><div id="pager"></div>
转载于:https://www.cnblogs.com/-rainbow-/p/9479986.html
原生js实现分页效果（带实例）相关推荐
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
- 原生JS实现分页效果
做开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不 ...
- 原生js实现轮播图实例教程
原生js实现轮播图实例教程 本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
- 原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- html制作满天星,怎样使用原生js做出满天星效果
这次给大家带来怎样使用原生js做出满天星效果,使用原生js做出满天星效果的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下://图片自己加入改变路径 html{height: 100%;} ...
- 原生js实现如下效果： 一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
- 原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...
- 原生js漂浮广告效果
原生js漂浮广告效果 静态页面代码 <body><div id="box"><img src="1.jpg" alt=" ...
- 原生js实现分页的效果
想必大家都用过百度查找过我们想要的信息,每次我们查找东西的时候,百度都会返给我们很多很多相似和有关的结果,而这些结果是不可能一页就显示完全的,一般都会分很多很多页,效果图如下.所以我们今天就是要分享一 ...
最新文章
- 2022-2028年中国PET基膜行业市场发展规模及市场分析预测报告
- 4、线程范围内的数据共享之ThreadLocal
- 千万级别数据查询优化_从千万级数据查询来聊一聊索引结构和数据库原理
- ios页面间传递参数四种方式
- BZOJ 2653 middle
- oracle 约束 年份,如何在Oracle中确定给定年份是否为Le年？
- k邻近算法(KNN)实例
- 数组（有序数组）的公共部分
- 10.UNIX 环境高级编程--信号
- 数据集：科研经费投入对生产能力提高的影响
- RN开发关闭所有黄色警告弹出(console.warn())
- 多款OCR免费工具，好用极了实在是太方便了
- 三菱驱动器参数表_三菱伺服驱动器参数都设置什么啊详细点谢谢
- STM32调试MIPI RFFE协议
- Windows Server AppFabric
- 实现贪吃蛇程序的整个代码：
- Android入门实践简单小项目：健康饮食
- vivo S7e和华为nova8se 的区别 哪个好
- 如何在Word中制作三线表
- 打印机可以打印不能扫描怎么弄_打印机无法扫描怎么解决 打印机无法扫描相关介绍【解决方法】...