Amy安 2015-08-11 10:52 采纳率: 0%
浏览 5851
已采纳

整屏滚动页面滚屏触发animate动画效果

$(window).scroll(function(){
$(".djxm").animate({top: '-320px' }, "nomal");
});
这样的 要怎么用 求教

不懂jQuery 求教怎么套用 使整屏滚动页面 滚屏时触发当前屏的动画
  • 写回答

1条回答 默认 最新

  • danielinbiti 2015-08-11 12:12
    关注
     <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
   $(".djxm").animate({top: $(window).scrollTop() },100);
});
</script>
</head>
<body style="height:1000px">
<div class='djxm' style="background:#98bf21;height:100px;width:100px;margin:6px;position:absolute;">
</div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • html5全屏滚动实例 完美实现全屏滚动带动画
    2016-01-18 11:01
    AOS允许你在页面滚动时触发各种CSS动画，简化了全屏滚动动画的实现。 9. **SEO和可访问性** 在实现全屏滚动时，要确保SEO友好，如添加适当的元信息和标题，同时考虑辅助技术用户的需求，如提供键盘导航和屏幕阅读...
  • 使用wow.js和animate.css实现页面滚动动画效果
    2022-03-04 14:01
    我是大笨猪2号的博客 wow.js是一款结合了Animate.css，可以在页面向下滚动时，为页面中的元素加载动画的js。 项目地址：GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page CDN:Animate.csshttps://cdnjs.cloud...
  • vue中如何实现滚动页面的动画-animate.css和wow.js
    2022-03-11 18:18
    口袋の的天空的博客 第一种方法：npm安装包animate.css和wow.js 第二种方法：静态资源的引入 第一种方法： 1.引入静态资源包 静态资源包，需要注意的是。必须放到static文件夹下面 <!DOCTYPE html> <html> <head> ...
  • 触摸手机全屏上下滑动滚屏效果
    2021-06-01 20:43
    【标题】"触摸手机全屏上下滑动滚屏效果"涉及的是移动设备上网页的交互设计，特别是针对触摸屏手机的用户体验优化。这种效果使得用户可以通过手指在屏幕上上下滑动来实现网页内容的滚动，提供了更为直观和自然的浏览...
  • jQuery全页面横向定位滚屏.rar_earlyvsy_jQuery全页面横向定位滚屏
    2022-09-24 23:49
    "jQuery全页面横向定位滚屏"正是这样一种技术，它利用jQuery库的高效性和灵活性，为网页浏览带来全新的视觉效果。本文将深入探讨这一技术的原理、实现方式以及其在实际应用中的优势。 一、jQuery基础 jQuery是由...
  • 全屏大气横向滚屏定位jquery特效.zip
    2019-07-11 10:01
    4. **平滑滚动**：为了实现平滑的滚动效果，可以使用`$.animate()`方法，设置滚动速度和目标位置，使页面在一定时间内平滑地滚动到指定位置。 5. **定位技术**：理解CSS定位属性如`position: absolute`、`position:...
  • 页面全屏滚动特效（上下或左右）
    2016-10-12 09:17
    暮志未晚NAN的博客 前言：这个效果是在某个视频中看到的，效果还可以，就保存下来了 二话不说，先上代码 js的代码如下 /*! * PageSwitch 1.0 * */ (function($){ "use strict"; /*说明:获取浏览器前缀*/ /*实现：判断某个元素...
  • 网页设计中的PC全屏滚动交互技术
    2025-04-26 15:25
    马屿人的博客 整屏滚动是一种常见的页面交互方式，主要用于网页内容较多的情况，用户通过滚动条或者页面触摸操作实现内容的逐屏切换。这种设计方式可以提供更加流畅和沉浸式的浏览体验，特别适用于宣传型网站、个人博客或者展示型...
  • 长页面滚屏动画
    2019-08-13 09:39
    大东哦哦的博客 H5长页面 , 向上滑动 , 页面滚动到元素位置 , 元素显示并做动画显示 , 向下滑动 , 元素不在屏幕显示 , 元素取消动画now类并隐藏 , 方便再次滑动添加动画 Demo使用了 使用animate.css ...
  • 一种通用的jquery动画滚屏方案
    2022-07-25 16:42
    北京王老师的博客 实现效果在网站页面上，点击某个超链接，页面跳转到某个位置，跳转过程有一个动画滚动效果，这是一种比较酷的体验。这种效果是如何实现的呢，本文通过实际代码来详解实现方法。实现代码网页代码<!doctype html&gt...
  • jQuery全屏TAB页面切换特效代码
    2021-03-20 03:50
    5. **平滑过渡**：为了实现平滑的页面切换效果，可以使用`$('html, body').animate()`方法来改变滚动位置，而不是直接使用浏览器的默认滚动行为。这将使得滚动过程更加流畅。 6. **优化与兼容性**：为了保证在不同...
  • jQuery实现公告新闻自动滚屏效果实例代码
    2020-10-21 22:46
    - 利用`find`、`height`、`animate`等jQuery方法，实现了滚动效果的动画。 - 通过`hover`事件处理函数，实现了鼠标悬停时暂停滚动，鼠标移出时继续滚动的效果。 5. **功能实现** - `scrollUp`函数实现了向上滚动...
  • CSS3与HTML5结合实现的动态滚动效果案例
    2025-06-24 23:02
    黄冈新学爸的博客 <footer><section>等。这些标签不仅使HTML结构更清晰，还有助于搜索引擎和辅助技术更好地理解页面内容。示例代码：使用语义标签构建页面结构<header><h1>网站标题</h1><h2>文章标题</h2><p>文章内容...侧边栏内容...
  • cocoscreator中的自定义数字滚动效果
    2021-11-02 17:11
    在Cocos Creator游戏开发框架中，自定义数字滚动效果是一个常见的需求，特别是在表现数值变化、计分系统或者加载进度时。本知识点将深入探讨如何利用Cocos Creator的特性，结合TypeScript编程语言来实现这样的效果。...
  • HTML5与CSS3构建响应式全屏滚动页面
    2025-07-24 01:33
    韦先波的博客 本章将概述这两个技术如何在响应式设计中得到应用，并为后续章节...这些标签给开发者提供了一种方式，可以清晰地表示页面内容的结构和意义。语义化标签包括但不限于<header><footer><article><section><aside><nav>等。
  • 全页面横向定位滚屏.zip
    2019-07-04 21:04
    全页面横向定位滚屏是一种网页设计中的特殊效果，它允许用户在水平方向上滚动浏览页面内容，而不是传统的垂直滚动方式。这种效果常用于创建独特、引人注目的用户体验，尤其适用于展示宽幅图像、产品展示或者全屏广告...
  • 原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
    2016-12-04 23:53
    小白变怪兽的博客 滚滚屏 原生js 动画 滚轮 mousewheel
  • jQuery练习-全屏滚动
    2022-08-12 21:59
    幼儿园小班在读生的博客 全屏滚动可以看作竖向的轮播图，通过鼠标的滚轮的上滑或下滑操作，向上或向下滑动一整屏。实现思路如下：设置行高100%的盒子，设定溢出隐藏（overflow: hidden）属性，盒子里嵌套着一个大盒子，用于装下轮播显示的小...
  • html全屏上下滑动,页面全屏滚动特效（上下或左右）
    2021-06-13 03:29
    时光琉璃盏的博客 前言体朋几一级发等点确层数框的很屏果行4带域：这个效果是在某个视频中看到的，效果还可以，直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如数围请就保存下来了二话不说，先遇新是直朋能到分览上代码js的...
  • 没有解决我的问题, 去提问