原生Javascript翻页效果

最新推荐文章于 2024-04-08 15:59:49 发布
最新推荐文章于 2024-04-08 15:59:49 发布
阅读量136 收藏
点赞数
文章标签： Javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43478650/article/details/89042437
版权 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src='jquery-1.7.2.js'></script>
<script src="js/pintuer.js"></script>
</head>
<body>
    <div class="panel admin-panel">
        <div class="panel-head" style="font-size:30px;"><strong class="icon-reorder"> 内容列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">
                <li style="font-size:20px;color:#00AAEE;">筛选:</li>
                <li>属性
                <select name="s_ishome" class="input" "changesearch()" style="width:80px; line-height:17px; display:inline-block;">
                    <option value="0">全部</option>
                    <option value="1">首页</option>
                    <option value="2">推荐</option>
                    <option value="3">置顶</option>
                </select>
                &nbsp;&nbsp;
                更新时间<input type="date"  "changesearch()" style="width:150px;" id="times">
                &nbsp;&nbsp;
                </li>
                <li>
                    <select name="cid" class="input" style="width:200px; line-height:17px;" "changesearch()">
                        <option value="">产品分类</option>
                        <option value="">产品1</option>
                        <option value="">产品2</option>
                        <option value="">产品3</option>
                        <option value="">产品4</option>
                        <option value="">产品5</option>
                        <option value="">产品6</option>
                    </select>
                </li>
                <li style="float:right">
                    <input type="text" placeholder="请输入搜索名称" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />
                    <a href="#" class="button border-main icon-search" id='search' "selectkeywords()"> 搜索</a>
                    <a href="#" class="button border-main" id='search' "recover()">恢复</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <tr >
                <th width="100" style="text-align:left; padding-left:20px;">&emsp;&emsp;ID</th>
                <th width="10%">排序</th>
                <th>图片</th>
                <th>名称</th>
                <th>属性</th>
                <th>分类名称</th>
                <th width="10%">更新时间</th>
                <th width="310">操作</th>
            <tr  id="show" style="display:none;"><td>没有你查询的内容！</td></tr>
            <?php foreach($getData as $data){?>
            <tr  class="tr">
                <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[] " id="checkbox"/><?php echo $data['Id'];?></td>
                <td><input type="text" id="sort1" name="sort[1]" value="<?php echo $data['sort'];?>" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
                <td width="10%"><img src="images/<?php echo $data['img'];?>" alt="" width="70" height="50" /></td>
                <td><?php echo $data['title'];?></td>
                <td><font color="#00CC99"><?php echo $data['value'];?></font></td>
                <td><?php echo $data['cid'];?></td>
                <td><?php echo $data['datetime'];?></td>
                <td><div class="button-group"><a class="button border-main" id="modification" href="add1.php?del=<?php echo $data['Id'];?>"> 修改</a><a class="button border-red" href="javascript:void(0)" "delone(<?php echo $data['Id'];?>)"> 删除</a></div></td>
             </tr>
             <?php }?>
            <tfoot>
                <tr>
                    <td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" id="checkall"/>
                    全选 </td>
                    <td colspan="7" style="text-align:left;padding-left:20px;">
                        <a href="#" class="button border-red icon-trash-o" style="padding:5px 15px;" "DelSelect()"> 删除</a>
                        <a href="#" style="padding:5px 15px; margin:0 10px;" class="button border-blue icon-edit" "sorts(1)"> 升序排序</a>
                        <a href="#" style="padding:5px 15px; margin:0 10px;" class="button border-blue icon-edit" "sorts(2)"> 降序排序</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="8">
                        <div class="pagelist">
                            <span "pageturn(4)">首页</span>
                            <span "pageturn(1)">上一页</span>
                            <span class="current page">1</span>
                            <span class="page">2</span>
                            <span class="page">3</span>
                            <span class="page">4</span>
                            <span class="page">5</span>
                            <span "pageturn(2)">下一页</span>
                            <span "pageturn(3)">尾页</span>
                            <span class="pages">共10页</span>
                        </div>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
