Jquery轻便分页实现情势,jquery插件之文字间歇自

2019-09-05 04:22 来源:未知

本文实例讲述了Jquery简单分页实现方法。分享给大家供大家参考。具体如下:

jquery插件之文字间歇自动向上滚动效果代码,jquery间歇

本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码。分享给大家供大家参考,具体如下:

此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续。整体代码如下:

<!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>
<style>
*{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
.box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:5px 5px 10px;overflow:hidden;}
.box ul li{line-height:25px;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<div class="box">
 <ul>
  <li>01这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>02这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>03这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>04这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>05这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>06这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>07这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>08这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>09这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
 </ul>
</div>
<script>
/*
* textSlider 0.1
* Dependence jquery-1.7.1.js
*/
;(function($){
 $.fn.textSlider = function(options){
   var defaults = { //初始化参数
      scrollHeight:25,
      line:1,
      speed:'normal',
      timer:2000
   };
   var opts = $.extend(defaults,options);
   this.each(function(){
     var timerID;
     var obj = $(this);
     var $ul = obj.children("ul");
     var $height = $ul.find("li").height();
     var $Upheight = 0-opts.line*$height;
     obj.hover(function(){
       clearInterval(timerID);
     },function(){
       timerID = setInterval(moveUp,opts.timer);
       });
     function moveUp(){
       $ul.animate({"margin-top":$Upheight},opts.speed,function(){
          for(i=0;i<opts.line;i++){ //只有for循环了才可以设置一次滚动的行数
           $ul.find("li:first").appendTo($ul);
          }
         $ul.css("margin-top",0);
       });
     };
     timerID = setInterval(moveUp,opts.timer);
     });
   };
})(jQuery)
</script>
<script>
$(function(){
  $(".box").textSlider({
    line:2
    });
  })
</script>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

js代码:

您可能感兴趣的文章:

  • jQuery插件实现无缝滚动特效
  • jQuery插件scroll实现无缝滚动效果
  • jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
  • JQuery插件iScroll实现下拉刷新,滚动翻页特效
  • 自己使用jquery写的一个无缝滚动的插件
  • jquery自定义滚动条插件示例分享
  • jquery 页面滚动到底部自动加载插件集合
  • jquery滚动条插件jScrollPane的使用介绍
  • 六款帮助你实现惊艳视差滚动效果的jQuery插件
  • jQuery插件实现文字无缝向上滚动效果代码

本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码。分享给大家供大家参考...

function dolistpage(pagerow,pagenum,rowcount,pagecount){
 $("#pagemsg").html("每页显示"+pagerow+"条,当前" + pagenum + "/" +pagecount + "页 共" +rowcount + "条");
 if (pagenum == 1) {
  $("#fpbtn").attr("disabled", true);
  $("#rpbtn").attr("disabled", true);
 }else {
  $("#fpbtn").removeAttr("disabled");
  $("#rpbtn").removeAttr("disabled");
 }
 if (pagenum == pagecount) {
  $("#npbtn").attr("disabled", true);
  $("#lpbtn").attr("disabled", true);
 }else {
  $("#npbtn").removeAttr("disabled");
  $("#lpbtn").removeAttr("disabled");
 }
 $("#fpbtn").click(function(){
  loadtpage(1);
 });
 $("#rpbtn").click(function(){
  loadtpage(pagenum - 1);
 });
 $("#npbtn").click(function(){
  if ((pagenum + 1) >= pagecount) 
   loadtpage(pagecount);
  else
   loadtpage(pagenum + 1);
 });
 $("#lpbtn").click(function(){
  loadtpage(pagecount);
 });
 $("#gpbtn").click(function(){
  var tzys = $("#gpinput").val();
  var re = /^[1-9]+[0-9]*$/;
  if (tzys == null || tzys == undefined || tzys == '') {
   alert("请输入跳转页数!");
   $("#gpinput").focus();
   return;
  }
  if (!re.test(tzys)) {
   alert("请输入正确跳转页数!");
   $("#gpinput").focus();
   return;
  }
  if (tzys > pagecount) 
   tzys = pagecount;
  if (tzys <= 0) 
   tzys = 1;
  loadtpage(tzys);
 });
 $("#gpinput").val(pagenum);
}

HTML代码:

<table>
 <tfoot>
  <tr>
   <td colspan="11">


     当前0/0页
     <input type="button" id="fpbtn" value="首页"/>
     <input type="button" id="rpbtn" value="上页"/>
     <input type="button" id="npbtn" value="下页"/>
     <input type="button" id="lpbtn" value="尾页"/>
     跳转
     <input type="text" id="gpinput" size="3" value="0"/>页

     <input type="button" id="gpbtn" value="跳转"/>

   </td>
  </tr>
 </tfoot>
</table>

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

您可能感兴趣的文章:

  • jQuery插件jPaginate实现无刷新分页
  • jQuery插件pagination实现分页特效
  • jQuery前端分页示例分享
  • 推荐一款PHP+jQuery制作的列表分页的功能模块
  • jquery向上向下取整适合分页查询
  • 分享一个自己动手写的jQuery分页插件
  • jQuery打印指定区域Html页面并自动分页
  • jQuery插件分享之分页插件jqPagination
TAG标签:
版权声明:本文由990888藏宝阁发布于网络应用,转载请注明出处:Jquery轻便分页实现情势,jquery插件之文字间歇自