js炫酷小球沿着直线跑动导航条特效源码分享
来源:互联网 发布:程序员的电脑屏幕 编辑:程序博客网 时间:2024/06/05 15:47
在线预览特效地址:
http://www.zuidaima.com/html/2251669926857728/index.html
最近一直在做企业的网站,今天分享一个前端的demo主要想分享的就是js。
主要的效果,先上图吧。如下:
哈~ 盗了一下最代码的logo,大牛不要怪罪我啊。
这里因为没有部署到网上,我就描述一下主要的动画效果吧!
第一个效果:里面有个小球的 会沿着红色的线条跑,遇到圆就会绕一圈然后接着跑直线,遇到圆又绕着圆跑,直到把直线都跑完为止,然后重新开始跑,这是第一个动画效果。
第二个效果:数据悬浮在任何一个圆上,小球都会一直绕着圆跑直到鼠http://标离开,当鼠标离开后,小球又冲开始的位置开始跑。
说说原理吧:其实就是利用css里面的位置偏移,小球是张gif动态图片,利用css对小球的位置事实改变就导致了我们看见的这个效果了。里面主要是分两个效果,一个是直线运动,一个是画圆运动。
其中,直线运动核心代码:
1
$(
'#point'
).css({left:(startX++)+
'px'
,top:startY});
圆的主要核心代码,如下:
1
startX = circleX-(Math.cos(angle)*radius);
2
startY = circleY-(Math.sin(angle)*radius);
3
$(
'#point'
).css({left:startX+
'px'
,top:startY});
利用高中数学里面的两个函数 cos()和sin()画圆。
有用的到的牛牛们,来下载吧!(ps:之前说过了,搞定了分享出来的,大神勿喷!)
下载地址:http://www.zuidaima.com/share/2251669926857728.htm
1 0
- js炫酷小球沿着直线跑动导航条特效源码分享
- JS特效之鼠标滑动导航条
- js滚动条特效
- 弹性小球flash导航菜单源码
- 简单使用SurfaceView实现小球跑动
- js控制导航变色 特效
- js特效子导航不随滚动条滚动而改变
- js导航条
- 源生js导航条
- tween.js 导航条
- 手风琴JS特效源码
- js特效之“分享栏”
- 炫酷的导航条
- js导航条(下拉菜单)
- js、jquery菜单导航条
- js+css简单导航栏特效
- JS jquery 炫酷特效
- 炫丽的导航特效
- HibernateTemplate_HibernateCallback_HibernateDaoSupport (http://blog.sina.com.cn/s/blog_8020e411010)
- 第一周项目三 时间类
- The operator == is undefined for the argument type(s) int, null
- 准备自己做块飞控,先看看方案
- Codeforces 520E Pluses everywhere (组合+逆元+规律)
- js炫酷小球沿着直线跑动导航条特效源码分享
- Android主管消息提示的Toast.makeText用法
- 第一章第三题
- mongodb 学习笔记之二 mongodb入门(数据库、文档和集合)
- 使用Condition类控制线程通信
- Apple watch 开发指南(3) 开发apple watch(翻译原创)
- SSH无密码登录远程主机(cygwin --> Ubuntu)
- Android 签名打包应用介绍
- hbase0.94协处理器实例