jquery实现的鼠标下拉滚动置顶效果

2024-08-03 15:51:10

$(function(){
    //置顶按钮显示/隐藏实现
    $(window).scroll(function(){
      var w_height = $(window).height();//浏览器高度
      var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度
      if(scroll_top > w_height){
          $("#goto-top").fadeIn(500);
        }else{
          $("#goto-top").fadeOut(500);
      }
    });
  //置顶
  $("#goto-top").click(function(e){
      e.preventDefault();
      $(document.documentElement).animate({
        scrollTop: 0
        },200);
      //支持chrome
      $(document.body).animate({
        scrollTop: 0
        },200);
    });
  })
</script>
<style type="text/css">
  #goto-top {
    display:none;
    position:fixed;
    width:38px;
    height:36px;
    background:url(images/goto-top.png) no-repeat 0 0;
    bottom:40px;
    right:40px;
    -webkit-transition:all 0.2s;
    -moz-transition:all 0.2s;
    -o-transition:all 0.2s;
    transition:all 0.2s;
    z-index:9999;
  }
  #goto-top:hover {
    background:url(images/goto-top.png) no-repeat 0 -36px;
  }
</style>
</head>

jquery实现标签上移、下移、置顶

eg:如在后台的标签列表中,实现上移.下移.置顶功能主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果是则给点相应提示,好让操作者知道发生了什么事情. 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如:.prev()当前元素上面的标签 .next()当前元素下面的标签 .after()xxx之后添
jQuery实现表格行上下移动和置顶效果

我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <
Android仿QQ左滑删除置顶ListView操作

最近闲来无事,于是研究了一下qq的左滑删除效果,尝试着实现了一下,先上效果图: 大致思路原理: - 通过设置margin实现菜单的显示与隐藏 - 监听onTouchEvent,处理滑动事件上代码 import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.MotionEvent; import android.v
jQuery实现表格行上移下移和置顶的方法

本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <ti
Android自定义组合控件之自定义下拉刷新和左滑删除实例代码

绪论最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记
C# SetWindowPos窗口置顶使用说明

复制代码代码如下: [DllImport("user32.dll", CharSet = CharSet.Auto)] private static extern int SetWindowPos(IntPtr hWnd, int hWndInsertAfter, int x, int y, int Width, int Height, int flags); /// <summary> /// 得到当前活动的窗口 /// </summary> /// <
导航跟随滚动条置顶移动示例代码

复制代码代码如下: #topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0} <script type="text/javascript"> jQuery(document).ready(function() { var topmenu = jQuery("#topm
Android使用SwipeListView实现类似QQ的滑动删除效果

QQ的滑动删除效果很不错,要实现这种效果,可以使用SwipeListView. 1. 下载com.fortysevendeg.swipelistview这个项目(以前GitHub上有,现在GitHub上没有了,百度了很多次才下载到的),导入Eclipse,右键单击,选择Properties->Android,选中Library下面的IsLibrary. 2. 新建一个项目MySwipeListView,加入SwipeListView这个库. 3. 在主窗体里面放入一个SwipeListView控
Android ListView实现仿iPhone实现左滑删除按钮的简单实例

需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN:<BR> // 获取按下的条目视图(child view) int childCount = getChildCount(); int[] listViewCo
Android下拉刷新上拉加载更多左滑动删除

一.前言老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相! 现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue;

jquery实现的鼠标下拉滚动置顶效果

相关推荐

随机推荐