单侧区域滑动效果

http://www.gamersky.com/news/201706/920789.shtml

function HomeScroll(n, t) {
  function u() {
    var y = $(window).scrollLeft(), c = $(window).scrollTop(), w = $(document).height(), u = $(window).height(), o = i.height(), s = r.height(), l = o > s ? e : f, a = o > s ? r : i, b = o > s ? i.offset().left + i.outerWidth(!0) - y : r.offset().left - i.outerWidth(!0) - y, h = o > s ? s : o, v = o > s ? o : s, p = parseInt(v - u) - parseInt(h - u);
    $(n + "," + t).removeAttr("style");
    u > w || h > v || l > c || h - u + l >= c ? a.removeAttr("style") : u > h && c - l >= p || h > u && c - l >= v - u ? a.attr("style", "margin-top:" + p + "px;") : a.attr("style", "_margin-top:" + (c - l) + "px;position:fixed;left:" + b + "px;" + (u > h ? "top" : "bottom") + ":0;")
  }

  if (!navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i) && $(n).length > 0 && $(t).length > 0) {
    var i = $(n), r = $(t), f = i.offset().top, e = r.offset().top;
    $(window).resize(u).scroll(u).trigger("resize")
  }
}
function HomeScrollL(n, t) {
  if (!navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i) && $(n).length > 0 && $(t).length > 0) {
    var i = $(n), u = $(t), r = i.offset().top;

    function f() {
      var s = $(window).scrollLeft(), f = $(window).scrollTop(), h = $(document).height(), n = $(window).height(), t = i.height(), e = u.height(), c = u.offset().left - i.outerWidth(!0) - s, o = parseInt(e - n) - parseInt(t - n);
      h < n || t > e || f < r || f <= t - n + r ? i.removeAttr("style") : n > t && f - r >= o || n < t && f - r >= e - n ? i.attr("style", "margin-top:" + o + "px;") : i.attr("style", "_margin-top:" + (f - r) + "px;position:fixed;left:" + c + "px;" + (n > t ? "top" : "bottom") + ":0;")
    }

    $(window).resize(f).scroll(f).trigger("resize")
  }
}
function HomeScrollR(n, t) {
  if (!navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i) && $(n).length > 0 && $(t).length > 0) {
    var u = $(n), i = $(t), r = i.offset().top;

    function f() {
      var s = $(window).scrollLeft(), f = $(window).scrollTop(), h = $(document).height(), n = $(window).height(), e = u.height(), t = i.height(), c = u.offset().left + u.outerWidth(!0) - s, o = parseInt(e - n) - parseInt(t - n);
      h < n || t > e || f < r || f <= t - n + r ? i.removeAttr("style") : n > t && f - r >= o || n < t && f - r >= e - n ? i.attr("style", "margin-top:" + o + "px;") : i.attr("style", "_margin-top:" + (f - r) + "px;position:fixed;left:" + c + "px;" + (n > t ? "top" : "bottom") + ":0;")
    }

    $(window).resize(f).scroll(f).trigger("resize")
  }
}
HomeScroll(".Mid1_L,.Mid2_L", ".Mid1_R,.Mid2_R");
时间: 2024-11-23 08:00:44

单侧区域滑动效果的相关文章

Js效果:图片轮播;选项卡;侧面菜单下拉效果;进度条效果;滑动效果;好友列表选中效果;点击选中显示效果

选项卡效果表: <body><div id="aaa"> <div class="bbb" style="width:50px; height:30px; background-color:#3F0" onclick="Show('d1')">娱乐</div> <div class="bbb" style="width:50px; height

原始战争之主界面滑动效果

简介:在弄一个横版的游戏,需要一个随鼠标左右滑动的功能,最终做了一个拖动的效果. 鼠标左右移动界面也滑动 实际做的时候,搜了一下没有滑动的方案,那就假想游戏界面长度大于窗口界面(类比给卷轴加游标),然后根据鼠标左右移动事件,去计算卷轴应该在的位置,然后更新界面.如果左右移动处理麻烦(滚动速度太快或太慢,现在如果玩红警95就存在鼠标移动速度问题),也可以在血条中间加上一个滑动条,来精确的控制位置. 打算用图片来模拟卷轴大小 来用一个光头的图片来模拟的时候,发现一个问题: QLabel设置大小无效问

仿一个好玩的滑动效果

起因 昨天跑步的时候,看到一个app(华为手机自带的运动健康)上的滑动效果很有意思,回来之后就想着,能不能在dom上实现一下,于是有了这篇文章.首先看一下效果图,滑动下面的绿色滑块可以看到效果: 贴出app上的效果图,模仿效果可以说是差强人意吧: 实现 其实原理很简单,就是在小圆点移动时,计算数字和小圆点的距离,来控制数字的上升和下降. 首先,要使小圆点跟随鼠标移动起来:代码如下: slide.addEventListener('mousedown', function(e){ e.preven

实现ViewPager多页面滑动效果

 viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前焦点页

android UI之ViewPager多页面滑动效果

  viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前

Android第六期 - ViewPage与菜单栏本地页面监听滑动效果

首先是JiaoyuzixunActivity.java代码部分: package com.gaoxiaotong.ctone.jiaoyuzixun; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import org.json.JSONArray; import org.json.JSONO

Fort.js – 时尚、现代的表单填写进度提示效果

Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradient.Sections 以及 Flash 四种效果,满足开发的各种场合需要. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 时尚设

点击enter回车键实现表单元素切换焦点效果

点击enter回车键实现表单元素切换焦点效果:现在网站都比较追求人性化,比如填写表单的时候,能够实现点击回车就可以切换表单元素的焦点,这样比使用鼠标进行切换更能让人接受,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScr