超级简单:用鼠标拖拽进行翻页

简介:

 在以前的一篇文章中涉及到自定义的分页: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://www.cnblogs.com/zhuqil/archive/2010/01/30/gesturePage.html,如需转载请自行联系原作者

相关文章
|
7月前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
1090 0
|
8月前
|
JavaScript 容器
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
878 0
|
10月前
|
JavaScript
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
211 0
|
编解码
【PyAutoGUI操作指南】02 鼠标控制功能+获取当前坐标+鼠标事件+鼠标滚动查询
左上角的像素位于坐标0,0。如果屏幕分辨率为1920 x 1080,则右下角的像素将为1919,1079(因为坐标从0开始,而不是1)。
609 0
|
前端开发
卡片布局以及鼠标悬浮展示全部
卡片布局以及鼠标悬浮展示全部
155 0
卡片布局以及鼠标悬浮展示全部
C#鼠标拖拽,移动图片实例
最近工作需要做一个鼠标可以拖拽移动图片的功能。写了几个基本功能,勉强能用。
496 0
C#鼠标拖拽,移动图片实例
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
1007 0