<script type="text/javascript">
  // 把php获取的数据库数组$list转到js数组中--考虑数据少翻页效果更好
    var data = new Array();
    var arry = [];
    var acssort = [];
    Ajax();
    function Ajax(){
        $.ajax({
            data:{name:'zlg'},
            dataType:'json',
            success:function(d){
            data = d.jsonData;
            // 把数据给arry
            $.each(data, function (index,item) {
                arry.push(item);
            });
            }
        });
    }
  //规定每页的条数
    var tiaoshu = <?php echo $NO;?>;
  //给点页数显示数据
    var startpage = 0;
    var endpage = startpage+tiaoshu;
  //显示总页数
    var pages = Math.ceil(<?php echo count($list);?>/<?php echo $NO;?>);
    document.querySelector('.pages').innerHTML = '共'+pages+'页';
    //显示页码span数组
    var NOpage = document.querySelectorAll('.page');
    //选项按钮
    var checkboxs = document.querySelectorAll('#checkbox');
    var checkboxall = document.querySelector('#checkall');
  //开始页面的直接调用显示数据和页数的处理
    // adddate(startpage,endpage,arry);
    startpages();
    //初始页数处理
    function startpages(){
      if(pages<NOpage.length){
        for(var p = 0;p <= pages;p++){
          NOpage[p].innerHTML = p+1;
        }
        for(var a = pages;a < NOpage.length;a++){
          NOpage[a].innerHTML = '/';
        }
      }
    }
  //改变下下拉列表筛选
    function changesearch(){
        var select_l = document.querySelector('[name=s_ishome]');
        var index = select_l.selectedIndex;
        var texts = select_l.options[index].text;
        var select_r = document.querySelector('[name=cid]');
        var index1 = select_r.selectedIndex;
        var texts1 = select_r.options[index1].text;
        var  time = document.querySelector('#times').value;
        if(texts == '全部' && texts1 == '产品分类' && time == ''){
            arry = [];
            $.each(data, function (index,item) {
                  arry.push(item);
            })
        }else if(texts != '全部' && texts1 != '产品分类' && time != ''){
            arry = [];
            $.each(data, function (index,item) {
                if(item.value == texts && item.cid == texts1 && item.datetime == time){
                    arry.push(item);
                }
            })
        }else if(texts == '全部' && texts1 != '产品分类' && time != ''){
            arry = [];
            $.each(data, function (index,item) {
                if(item.cid == texts1 && item.datetime == time){
                      arry.push(item);
                }
            })
        }else if(texts != '全部' && texts1 == '产品分类' && time != ''){
            arry=[];
            $.each(data, function (index,item) {
                if(item.value == texts && item.datetime == time){
                    arry.push(item);
                }
            })
        }else if(texts != '全部' && texts1 != '产品分类' && time == ''){
            arry=[];
            $.each(data, function (index,item) {
                if(item.value == texts && item.cid == texts1){
                    arry.push(item);
                }
            })
        }else if(texts != '全部' && texts1 == '产品分类' && time == ''){
            arry=[];
            $.each(data, function (index,item) {
                if(item.value == texts){
                    arry.push(item);
                }
            })
        }else if(texts == '全部' && texts1 != '产品分类' && time == ''){
            arry=[];
            $.each(data, function (index,item) {
                if(item.cid == texts1){
                    arry.push(item);
                }
            })
        }else if(texts == '全部' && texts1 == '产品分类' && time != ''){
            arry = [];
            $.each(data, function (index,item) {
                if(item.datetime == time){
                    arry.push(item);
                }
            })
        }
         if(arry.length == 0){
           alert('没有您筛选的内容了!')
              list();
         }else if(arry.length>0){
              list();
         }
       
    } 
    //列表加载函数
     function list(){
          startpage = 0;
          endpage = startpage+tiaoshu;
          pages = Math.ceil(arry.length/tiaoshu);
          adddate(startpage,endpage,arry);
          firstpage();
     }   
  //输入名称搜索
    function selectkeywords(){
        var keywords = document.querySelector('[name=keywords]').value;
         if(keywords == ''){
          alert('请输入搜索的名称！')
         }
         else if(keywords != ''){
          arry = [];
          $.each(data, function (index,item) {
            if(item.title == keywords){
              arry.push(item);
            }    
          })
           if(arry.length == 0){
            alert('没有您查询的内容!')
           }else if(arry.length > 0){
              list();
           }
          
         }
    }
  //排序
    function sorts(s){
      //升序
        if(s == 1){
            var number = [];
            // 添加到数组number
            for(var i = 0;i < arry.length;i++){
                number.push(Number(arry[i].sort));
            }
            number = arrysort(number);
            number = diff(number);
            acssort = [];
             for(var nu = 0;nu < number.length;nu++){
               for(var r = 0;r < arry.length;r++){
                    if(number[nu] == arry[r].sort){
                      acssort.push(arry[r]);
                    }
                }
               }
               arry = [];
               $.each(acssort, function (index,item) {
                     arry.push(item);
                })
               adddate(startpage,endpage,arry);
        }
      //降序
        if(s == 2){
             var number = [];
            // 添加到数组number
            for(var i = 0;i < arry.length;i++){
                number.push(Number(arry[i].sort));
            }
            number = arrysort(number);
            number = diff(number);
            acssort = [];
             for(var nu = number.length-1;nu >= 0;nu--){
               for(var r = 0;r < arry.length;r++){
                    if(number[nu] == arry[r].sort){s
                      acssort.push(arry[r]);
                    }
                }
               }
               arry = [];
               $.each(acssort, function (index,item) {
                     arry.push(item);
                })
               adddate(startpage,endpage,arry);
        }
    }
  //给获取的序号排序
    function arrysort(arry){
        for(var i = 0;i < arry.length;i++){
            for(var j = 0;j < arry.length;j++){
                if(arry[j] > arry[j+1]){
                  var x = arry[j+1];
                    arry[j+1] = arry[j];
                     arry[j] = x;
                }
            }
        }
        return  arry;
    }
  //给获取的序号去重
    function diff(arr){
        var obj = {},tmp = [];
        for(var i = 0;i < arr.length;i++){
            obj[arr[i]] = 1;
        }
        for(var x in obj){
            tmp.push(x)
        }
        return tmp;
    }
    //全选
    checkboxall.onclick = function(){
        var checkboxs = document.querySelectorAll('#checkbox');
            if(this.checked){
                for(var c = 0;c<checkboxs.length;c++){
                    checkboxs[c].checked = true;
                }
            }else if(!this.checked){
                for(var c = 0;c < checkboxs.length;c++){
                    checkboxs[c].checked = false;
                }
          }
    }
  //反全选
    $('#checkbox').live('click',function(){
        var checkboxs = document.querySelectorAll('#checkbox');
        var checkall = document.querySelector('#checkall');
        var tm = 0;
            for(var ru = 0;ru < checkboxs.length;ru++){
                if(checkboxs[ru].checked){
                    tm++;
                }
            }
          if(tm == checkboxs.length){
              checkall.checked = true;
          }else if(tm != checkboxs.length){
              checkall.checked = false;
          }
        
    })
  //恢复最初列表
    function recover(){
        arry = [];
        $.each(data, function (index,item) {
            arry.push(item);
      });
       list();
    }
  //单个删除
    function delone(id){
        if(confirm('你确定要这一项内容?')){
            $.ajax({
                url:'',
                type:'post',
                data:{Id:id},
                success:function(d){
                    if(d == 0){
                    alert('删除失败');
                    }else if(d == 1){
                          for(var i = 0;i<data.length;i++){
                              if(data[i].Id == id){
                                  data.splice(i,1);
                              }
                          }
                          for(var j = 0;j<arry.length;j++){
                              if(arry[j].Id == id){
                                  arry.splice(j,1);
                              }
                      }
                       list();
                  }
                }
            })
        }
    }
  // 批量删除
  function DelSelect(){
      var checkbox = document.querySelectorAll('#checkbox');
      var tm = 0;
      for(var dels = 0;dels<checkbox.length;dels++){
          if(checkbox[dels].checked){
              tm++;
          }
      }
      if(tm == 0){
          alert('请选择要删除的内容！');
      }else if(confirm('你确定要删除这'+tm+'项内容吗!')){
          for(var de = 0;de < checkbox.length;de++){
              if(checkbox[de].checked){
                  var id = checkbox[de].parentNode.innerText;
                  $.ajax({
                  url:'',
                  type:'post',
                  data:{Id:id},
                  success:function(d){
                      if(d == 0){
                      alert('删除失败!');
                      }else if(d == 1){
                          for(var i = 0;i < data.length;i++){
                              if(data[i].Id == id){
                                  data.splice(i,1);
                              }
                          }
                          for(var j = 0;j < arry.length;j++){
                              if(arry[j].Id == id){
                                  arry.splice(j,1);
                              }
                          }
                          list();
                        }
                    }
          })
            }
        }
       }
  }
  //选页
    for(var i = 0;i < NOpage.length;i++){
        NOpage[i].function(){
            if(this.innerHTML != '/'){
                chosepage(this.innerHTML);
            }  
        }
    }
    function chosepage(j){
        endpage = j*tiaoshu;
        startpage = endpage-tiaoshu;
        adddate(startpage,endpage,arry);
        if(pages >= NOpage.length){
        if(j < 3 || j > pages-2){
            if(j <= 2){
             for(var i = 0;i < NOpage.length;i++){
            NOpage[i].innerHTML = 1+i;
            }
          }else if(j > pages-2){
             for(var i = 0;i<NOpage.length;i++){
                NOpage[i].innerHTML = pages-(NOpage.length-1-i);
            }
          }
            for(var z = 0;z < NOpage.length;z++){
                if(NOpage[z].innerHTML == j){
                    NOpage[z].className = 'current page';
                }else{
                    NOpage[z].className = 'page';
                }
            }
        }else if(j >= 3 && j <= pages-2){
            for(var e = 0;e < NOpage.length;e++){
                NOpage[e].innerHTML = j-2+e;
            }
            for(var f = 0;f<NOpage.length;f++){
                if(NOpage[f].innerHTML == j){
                    NOpage[f].className = 'current page';
                }else{
                    NOpage[f].className = 'page';
                }
            }
        }
      }else if(pages < NOpage.length){
           for(var l = 0;l < NOpage.length;l++){
                if(NOpage[l].innerHTML == j){
                    NOpage[l].className = 'current page';
                }else{
                    NOpage[l].className = 'page';
                }
            }
      }
    }
  //翻页
    function pageturn(i){
        if(i == 1){//上翻页
            if(startpage >= tiaoshu){
                startpage -= tiaoshu;
                endpage = startpage + tiaoshu;
                minshowpage()
            }else{
                startpage = 0;
                endpage = startpage + tiaoshu;
                minshowpage()
            }
        }else if(i == 2){//下翻页
              if(startpage + tiaoshu > arry.length){
                   startpage = startpage;
                   endpage = startpage + tiaoshu;
                   addshowpage();
              }else if(startpage + tiaoshu < arry.length){
                   startpage += tiaoshu;
                   endpage =s tartpage + tiaoshu;
                   addshowpage();
              }
        }else if(i == 4){//首页
            startpage = 0;
            endpage = startpage + tiaoshu;
            firstpage();
        }else if(i == 3){ //尾页
            startpage = pages*tiaoshu-tiaoshu;
            endpage = pages*tiaoshu;
            lastpage();
        }
        adddate(startpage,endpage,arry);
    }
  //显示页码减1
    function minshowpage() {
        if(pages > NOpage.length){
            if(startpage >= 2*tiaoshu){
                if(endpage < pages*tiaoshu-2*tiaoshu){
                    if(NOpage[0].innerHTML>1){
                        for(var i = 0;i<NOpage.length;i++){
                            var NO = Number(NOpage[i].innerHTML);
                            NOpage[i].innerHTML = NO-1;
                        }
                    }
                }else if(endpage >= pages-2*tiaoshu){
                    for(var j = 0;j < NOpage.length;j++){
                        if(NOpage[j].innerHTML == (endpage/tiaoshu)){
                            NOpage[j].className = 'current page';
                        }else{
                            NOpage[j].className = 'page';
                        }
                    }
                }
            }else if(startpage < 2*tiaoshu){
                for(var j = 0;j<NOpage.length;j++){
                    if(NOpage[j].innerHTML == (endpage/tiaoshu)){
                        NOpage[j].className = 'current page';
                    }else{
                        NOpage[j].className = 'page';
                    }
                }
            }
        }else if(pages <= NOpage.length){
            for(var z = 0;z<NOpage.length;z++){
                if(NOpage[z].innerHTML == (endpage/tiaoshu)){
                    NOpage[z].className = 'current page';
                }else{
                    NOpage[z].className = 'page';
                }
            }
        }
    }
  //显示页码加1
    function addshowpage() {
        if(pages > NOpage.length){
            if(startpage > 2*tiaoshu){
                if(NOpage[NOpage.length-1].innerHTML != pages){
                    if(NOpage[NOpage.length-1].innerHTML < pages){
                        for(var i = 0;i < NOpage.length;i++){
                            var NO = Number(NOpage[i].innerHTML);
                            NOpage[i].innerHTML = NO+1;
                        }
                    }
                }else if(NOpage[NOpage.length-1].innerHTML == pages){
                    for(var j = 0;j < NOpage.length;j++){
                        if(NOpage[j].innerHTML == (endpage/tiaoshu)){
                            NOpage[j].className = 'current page';
                        }else{  
                            NOpage[j].className = 'page';
                        }
                    }
                }
            }else if(startpage <= 2*tiaoshu){
                for(var j = 0;j<NOpage.length;j++){
                    if(NOpage[j].innerHTML == (endpage/tiaoshu)){
                        NOpage[j].className = 'current page';
                    }else{
                        NOpage[j].className = 'page';
                    }
                }
            }
        }else if(pages <= NOpage.length){
            for(var z = 0;z<NOpage.length;z++){
                if(NOpage[z].innerHTML == (endpage/tiaoshu)){
                    NOpage[z].className = 'current page';
                }else{
                    NOpage[z].className = 'page';
                }
            }
        }
    }
  //首页
    function firstpage(){
        for(var i = 0;i<NOpage.length;i++){
            NOpage[i].innerHTM = 1+i;
            NOpage[i].className = 'page';
        }
        NOpage[0].className = 'current page';
        if(NOpage.length > pages){
            for(var j = NOpage.length-(NOpage.length-pages);j<NOpage.length;j++){
                NOpage[j].innerHTML = '/';
            }
        }
    }
  //尾页
    function  lastpage(){
        if(pages >= NOpage.length){
            for(var i = 0;i<NOpage.length;i++){
                NOpage[i].innerHTML = pages-(NOpage.length-1-i);
                NOpage[i].className = 'page';
            }
            NOpage[NOpage.length-1].className = 'current page';
        }else if(pages<NOpage.length){
            for(var i = 0;i<NOpage.length;i++){
                NOpage[i].innerHTML = 1+i;
                NOpage[i].className = 'page';
            }
            for(var j=NOpage.length-(NOpage.length-pages);j<NOpage.length;j++){
                NOpage[j].innerHTML = '/';
            }
            NOpage[NOpage.length-(NOpage.length-pages)-1].className = 'current page';
        }
    }
  //展示页数和信息
   function adddate(startpage,endpage,arry){
        //初始全选按钮
        checkboxall.checked = false;
        //显示总页数
        // document.querySelector('.pages').innerHTML='共'+pages+'页';
      //删除原有的tr
        var trss = document.querySelectorAll('.tr');
        for(var i = 0;i<trss.length;i++){
            trss[i].remove();
        }
      //添加新的tr
          var orderBody = '';
          $.each(arry, function (index, datas) {
              if(startpage <= index  && index<endpage){
                orderBody +='<tr  class="tr">\
                    <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[] " id="checkbox"/>'+datas.Id+'</td>\
                    <td><input type="text" id="sort1" name="sort[1]" value="'+datas.sort+'" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>\
                    <td width="10%"><img src="images/'+datas.img+'" alt="" width="70" height="50" /></td>\
                    <td>'+datas.title+'</td>\
                    <td><font color="#00CC99">'+datas.value+'</font></td>\
                    <td>'+datas.cid+'</td>\
                    <td>'+datas.datetime+'</td>\
                    <td><div class="button-group"><a class="button border-main" id="modification" href="add1.php?del='+datas.Id+'"> 修改</a><a class="button border-red" href="javascript:void(0)" "delone('+datas.Id+')"> 删除</a></div></td>\
                    </tr>'
              }
          })
          $('table').append(orderBody);
    }
