演示图：

特效说明：

一款jQuery插件jqfloat网页动画场景网页特效，生动的动画场景网页，给人更加丰富的想象力，增强了网站的互动性、趣味性，jqfloat动画插件便于我们制作一些动画特效，该插件兼容一切支持js主流浏览器。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

使用方法：

1、调用CSS样式：
<link rel=”stylesheet” href=”style.css” />

2、调用JS插件代码：
<script src=”js/jquery-1.7.1.min.js”></script>
<script src=”js/jqfloat.min.js”></script>

3.JS动画实例代码：
<script>
$(document).ready(function() {

$(‘.cloud’).each(function() {
$(this).jqFloat({
width:Math.floor(Math.random()*10)*10,
height:10,
speed:Math.floor(Math.random()*10)*100 + 500
});
});
$(‘#sun’).jqFloat({
width:10,
height:50,
speed:1800
});
$(‘.butterfly’).jqFloat({
width:400,
height:100,
speed:1500
});
$(‘#snail, #message’).jqFloat(‘stop’,{
width:5,
height:0,
speed:30
});
$(‘#snail, #message’).hover(function() {
$(this).jqFloat(‘play’);
}, function() {
$(this).jqFloat(‘stop’);
});

var clicked = false;
//define balloon attribute
$(‘#balloon’).jqFloat(‘stop’,{
width:5,
height:30,
speed:1500,
minHeight:300
});
$(‘#balloon’).on(‘click’, function() {
clicked = !clicked;
if(clicked)
$(this).jqFloat(‘play’);
else
$(this).jqFloat(‘stop’);
});

});
</script>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。