阅读模式:

Jquery滚动div位置滑动动画效果

查看:7955  回复:0  类型:  来源:php自学网  标签 javascript jquery

        当鼠标滚动时div也跟着滚动,鼠标停止滚动后,div回到原来位置的动画效果简单实现(适合做网站广告或者推荐的效果):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动div位置滑动回来动画效果</title>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<style type="text/css">
   .huaxia { position:absolute; top:70%; left:60%; background:#f1f1f1; width:120px;height:50px;border:1px solid red;}
</style>
</head>
<body style="height:2000px;">

<div class="huaxia">适合网站广告滚动动画效果</div>

<script type="text/javascript">
   var st=0;
   var wh;
   var wh3;
   $(window).scroll(function(){
      wh=$(window).height();
      wh3 = wh/3;
      st=$(this).scrollTop();
      topm=st+wh3;
         $('.huaxia').animate({'top':topm},50);
   });
</script>
</body>
</html>

在线预览:Jquery滚动div位置滑动动画效果

分享到:
0 1

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
栈和堆的区别   阅读:5360栈和堆的区别   阅读:5360企业让你去面试,可能不是真的招人   阅读:6190比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:5675Nginx 配置文件详解   阅读:5173php设置cookie为HttpOnly防止XSS攻击   阅读:13254纯干货,程序员面试的超实用技巧   阅读:4569面试都会问你为什么你从上一家公司离职的真实意思   阅读:11590企业让你去面试,可能不是真的招人   阅读:6190php 读取和设置redis的键值   阅读:7618爱编程,也爱健康   阅读:4617centos 7 设置 nginx-1.11.10 开机启动   阅读:8337phpexcel 超简单从数据库一键导出数据到excel教程   阅读:7671linux php7安装yaf扩展   阅读:8925phpexcel 超简单从数据库一键导出数据到excel教程   阅读:7671TCP的三次握手(建立连接)和四次挥手(关闭连接)   阅读:4073linux时间戳有趣的情人节秒1234567890   阅读:5773Mysql在大型网站的应用架构演变   阅读:4998用php从1加到100的值   阅读:9157html5 离线缓存的使用   阅读:4639centos 7搭建zabbix3.4   阅读:6929centos 7搭建zabbix3.4   阅读:6929javascript获取两个日期间的所有日期   阅读:7110爱编程,也爱健康   阅读:4617最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:11419一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:132930session与cookie的区别   阅读:4425web项目高并发量网站解决方案   阅读:4947mysql数据库性能的基本优化   阅读:4762php冒泡排序法   阅读:14903比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:5675mysql数据库性能的基本优化   阅读:4762一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:132930网站局部小图片优化-base64编码图片   阅读:19148mysql的四种索引类型   阅读:23279网站局部小图片优化-base64编码图片   阅读:19148ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:10071浅谈javascript的函数节流   阅读:4994centos 7.2 添加php7 的 php-fpm 开机启动   阅读:25400web项目高并发量网站解决方案   阅读:4947linux时间戳有趣的情人节秒1234567890   阅读:5773php swoole搭建简单的聊天室   阅读:4725centos 7 安装 redis 3.2.9   阅读:6941用php从1乘到100的值   阅读:6612mysql的四种索引类型   阅读:23279javascript获取两个日期间的所有日期   阅读:7110php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:6115php文件下载防盗链   阅读:10300mysql5.7主从同步配置   阅读:6549centos 7 安装 samba 服务   阅读:7200