注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

php asp 高端网站开发 微信网站开发 视频会议软硬件

 
 
 

日志

 
 

可用的动画,用插件velocity.min.js  

2017-01-07 15:37:02|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
可用的动画,用插件velocity.min.js - 加菲 - 面包会有的
 
效果如图

直接把下面的代码放在html中即可。
当然要保证代码中引用的js和css可访问。


<!DOCTYPE html>
<html class=''>
<head>
<meta charset="UTF-8">
<style>

.div_btn{display:table;width:100%;height:30px;background-image: url(bg.jpg);}
.div_btn .a{display:table;width:100%;height:520px;}
.div_btn .b{display:table;width:100%;height:80px;background-color:#f5f5f5;text-align:center;}
#btn1{margin:10px;}
</style>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    


<!-- 动画插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    

</head>

<body data-hijacking="off" data-animation="scaleDown">
<div id="testEle1" style=" position:absolute; width:100px; height:100px; background-color:#000; left:100px; top:100px;"></div>

<div class="div_btn">
    <div class="a"></div>
        <div class="b">
        <button id="btn1">动画开始一</button>
            <button id="btn2">动画开始二</button>
            <button id="btn3">动画开始三</button>
        </div>
    
    
    </div>
</body>


<script>
//1.基础用法一
/*
$("#testEle1").velocity({
left:800
},500)
*/

//2.基础用法二
/*
$("#testEle1").velocity({
left:800
},{
duration:2000
})
*/
//按钮1
$("#btn1").on("click",function(){
$("#testEle1").velocity({
left:800
},{
duration:2000
})
});

//按钮2
$("#btn2").on("click",function(){
// 标准写法
// (为了简洁,后面的示例代码中 将直接使用 $element 来代替 jQuery 选择器)
$("#testEle1").velocity({
left: "1600px"
}, {
duration: 450,
delay: 1000
});
// $.animate() 的写法,效果同上
$("#testEle1").delay(1000).velocity({left: "200px"}, 450);
});

//按钮3
$("#btn3").on("click",function(){
$("#testEle1").velocity({ opacity: 0.5 });
});


</script>







</body>
</html>
  评论这张
 
阅读(39)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017