页面全屏无限滚动切换图片

// 监听鼠标滚轮事件
window.addEventListener('wheel', function(e) {
    if (!e.deltaY) return;
    if (e.deltaY > 0) {
        // up
    } else if (e.deltaY < 0) {
        // down
    }
});
// 监听过度动画结束事件
window.addEventListener('transitionend', function() {
    // 执行相应代码
})

// 监听触摸事件
scroll.addEventListener('touchstart', function (e) {
    // 开始时的位置
    const startClientY = e.changedTouches[0].clientY;
    scroll.addEventListener('touchend', function (e) {
        // 结束时的位置
        const endClientY = e.changedTouches[0].clientY;
        // 移除监听事件
        scroll.removeEventListener('touchend', arguments.callee);
    });
});

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的全屏页面切换特效的示例代码,可以用来实现网站的页面切换效果。代码中使用了 jQuery 和 CSS3 动画效果。 HTML 代码: ``` <div class="page-container"> <div class="page" id="page1"> <h1>Page 1</h1> <p>This is the first page.</p> </div> <div class="page" id="page2"> <h1>Page 2</h1> <p>This is the second page.</p> </div> <div class="page" id="page3"> <h1>Page 3</h1> <p>This is the third page.</p> </div> </div> ``` CSS 代码: ``` body { margin: 0; padding: 0; overflow: hidden; } .page-container { position: relative; width: 100%; height: 100%; } .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .page.active { display: block; } .page.in { animation: fadeIn 1s ease-in-out; } .page.out { animation: fadeOut 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } ``` JavaScript 代码: ``` $(document).ready(function() { showPage($("#page1")); $(".nav-link").click(function(event) { event.preventDefault(); var page = $($(this).attr("href")); showPage(page); }); }); function showPage(page) { $(".page.active").addClass("out"); setTimeout(function() { $(".page.active").removeClass("active out"); page.addClass("in active"); }, 1000); } ``` 在这个示例中,页面通过一个包含多个子页面的容器来实现。每个子页面都是一个具有唯一标识符的 DIV 元素,并且通过 CSS 的绝对定位来覆盖整个容器。每个页面的默认状态是隐藏的,只有在它们被激活时才会显示。 当用户点击导航链接时,JavaScript 代码会获取目标页面的 ID 并使用 showPage() 函数来切换页面。该函数首先将当前活动页面标记为“out”,然后使用 CSS 动画效果淡出该页面。在动画完成后,该页面的“active”和“out”类都被删除,而目标页面则被标记为“in”和“active”,并使用 CSS 动画效果淡入。 此外,该代码还使用了 jQuery 和 CSS3 动画效果来实现页面切换效果。在这个示例中,我们使用了“fadeIn”和“fadeOut”动画,它们分别在页面淡入和淡出时播放。 以上就是一个简单的全屏页面切换特效的示例代码,你可以根据自己的需要进行修改和定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DevilAngelia

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值