`

手机e.pageY

    博客分类：
  • js
手机e.pageY 
阅读更多 
var topnode = document.querySelector('#top')
function change() {
    var y = document.scrollingElement.scrollTop
    // or
    // var y = window.pageYOffset
    var ratio = Math.min(0.8, y / 100)
    topnode.style.opacity = ratio
}
document.addEventListener('touchmove', change)
document.addEventListener('scroll', change)
分享到：
| ssl客户端关闭，将导致服务端Tomcat服务关 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    手机触屏滚动切换效果 js

    var startY = e.originalEvent.touches[0].pageY; }); $('#scrollableContent').on('touchmove', function(e) { e.preventDefault(); // 阻止默认的滚动行为 var endY = e.originalEvent.touches[0].pageY; ...

    手机端网页上下手指滑动图片切换效果代码

    var startY = e.originalEvent.touches[0].pageY; }); slider.on('touchmove', function(e) { var moveY = e.originalEvent.touches[0].pageY; var deltaY = moveY - startY; // 根据滑动方向切换图片 if ...

    手机触摸屏事件

    在探讨“手机触摸屏事件”这一主题时，我们首先需要理解触摸屏技术的基本原理以及它在现代移动设备中的应用。触摸屏是一种输入设备，通过人体（通常是手指）与屏幕表面的接触来控制设备，实现人机交互。在手机等移动...

    手机+pc端刮刮卡

    var dy = Math.abs(startY - e.pageY); var maxDist = Math.sqrt(dx * dx + dy * dy); var opacity = 1 - maxDist / 100; // 设置最大刮擦距离（可调整） if (opacity ) opacity = 0; if (opacity >= $(this)....

    jquery手机屏幕放大镜效果

    本篇主要介绍如何使用jQuery库来实现手机屏幕上的放大镜效果。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在实现放大镜效果时，jQuery可以帮助我们更加...

    JavaScript监听触摸事件代码实例

    JavaScript中的触摸事件是针对移动设备（如智能手机和平板电脑）设计的，用于处理用户的触摸屏幕操作。这些事件在用户与屏幕交互时触发，比如手指触摸、滑动或离开屏幕等。在本文中，我们将深入探讨如何使用...

    js滑屏事件

    特别是在手机等触摸设备上，滑动屏幕是一种非常直观且便捷的操作方式。本文将围绕“js滑屏事件”这一主题进行深入探讨，通过解析给定的代码片段来详细讲解如何利用JavaScript实现滑屏事件的处理。 #### 二、滑屏...

    针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。

    if (scrollTop === 0 && touch.pageY ) { e.preventDefault(); } // 阻止底部上拉 if (scrollBottom >= document.body.offsetHeight - 5) { e.preventDefault(); } } }, {passive: false}); // passive ...

    用jQuery特效代码制作iphone手机界面放大镜

    var mouseY = e.pageY - mainImage.offset().top; // 计算放大镜的位置和大小 var magWidth = magnifier.width(); var magHeight = magnifier.height(); var ratioX = magWidth / imgWidth; var ratioY = ...

    jquery仿京东商城产品详细效果,京东图片放大效果.rar

    var y = e.pageY - $(this).offset().top; var ratio = $(this).width() / $('.large').width(); $('.large').css({ 'left': -x * ratio, 'top': -y * ratio }); }); ``` 5. **图片懒加载优化** 对于性能...

    手机端滑动插件

    本项目名为“手机端滑动插件”，主要关注的是如何在不同尺寸的手机屏幕上实现平滑的滚动效果。这涉及到前端开发中的CSS单位转换、JavaScript事件处理以及可能的jQuery库的使用。 首先，我们要理解`rem`单位。`rem`...

    图片预览 相册预览 图片放大

    y = e.pageY - $zoom.height() / 2; $zoom.css({ left: x, top: y }); }); }); ``` 以上代码仅为示例，实际应用中可能需要根据具体需求进行调整和优化。例如，考虑性能问题，我们可能需要使用懒加载技术，只在...

    【JavaScript源代码】JavaScript实现电商平台商品细节图.docx

    var y = e.pageY - this.offsetTop; // 调整遮罩层的位置 var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; var maskMax = box.offsetWidth - mask.offsetWidth; if (maskX )...

    jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图

    var touchStartY = e.originalEvent.touches[0].pageY; $(this).on('touchmove', function(e) { var touchMoveY = e.originalEvent.touches[0].pageY; if (Math.abs(touchStartY - touchMoveY) > 50) { e....

    html5 touch事件实现触屏页面上下滑动(二)

    触控屏幕设备如今已成为手机、平板电脑等移动设备的标配，所以优化这些设备上的页面滚动体验是非常重要的。本文将详细介绍如何使用HTML5的touch事件来实现一个触屏页面上下滑动的功能，并在页面滑动到最顶部或最底部...

    js判断手机和pc端选择不同执行事件的方法

    例如，在移动端的`touchstart`事件中，事件对象`e`具有`touches`数组，包含了触点信息，而在PC端的`mousedown`事件中，则直接使用事件对象`e`的`pageY`属性。因此，需要根据不同设备的事件对象属性来编写相应的处理...

Magicbox
Global site tag (gtag.js) - Google Analytics