当前位置: 首页>后端>正文

jQuery网站banner代码 用jquery制作网页案例

 

 

 

工作原理


 

jqFloat.js 使用 jQuery.animate() 方法无限循环进行动画处理的对象到不同的位置,因此它使对象出现在 web 页上浮动。它使用 jQuery.data() 方法来存储和跟踪每个对象的属性和状态。

jqFloat.js

 

使用方法


1. 在头部引用jquery文件,


<script src="jquery.min.js"></script> <script src="jqfloat.js"></script>


 


 


 

2. 在任何需要浮动的元素上调用jqfloat()函数




jQuery网站banner代码 用jquery制作网页案例,jQuery网站banner代码 用jquery制作网页案例_jQuery网站banner代码,第1张

View Code

 


 

 在看看超棒的效果


jQuery网站banner代码 用jquery制作网页案例,jQuery网站banner代码 用jquery制作网页案例_jquery_02,第2张

 点击气球,他会跳,点击蜗牛,他不让你动,哈哈

函数配置:


.jqFloat( [Method] [, Options] )

Method: 用于控制浮动对象。
Options: 配置浮动动画的数组。



关于Method

目前只有两个方法可用::

Play (or no method specified)
开始浮动的动画

Stop
开始登陆的动画.

Options

有几个选项可以用于配置浮动动画

width
Type: Int Default: 100 --int类型 默认是100
水平方向的最大浮动距离. 将数值除以2所得的结果定位在左边和右边.

height
Type: Int Default: 100int--类型 默认是100
垂直方向的最大浮动. 将数值除以2所得的结果定位在上面和下面.

speed
Type: Int Default: 1000---int类型 默认是1000
最大浮动速度.

minHeight
Type: Int Default: 0
浮动对象从底部/表面的距离

 

具体代码


jQuery网站banner代码 用jquery制作网页案例,jQuery网站banner代码 用jquery制作网页案例_jquery_03,第3张


1 $(document).ready(function() {
 2    //如果没有指定方法和选项
 3    //浮动元素使用默认的方法
 4    $('object').jqFloat();
 5  
 6    //如果仅仅指定选项
 7    //浮动元素按照指定的大小浮动
 8    $('object').jqFloat({
 9       width: 300,
10       height: 300,
11       speed: 100
12    });
13  
14    //停止浮动
15    $('object').jFloat('stop');
16  
17    //开始浮动
18    $('object').jFloat('play');
19 });


jQuery网站banner代码 用jquery制作网页案例,jQuery网站banner代码 用jquery制作网页案例_jquery_03,第3张


 


https://www.xamrdz.com/backend/3j71964218.html

相关文章: