JS实现当前页居中分页效果的方法_javascript技巧

本文实例讲述了JS实现当前页居中分页效果的方法。分享给大家供大家参考。具体实现方法如下:

function show_page(cur_pc)
{
  var cp=cur_pc;  //curent page count
  var tp=this.p;  //total page count
  var sp=this.pc;  //show page count
  var bp;      //begin page count
  var ep;      //end page count
  if(sp%2==0) sp=sp+1;   //this process need an odd number
  var dp=Math.floor(sp/2); //each side count to show
  var dif=tp-sp;  //check weather it have enough page to make mid-show
  var f=cp-dp;   //to check weather it has enough page to make mid-show from the begin
  var g=tp-(cp+dp); //to check weather it has enough page to make mid-show from the end
  if(sp && dif>=0)
  {
    if(g>0)
    {
      if(f>0)
      {
        bp=f;
        ep=cp+dp;
      }
      else
      {
        bp=1;
        ep=2*dp+1;
      }
    }
    else
    {
      bp=tp-2*dp;
      ep=tp;
    }
  }
  else
  {
    bp=1;
    ep=tp;
  }
  var buf=[];
  for(var i=bp;i<=ep;i++)
  {
    if(i==cur_pc)
    {
      buf.push("<a href='javascript:;' class='current'>",i,"</a>");
    }
    else
    {
      buf.push("<a href='javascript:;' class='normal'>",i,"</a>");
    }
  }
  document.write(buf);
}

运行效果如下图所示:

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
分页效果
jquery分页获取当前页、thinkphp 分页 当前页、分页保存后跳回当前页、分页算法 当前页、css 分页当前页特效,以便于您获取更多的相关知识。

时间: 2024-11-08 21:28:42

JS实现当前页居中分页效果的方法_javascript技巧的相关文章

原生Js实现简易烟花爆炸效果的方法_javascript技巧

本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d

JS基于递归实现倒计时效果的方法_javascript技巧

本文实例讲述了JS基于递归实现倒计时效果的方法.分享给大家供大家参考,具体如下: 效果: 事件: //发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>&qu

js实现简单鼠标跟随效果的方法_javascript技巧

本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动.   要点一: var oEvent = evt || window.event; 这个是为了兼容ie和ff而写的,在ie下window.event表示event对象,而ff下,是给事件函数传一个参数,这个参数就表示事件对象. 要点二: document.onmousemove = function(evt) 鼠标跟随是在鼠标移动时发生的事情.

PHP使用Mysqli类库实现完美分页效果的方法_php技巧

本文实例讲述了PHP使用Mysqli类库实现完美分页效果的方法.分享给大家供大家参考,具体如下: 本篇文章是基于的是我的上篇文章<PHP数据库操作之基于Mysqli的数据库操作类库>而量身打造,怎么使用 M 类库中的 FetchAll 方法做出完美分页. 分页在我们每个项目中都是必不可少的,而且出现的频率非常之多.这样就要求我们程序员在项目中怎样去以最快的速度.最简洁的代码去实现分页方案. 分页的实现大部分是依据 URL 传入的参数(一般是page)来实现,比如:http://localhos

JS图片定时翻滚效果实现方法_javascript技巧

本文实例讲述了JS图片定时翻滚效果实现方法.分享给大家供大家参考,具体如下: <!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

JS实现鼠标框选效果完整实例_javascript技巧

本文实例讲述了JS实现鼠标框选效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char

js实现交换运动效果的方法_javascript技巧

本文实例讲述了js实现交换运动效果的方法.分享给大家供大家参考.具体分析如下: 实现后的效果,点击互相交换位置和距离左边和上角的信息. 要点一: var now = s_pic_li[0]; for(var i=0; i<s_pic_li.length; i++){ s_pic_li[i].onclick = function(){ if(this == now) return false; var w = now.offsetWidth; var h = now.offsetHeight; v

JS实现文字掉落效果的方法_javascript技巧

本文实例讲述了JS实现文字掉落效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru&quo

js兼容火狐显示上传图片预览效果的方法_javascript技巧

本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type=&