使用的jQuery可以很容易的应用JavaScript动画,下面的例子演示了常用的操作,请复制下面的例子调试,并参照注释
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.hover
{
cursor: pointer; /*小手*/
background: #ffc; /*背景*/
}
#switcher
{
position: relative; /*相对定位否则,移动位置是无效的,默认是Static*/
}
.label
{
width: 130px;
}
.button
{
width: 140px;
padding: 5px;
margin: .5em 0;
border: 1px solid #e3e3e3;
position: relative; /*相对定位否则,移动位置是无效的,默认是Static*/
}
#brave
{
position: relative; /*相对定位否则,移动位置是无效的,默认是Static*/
}
.more
{
color: Red;
}
</style>
<script type="text/javascript">
//下面懂得功能是点击“更多”显示第二段内容
$(document).ready(function() {
$('p:eq(1)').hide(); //首先初始化先隐藏第二段p:eq(1)第二个p标记
$('span.more').click(function() {
// 如何显示第二段
//$('p:eq(1)').show('speed');
//$('p:eq(1)').show('slow');
//$('p:eq(1)').fadeIn('slow'); //透明度
//antimate(一对一对的样式属性和值,动画速度,缓动,回调函数)
$('p:eq(1)').animate({ height: "show", width: "show", opacity: "show" }, 'slow', function() { alert('贺词已经打开'); }); //(显示高度,显示宽度,显示不透明度,速度0.6秒,未填,返回函数)
$(this).hide(); //隐藏“更多”按钮
});
});
//下面代码的功能是单击按钮改变字体的大小
$(document).ready(function() {
$('div.button').click(function() {
var $speech = $('div.speech'); //获得div,$speech 中的$符号没有任何特别的意义只是用来标记这个变量里面是一个对象
var currentSize = $speech.css('fontSize'); //获得尺寸,备注:返的值中包含单位,比如:30px 这样需要分离
var num = parseFloat(currentSize, 10); // 获得值,parseFloat的功能是获得以数字开头的字符串的数值部分,第二个参数代表十进制
var unit = currentSize.slice(-2); //获得值的单位,slice(-2)为获得从倒数第二个开始的子字符串
if (this.id == 'switcher-large') { //判断是那个按钮
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + unit); //使用的是驼峰标记,右侧的值经过合并
});
});
//点击标签类label -“按钮移动”
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').width(); // 获得宽度
var $button = $('div.button'); //
var buttonWidth = $button.width(); //
var paddingRight = $button.css('paddingRight'); //
var paddingLeft = $button.css('paddingLeft'); //
var borderRightWidth = $button.css('borderRightWidth'); //
var borderLeftWidth = $button.css('borderLeftWidth'); //parseInt()为返回字符串右侧开始的整数值
var totalButtonWidth = parseInt(buttonWidth, 10) + parseInt(paddingRight, 10) + parseInt(paddingLeft, 10) + parseInt(borderRightWidth, 10) + parseInt(borderLeftWidth, 10); //计算标签按钮的宽度
alert('按钮宽度:' + totalButtonWidth);
var rightSide = paraWidth - totalButtonWidth; //总宽度-152,是移动到的右侧位置
$button.animate({ 'left': rightSide, height: 38 }, 'slow'); //(动画,速度)并发两种效果1位置,2高度
});
});
//当点击H2标签时候的效果--“jQuery中的动态效果应用(所有小手指针都可以点击)”
//排队效果方法,一个接着一个的实现
$(document).ready(function() {
$('h2').click(function() {
$('div.button')
.fadeTo('slow', 0.5, function() { $(this).css('backgroundColor', '#fff'); }) // 设置不透明度为50%,随后对非效果方法,进行排列使用
.animate({ left: 650 }, 'slow') // 移动位置
.fadeTo('slow', 1.0, function() { $(this).css('backgroundColor', '#f00'); }) // 设置不透明度为100%,随后对非效果方法,进行排列使用
.slideUp('slow', function() { alert("按钮已经被隐藏"); }); //由下自上的减小高度隐藏元素
});
});
//排列非效果方法,使用回调函数
$(document).ready(function() {
$('p:eq(3)').css('backgroundColor', '#fcf').hide(); //初始化设备背景色并隐藏
$('p:eq(2)').css('backgroundColor', '#cff').click(function() { //设置背景色并设置单击事件
var $thisPara = $(this); //保存这个元素,方便随时使用,这点很重要,否则会出现意想不到的对象调用
$thisPara.next().slideDown('slow', function() { //1向下打开他的下一个元素
$thisPara.slideUp('slow'); //2向上收起他自己,这个函数将在slideDown执行完后执行
});
});
});
// 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开
$(document).ready(function() {
$('h2, div.button, div.label, span.more, p:eq(2)').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<h2>
jQuery中的动态效果应用(所有小手指针都可以点击)</h2>
<div id="switcher">
<div class="label">
按钮移动</div>
<div class="button" id="switcher-large">
字体加大</div>
<div class="button" id="switcher-small">
字体减小</div>
</div>
<div class="speech">
<br />
冯瑞涛祝愿您和家人:
<p>
欢欢喜喜迎新年,万事如意平安年,扬眉吐气顺心年,事业成功辉煌年,合家欢乐幸福年,身体健康万万年!<span class="more">更多</span></p>
<p>
盈盈相思,温馨祈愿,祝你春节快乐。愿春节的欢声笑语和欢乐气氛永远萦绕着你。新年快乐!事业有成! 不需要多么贵重的礼物,也不需要多么郑重的誓言,我只需要你一个甜甜的微笑,作为我新年最珍贵的礼物。
春节的祝福,平日的希冀,愿你心境祥和、充满爱意,愿你的世界全是美满,愿你一切称心如意,快乐无比。 春节树上的雪花,悄然无声地飘落,远处悠扬的钟声,开启着你我的心扉,让幸福洒满人间。朋友,新年好!
好久没有听到你的声音,好久没有人听我谈心,在雪花飞舞的日子里,真的好想你,祝新年快乐,牛年吉祥! 江湖中人,游子之心,春节恭祝,事业有成,事事顺利!新年进步!一路走过的朋友,我永远真诚祝福着你!
新年祝福语:牛年的钟声在天地间激起深沉而宏大的回音,让我们的震天的爆竹声中,以美好的祝愿共同迎接另一个春天!
</p>
<p>
鸿运滚滚来,四季都发财。新年好事多,幸福喜颜开。步步再高升,事事顺着来。老友多联系,莫将我忘怀!</p>
<p>
新年大吉!收集我心中的每一份祝福,每一种愿望,描绘我心中的每一道细节,每一个企盼,寄予你深切的关怀。 新年祝福语:新年快乐!万事大吉!合家欢乐!财源广进!恭喜发财!工作顺利!爱情甜蜜!吉祥如意!四通八达!福运齐至!
春节祝福短信:愿所有的期许及祝福涌向你,让你的佳节洋溢着喜悦,更祈望你一年比一年更加璀璨美好。新年快乐,牛年进步!
</p>
</div>
</div>
</form>
</body>
</html>
分享到:
相关推荐
用jQuery制作的各类demo,包括表单验证、倒影轮播、离子效果、局部透镜、透明字母、日历、天气预报、透明字母、下雪特效、WIN8风格网站等等(包括最新的jQuery3.1版本),欢迎各位体验
jQuery 中的简单实用的网页中div弹出效果 超酷!
jquery仿IPad应用的实例...包含简单的效果和动画
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不用的应用程序。 jQuery是一个轻量级的脚本,其代码非常小巧,JavaScript包只有15K左右。 ...
超漂亮的jquery时钟效果,应用在页面上,让你的页面更美丽
NULL 博文链接:https://zmx.iteye.com/blog/648730
摘要:jQuery 入门指南 学习文档 范例打包 效果应用 jQuery_api,此包在手,jQuery学习无忧。
为您提供-基于jquery特效,jquery弹出层效果,js特效代码大全,JS广告代码,导航菜单代码,下拉菜单代码和jquery焦点图片代码。
另外,如果你长按住按钮不放,图片的洗牌效果就会更加明显和有趣,该jQuery图片特效一共有3中效果。 在线演示 源码下载 2、简单实用的jQuery横向图片滚动焦点图插件 之前我们分享了不少焦点图插件,包括jQuery焦点...
RIA应用开发:6-jQuery动画效果.ppt
静态html比较多 完全JQUERY模拟效果 @2012.2.24 webos 1.1 JS采用面向对象编写 仿webQQ基本功能 支持拖拽 桌面切换 右键 1级栏布局切换 应用自适应布局 @xiaofan @2012.3.9 webos 1.2 新增全局模式 @只支持...
1、jQuery/CSS3书本翻页动画特效 多功能选项支持 这是一款基于jQuery和CSS3的书本翻页动画特效,该书本翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。我们可以点击左右翻页按钮进行翻页,也可以...
jquery仿mac效果插件 jquery仿mac效果插件
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件。jQuery插件不仅能够增强网站的可用性,有效地改善用户体验,还可以大大减少开发...本文档列举了几款jQuery实现超炫效果的实例源码,希望对你有所帮助。
RIA应用开发实验指导书:实验四 jQuery动画效果.doc
JQuery的几个精典应用实例,包含菜单的设计,文件上传,树型结构,验证,滑动效果等,绝对经典,绝对有用。
<br>jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不用的应用程序。 <br>jQuery是一个轻量级的脚本,其代码非常小巧,JavaScript包...
刚刚介绍完jQuery打飞机游戏,现在我们来点实用的,来分享一款基于...手风琴效果即图片一张张层叠在一起,鼠标滑过图片时即可展开完整的图片,这样的效果很常见,所以应用也很广泛,大家可以试试这款jQuery焦点图。
此作品是一款效果非常好看的jQuery特效,实现图片遮罩动画过渡提示效果,应用范围很广,可以使用到产品展示、相册展示里面,加上了此特效就多了一类似flash实现的动画效果,利用Jquery的动画插件animate实现的。