jQuery实现用鼠标拖拽进行翻页

在以前的一篇文章中涉及到自定义的分页: http://www.cnblogs.com/zhuqil/archive/2010/01/02/custompagingandlisting.html,今天很郁闷,在 其中加入一个小功能:用你的鼠标拖拽进行分页:鼠标向右拖翻到后一页;鼠标向左拖,翻到前一页。

首先下载最新版本的jQuery 和jGesture 插件。在以前的分页源程序中加入下面代码。

js

<script src="Scripts/jquery-1.3.1.js"  type="text/javascript"></script>
     <script src="Scripts/jgesture-1.0.3.js" type="text/javascript"></script>
     <script type="text/javascript">
         $().ready(function() {
             $().gesture(function(gs) {
                 var gestureName = gs.getName();
                 var intPageIndex = document.getElementById ('txtHidPageIndex').value
                 if (gestureName == "right") {
                     doPaging(++intPageIndex);
                 }
                 else if (gestureName == "left") {
                     if (intPageIndex > 1)
                         doPaging(--intPageIndex);
                 }
             });
         });
       </script>

用gestureName进行判断,如果鼠标向右拖拽,intPageIndex++,如果鼠标向左拖拽,intPageIndex-- 。

出处:http://zhuqil.cnblogs.com

代码: http://files.cnblogs.com/zhuqil/custompagingandlisting.rar

本文配套源码:http://www.bianceng.net/javascript/201212/700.htm

时间: 2024-12-28 07:23:25

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-eq

Flash电子书鼠标拖拽翻页效果原理

翻页|鼠标 最近要做些电子书,本来准备去网上买现成的翻页效果的组件,但一看报价吓一跳,而且执行效率也不高,一个叫AsFlipPage4.0的组件CPU占用率高居70%,喊价1000RMB,真是黑心商人.下载了几个开源的程序自己也看不懂.于是一咬牙自己做了一个,并放上源程序.过两星期再把变量接口做好,免费发布. 设置遮罩和阴影之后的最终品: 主要原理: 将电子书分为3个内容层,叠放顺序如图.第一层为当前页面层,是现在正在显示的页面:第二层是随鼠标拖拽时卷起的页角,第三层是当页角卷起时,露出下一页的

jquery实现鼠标拖拽滑动效果来选择数字的方法_jquery

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

html5-js实现鼠标拖拽div块释放鼠标打开文件

问题描述 js实现鼠标拖拽div块释放鼠标打开文件 左边一列导航栏,右面有个大的div块,想实现在导航栏中拖动div块到中间的div块中.鼠标将目标拖动到div中**释放鼠标打开导航栏的链接**应该怎么写?新手小白在网上找了一些东西 看不懂这是我改后的代码 拖动放到此处 $(document).ready(function(){ $(""#firstpane .menu_body:eq(0)"").show(); $(""#firstpane p

jQuery实现的简单拖拽功能示例_jquery

本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; ba

jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)_jquery

本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

Java实现鼠标拖拽移动界面组件_java

默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖拽移动窗口的目的呢?最开始,我简单的在mouseDragged方法里frame.setLocation(e.getX(), e.getY()),结果,frame拖拽的时候不停地闪烁,位置在屏幕上不断跳动.后来网上查资料,找到了答案.  这里给一个简单的示例,一看就明白: package com.je

js实现使用鼠标拖拽切换图片的方法_javascript技巧

本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

jQuery实现div横向拖拽排序的简单实例_jquery

实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"