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

问题描述

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

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

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

解决方案

 <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>

时间: 2016-07-01
Tags: 动画, jquery

jquery-整屏滚动页面滚屏触发animate动画效果的相关文章

原生js实现jquery函数animate()动画效果的简单实例_javascript技巧

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

js实现类似jquery里animate动画效果的方法_javascript技巧

本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

jQuery实现的选择商品飞入文本框动画效果完整实例_jquery

本文实例讲述了jQuery实现的选择商品飞入文本框动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery平滑滚动页面到某个锚点程序

返回到顶部  代码如下 复制代码 $(function() { $(window).scroll(function() { if ($(window).scrollTop() >= 100) {   $('#go-top').fadeIn(300);   } else {    $('#go-top').fadeOut(300);   }   });   $('#go-top').click(function() {   $('html,body').animate( {    scrollTo

基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载_jquery

基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示    源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l

利用jquery制作滚动到指定位置触发动画_jquery

利用CSS3的 animation 动画特性来完成的,对IE的兼容性不是太好,适用与手机端. <!doctype html> <html> <head> <meta charset="utf-8"> <title>sas</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.

jquery animate 动画效果使用说明_jquery

animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就

js实现类似jquery里animate动画效果的方法

 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: 1 2 3 4 5 6 7 8 startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,function(){ startrun(box,"opacity"

jQuery的animate函数实现图文切换动画效果

  animate()在jquery中作为一个方法,可用于创建动画效果,jquery中的animate()方法让那个页面增加了很好的视觉效果 在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. ? 1 2 3 4 5 6 7 8 <div class="wrap">    <img src="images/s1.jpg" alt="