今天讲的是JQ 的动画效果
老规矩,先贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
</head> <style>
body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}
.box{
width: 200px;
height: 200px;
background: #e9e9e9;
border: 1px solid #e6e6e6;
margin-top: 50px;
line-height: 200px;
position: absolute;
}
button{
border: none;
background: green;
width: 100px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 16px;
}
</style> <body>
<button>点击开始动画</button> <div class="box" >
Hello!你好
</div> <script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
right:'150px',
});
});
});
</script> </body>
</html>
先是 作出了 简单的 滑块向右滑动了 150px 的 JQ 代码
要点:
1、事件按钮的选择,并且与click 点击事件 函数相连接 起来
2、节点的选择。在上述的例子中就是 “.box”
3、滑块的 css 属性当中 必须有 position 的 属性值在里面 才能 配合 这个 animate();运动起来
接下来 再 写一个 稍微复杂一点的效果
jQuery animate() - 使用队列功能
明天再贴代码,小冰子君已经玩儿嗨了...
今天讲的是JQ 的动画效果的更多相关文章
- Javascript动画效果(二)
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- jQuery演示8种不同的图片遮罩层动画效果
效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 基于canvas实现物理运动效果与动画效果(一)
一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...
- 运动曲线提升CSS动画效果
原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
随机推荐
- 7款应用最广泛的Linux桌面环境盘点
转载:http://top.jobbole.com/34823/ 多样性应该是 Linux 最好的特性之一,用户可以不断尝试各种喜欢和新鲜玩法与花样,并从中找出最适合自己的应用.无论你是 Linux ...
- 【BZOJ-3653】谈笑风生 DFS序 + 可持久化线段树
3653: 谈笑风生 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 628 Solved: 245[Submit][Status][Discuss] ...
- 【BZOJ-3306】树 线段树 + DFS序
3306: 树 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 792 Solved: 262[Submit][Status][Discuss] De ...
- Jenkins邮件扩展插件【Email Extension Plugin】的参数使用
经过测试,无论在windows还是linux,统一使用参数时,都是按照linux的格式,如:${WORKPASE}
- Uva1624 Knots
极其鬼畜的题. 初见根本没有思路. 二见根本没有思路. …… 多年(并不)之后突然想到,也许可以用链表模拟. 先用链表把每一个节点串起来,并对有覆盖的地方进行标记. 模拟解锁操作,如果一个节点和它所覆 ...
- FT232RL变砖之后
FT232RL是个是神奇的片子,说万能可能有些夸张,但是...总之就是FTDIChip这个神奇的公司基于类似的技术,做了很多好用的产品,包括转IIC啦,转SPI啦,密码狗啦之类的.是个很有用的工具就对 ...
- [IOS NSUserDefaults]的使用:登陆后不再显示登录界面。
之前搜了好多地方都没找到实现“登陆后不再显示登录界面,而默认自动登录”的方法. 待我发现有种存储方式叫NSUserDefaults的时候,立马又感觉新技能get了. 简介: NSUserDefault ...
- HDU 4757 Tree
传送门 Tree Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others) Prob ...
- python *args **kwargs
简单来说,当你传入的参数不能确定是几个的时候会用到 *args和**kwargs,这里星号后边只是个代号,你写成a也可以. 而这两者的区别是 如果是键值对就要用后者,反之前者就可以. 同时还可以用(a ...
- Beta版本——第四次冲刺博客
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...