</script>
</body>
</html>
weixin_43478650
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现web的翻页功能
04-26
纯js实现web前端的翻页，实现、首页、尾页、上一页、下一页的功能实现
Javascript实现的杂志翻页效果
02-27
Javascript实现的杂志翻页效果 Javascript实现的杂志翻页效果
JavaScript实现翻页功能(附效果图)
10-20
主要介绍了JavaScript实现翻页功能(附效果图)，在项目需求中经常遇到，今天小编抽时间给大家分享JavaScript实现翻页功能实例代码，需要的朋友参考下吧
javascript翻页
qq_42091922的博客
01-15 327
var refsh = 1; //抑制重复分配 var game_index = 1; //游戏初始位 var games = []; //游戏集合 var seats = 4  //单页显示的游戏个数-1 var game_len = games.length; //游戏总数 //翻页处理 function movepage(op){ game_index ...
原生JS实现翻页
忙着开花儿
03-23 2466
话不多说，直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
原生JS实现图片翻书效果
10-20
`TPR_()`函数逐渐缩小左侧页面的宽度并增加其透明度，直到右侧页面完全显示出来，然后通过`TPR__()`函数将右侧页面展开并逐渐恢复其透明度，完成翻页效果。 6. **性能优化**： 使用`setTimeout`函数而不是连续执行...
使用原生JS实现滚轮翻页效果的示例代码
11-20
在本文中，我们将深入探讨如何使用原生JavaScript实现滚轮翻页效果，这是一个常见的交互功能，常见于全屏切换或幻灯片展示中。我们首先会解析滚轮事件及其相关属性，然后分析提供的示例代码，最后理解并解释节流函数...
优雅的js翻页效果分享下载
06-30
1. 原生JavaScript：利用数组方法（如slice）筛选数据，结合DOM操作更新页面。 2. jQuery插件：如jQuery Pagination，提供简单易用的API，快速实现翻页功能。 3. UI框架组件：如React的react-paginate，Vue的vue-...
手机端书本翻页效果
08-12
3. **JavaScript库**：如jQuery Flip、PageFlip等库，通过JavaScript动态改变DOM元素的位置和大小来实现翻页，适合复杂和自定义的翻页效果。 4. **原生开发**：在iOS和Android的原生开发中，可以通过自定义视图和...
直角翻页效果，应该还不错
11-11
在移动应用开发中，如iOS和Android平台，开发者可以利用原生的图形库或者第三方库来实现翻页效果。例如，iOS的Quartz 2D框架可以进行图形绘制，而Android则有OpenGL ES等API可以用来创建3D翻页效果。此外，还有一些...
不错的js翻页效果
08-07
由js写的翻页，效果很炫，(上一页，下一页)
Django原生数据翻页
11-18
最近工作开发主要利用Django搭建公司后台系统，在开发中遇到数据分页（django原生翻页）问题，在研究后将自己的源码发布与大家共享，若在开发中遇到类似的问题可下载参考。
JS实现的图片翻页效果
03-18
NULL 博文链接：https://fxyc.iteye.com/blog/641760
纯css3书本翻页动画特效
09-08
纯css3书本翻页动画特效
css3 html5 4款纸张翻页切换效果实例.rar
07-10
css3 html5 4款纸张翻页切换效果实例，一种是四种翻页动画效果，单击图片可看到类似的翻页动画特效，测试时请抛弃IE，支持Chrome、火狐、360极速等多种浏览器，如示例图所示的为其中一种翻页效果的演示。
Django原生翻页
小小的屌丝，大大的学霸
08-02 433
Django翻页在使用django时，我们难免会遇到翻页的情况，下面记录一下我的翻页的学习#这里是我进行翻页的views.pyfrom django.core.paginator import Paginator,EmptyPage,PageNotAnInteger def users(request): #这里是自己编写的获取用户信息的函数 user_list =
【翻书特效 源代码---JS实现，附效果】
最新发布
2401_84094725的博客
04-08 731
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。你可能发现了我没有提到。
超酷JS拖拽翻页效果
荒的博客
07-23 151
<html> <head> <title>超酷JS拖拽翻页效果</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{ border:0px; margin:0px; overflow:hidden; background-color:transpar.
手机端原生上下翻页，左右翻页
qweasdzxc_1092665276的博客
04-19 924
转载自：https://github.com/HelloLeeChan/Exercise-Demo/blob/master/PageSlider/PageSliderDemo.html网址2：https://segmentfault.com/a/1190000003817077&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta char...
原生Javascript
05-28
原生 JavaScript 是指使用 JavaScript 语言本身提供的 API 和功能来实现功能和交互，而不依赖任何第三方库或框架。 原生 JavaScript 具有以下优点： 1. 轻量级：原生 JavaScript 代码比使用第三方库或框架的代码更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值