阅读模式:

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

查看:3768  回复: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 0

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

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
把php session 会话保存到redis   阅读:3617crontab+shell脚本实现定时备份mysql数据库   阅读:3008mysql共享锁和排他锁详解   阅读:3153nginx编译安装后对nginx进行平滑升级   阅读:1394centos 7 安装 nginx-1.11.10   阅读:4317Mysql在大型网站的应用架构演变   阅读:2386mysql的四种索引类型   阅读:6910php压缩页面的html代码一行显示   阅读:3608mysql 为什么添加索引可以提高访问速度   阅读:2941HTTP 1.1 协议详解   阅读:3198给网站添加一键新浪微博登录的功能   阅读:3429用php从1乘到100的值   阅读:3187php+redis实现消息队列   阅读:3369javascript获取两个日期间的所有日期   阅读:1140网站性能优化-页面静态缓存   阅读:2780shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:4493最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:17557centos 7.2 添加php7 的 php-fpm 开机启动   阅读:12649浅谈javascript的函数节流   阅读:2080linux php7安装yaf扩展   阅读:3157centos7开启交换内存   阅读:4467linux php7编译安装mongodb扩展   阅读:3369linux top命令详解   阅读:3149浅谈javascript的函数节流   阅读:2080面试都会问你为什么你从上一家公司离职的真实意思   阅读:5567centos7开启交换内存   阅读:4467centos 7 修改系统屏幕分辨率   阅读:23012移动端js触摸touch详解(附带案例源码)   阅读:7443mysql的四种索引类型   阅读:6910封装php redis缓存操作类   阅读:3736php 使用 smtp.php 类在线发送邮件功能   阅读:2889mysql5.7开启sql日志的配置   阅读:3538纯干货,程序员面试的超实用技巧   阅读:1931linux时间戳有趣的情人节秒1234567890   阅读:2448浅谈javascript的函数节流   阅读:2080php翻转字符串   阅读:175php+redis实现消息队列   阅读:3369javascript获取两个日期间的所有日期   阅读:1140php 读取和设置redis的键值   阅读:3898nginx编译安装后对nginx进行平滑升级   阅读:1394linux时间戳有趣的情人节秒1234567890   阅读:2448比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:2460phpexcel 超简单从数据库一键导出数据到excel教程   阅读:3638shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:4493linux教程,鸟哥私房菜(pdf全集)   阅读:2417php 统计网页打开耗时和脚本运行内存   阅读:3326mongodb设置shell开机启动脚本   阅读:3906什么是天使轮?什么是A轮融资?B轮融资?   阅读:1683linux rarcrack破解rar、zip和7z压缩包简单密码的工具   阅读:5168十张GIF让你弄懂递归等概念   阅读:2705