- 浏览: 290876 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
kane0409:
NB,解决了,我是把里面两个文件夹中的文件单独复制到eclip ...
解决initializing java tooling(1%) -
string2020:
那如果不采用Tomcat容器认证,怎么办?
Tomcat Session共享 -
hety163:
删除当前工作目录下的WORKSPACE/.metadata/. ...
解决initializing java tooling(1%) -
fox13754888170:
害的我好惨啊 每天工具不动弹 领导还以为我偷懒呢。。。。 ...
解决initializing java tooling(1%) -
ywc123zk:
十分感谢,myeclipse8.0也出现这种情况,用你的方法解 ...
解决initializing java tooling(1%)
<html> <head> <title>animate</title> <script type='text/javascript' src="jquery/jquery-1.3.1.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ // 在一个动画中同时应用三种类型的效果 $("#go").click(function(){ $("#block3").animate({ width: "200px", height: "200px", fontSize: "20px", borderWidth: "1px", top:"400px", left:"400px", opacity: "show" }, 3000 ); }); $("#stop").click(function(){ $("#block3").stop(); }); $("#right").click(function(){ $(".block").animate({left: '+50px'}, "slow"); }); $("#left").click(function(){ $(".block").animate({left: '-50px'}, "slow"); }); $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); $("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); }); </script> <style> .showDiv { width:100px; height:100px; border:1px red solid; display:none; position:absolute; left:50px; top:50px; color:#C7EDCC; background-color:#C7EDCC; filter: Alpha(Opacity=60); opacity: 0.6; } .block { width:200px; height:200px; border:1px red solid; position:absolute; left:100px; top:100px; color:#C7EDCC; background-color:#C7EDCC; filter: Alpha(Opacity=60); opacity: 0.6; } </style> </head> <body> <input type="button" value="run" id="go" /> <div id="block3" class ="showDiv">Hello!</div> <input type="button" value="stop" id="stop" /> <br> <input type="button" id="left" value="left"/> <input type="button" id="right" value="right"/> <div class="block"></div> <br> <p>adjfksdjfl</p> <br> <input type="button" id="go1" value="Animate Block1" /> <input type="button" id="go2" value="Animate Block2" /> <div id="block1">Block1</div><div id="block2">Block2</div> </body> </html>
效果自己点击看看吧,我就不多说了。。
- animate.rar (140 KB)
- 下载次数: 2133
评论
14 楼
kukuwuwu
2010-03-29
很讨厌那些不尊重别人劳动成果的人
有问题就说问题,发什么牢骚啊!
发帖子本来就是让人交流的
不是让你们评论好坏的!
还有那些随便 给人投隐藏贴的人
一点都不尊重别人的劳动成果
有问题就说问题,发什么牢骚啊!
发帖子本来就是让人交流的
不是让你们评论好坏的!
还有那些随便 给人投隐藏贴的人
一点都不尊重别人的劳动成果
13 楼
xinchen1224
2010-03-26
我试过了,达到了楼主说的效果,呵呵,正好在学习这个,呵呵。
12 楼
iamlomen
2010-03-05
yhjhoo 写道
在不同浏览器下竟然有乱码,垃圾
自己菜就別老亂評價別人,技術的路上最忌諱浮躁,那樣的話 你的路不會很長!
11 楼
ring09h
2010-02-05
有颤抖效果,LZ难道没发现?
10 楼
orcl_zhang
2010-02-05
左右,移动的效果不错。
9 楼
leafcold
2010-02-05
试了一下,还不错。
8 楼
hsys
2010-02-04
如果说我的程序测试不足和js错误,我真的没有办法了,我这边的IE8和Firefox都是好的,没有js错误,至于乱码,确实是我的文件有问题,不过我目前只是发现在Firefox的firebug下会出现乱码,在页面上不会的,这是因为我是用UtralEdit编写的程序,保存的时候,编码是默认的,所以有这个问题,大家可以不用我上传的文件,自己写一遍,也可以拷贝上面的。
7 楼
suny95210
2010-02-04
发帖前,测试做的不足,错误很多
6 楼
xukunwzq
2010-02-04
呵呵 我这下载下来后看不了,js错误。。。
5 楼
xiaojiit
2010-02-04
看了一下,left,right 这个效果还可以 。
4 楼
haiyupeter
2010-02-04
是不是用了linux?
3 楼
wing5jface
2010-02-04
LZ我试过在IE6,firefox, chrome下浏览都没有问题,是不是没有取得正确的html造成?
我按楼主的附件文件保存为UTF-8格式,并添加在<head>部分添加
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
我按楼主的附件文件保存为UTF-8格式,并添加在<head>部分添加
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2 楼
yhjhoo
2010-02-04
在不同浏览器下竟然有乱码,垃圾
1 楼
wing5jface
2010-02-03
楼主做的在线效果可以下述网页即时观看,的确很好用(主机0205已修复,看来要注重网站安全呵)
http://www.sh2999.com/sh/jqueryShow/animate/animate.html
简单将Jquery改用为Google加速载入
即由
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
改为-------->
<script src="http://www.google.com/jsapi" language="javascript">
</script>
<script language="javascript">
google.load("jquery", "1.3.2");
</script>
http://www.sh2999.com/sh/jqueryShow/animate/animate.html
简单将Jquery改用为Google加速载入
即由
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
改为-------->
<script src="http://www.google.com/jsapi" language="javascript">
</script>
<script language="javascript">
google.load("jquery", "1.3.2");
</script>
发表评论
-
IE8下getElementsByName的问题
2011-07-11 12:43 1209在IE8下getElementsByName(name)获取 ... -
JS解决PNG图片在IE6下不透明的问题
2010-12-20 13:20 3953可恶的IE6,各种阻碍,各种难,中国还是IE6消亡最大的障碍, ... -
jquery操作select
2010-08-05 14:24 1418获取选中项的值 $jq("#mselect op ... -
JS时间格式化(短日期)
2010-08-05 14:21 2483JS时间格式化(短日期),如new Date() 转成2010 ... -
Javascript垂直方向轮播
2010-06-04 17:56 3195<style type="text/c ... -
javascript判断浏览器核心
2010-05-31 13:07 1309/** * 判断浏览器核心 * @return I ... -
jquery.autocomplete的使用
2010-05-17 15:04 1341$jq(document).ready(functio ... -
Jquery+timers插件实现图片轮转
2010-03-22 15:59 1650很多网站上多有轮转图片,有的是用flash的,有的是用js的, ... -
Jquery 实现复制到剪贴板
2010-03-04 09:21 11585不兼容Firefox <html> < ... -
Jquery文档处理的几种效果
2010-02-21 16:40 991Jquery文档处理的几种效果 <html> ... -
Jquery show hide toggle
2010-02-01 18:41 2884<html> <head> & ... -
兼容FireFox和IE8的设为首页和添加收藏
2010-02-01 18:40 1323设置首页和添加收藏是很常用的JS脚本,但是我以前经常用的那些脚 ... -
Jquery表单验证
2010-02-01 12:52 1852首先加一段HTML代码: <!DOCTYPE HTM ... -
JQuery实现淡入淡出效果
2010-01-29 17:51 2614以前一直用JavaScript,现在发现了Jquery的UI简 ... -
动态设置Ckeditor的尺寸
2010-01-27 11:55 1596<input type='textarea' i ... -
js实现拖动层,兼容IE/FireFox
2010-01-22 11:19 1597先添加一个div层 <div id='pop-ed ... -
JQuery找控件
2010-01-22 09:21 1402先将Jquery的包含进来 $("#&q ... -
收藏的JavaScript树(11种)
2010-01-20 13:39 839http://www.jb51.net/web/21947.h ... -
调用CkEditor
2010-01-19 14:20 1195首先包含以下js <script language= ... -
CKeditor配置大全
2010-01-19 12:12 17410第一步:基本配置 CKEditor + CKFinder ...
相关推荐
记住,良好的代码组织和性能优化也是实现高效动态效果的关键,例如,避免过度使用动画以减少不必要的计算负担。现在,你已经掌握了使用jQuery实现动态背景效果的基础,不妨动手实践,创造属于自己的独特设计吧!
本文将深入探讨几种使用jQuery实现的动态图片加载效果,并提供相关的代码示例。 1. **渐进式加载(Lazy Loading)** 渐进式加载是一种优化网页性能的技术,它只在图片进入浏览器视口时才开始加载。这对于拥有大量...
本篇文章将详细探讨jQuery的几种使用方法,帮助你更好地理解和运用这一强大的工具来提升网页设计的效率和用户体验。 1. **DOM操作**:jQuery的核心功能之一就是对HTML文档对象模型(DOM)进行操作。通过选择器,如`...
**jQuery文档处理的几种效果详解** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作,使得开发者可以更加便捷地处理HTML文档。本文将深入探讨jQuery在文档处理方面的一些常见...
"jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画,它能够以吸引人的视觉方式展示网页内容正在加载的过程,使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用,尤其在内容分块...
jQuery的`animate()`函数是实现动态效果的核心,它可以控制元素的样式属性(如位置、透明度等)随时间平滑变化,从而创建出各种动画效果。 在这个特效中,主要涉及以下几个关键技术点: 1. **图片轮播容器**:通常...
本文将详细探讨jQuery中的几种特效,帮助你更好地理解和运用这些功能。 一、淡入淡出(FadeIn/FadeOut) jQuery提供了FadeIn()和FadeOut()方法来实现元素的渐显渐隐效果。FadeIn()方法让元素逐渐变得可见,而...
在实现jQuery全屏视差滚动效果时,主要涉及以下几个关键知识点: 1. **jQuery选择器**:jQuery提供了丰富的选择器,如ID选择器(`$("#id")`)、类选择器(`.class`)和元素选择器(`$("element")`),用于快速定位...
6. **动画效果**:JQuery的`animate()`方法可以创建平滑的动画效果,如菜单项的淡入淡出或滑动。结合`scrollTop()`方法,可以控制滚动条的位置,实现平滑滚动到指定菜单项对应的内容区域。 7. **优化性能**:为了...
jQuery库本身提供了一系列方法,如`.animate()`、`.fadeIn()`、`.slideUp()`等,用于创建各种动态效果。开发者可能会定义函数或编写事件处理器,以便在用户交互时触发广告的切换、淡入淡出或其他动态行为。 总结来...
在网页设计中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了JavaScript代码的编写,尤其是在处理复杂的用户交互和动画效果...通过深入理解并实践这些代码,可以进一步提升对jQuery和网页动态效果的掌握。
描述中的“超酷jQuery图标排列动画效果”可能涉及到几种常见的jQuery动画技术,比如淡入淡出(`fadeIn()`, `fadeOut()`)、滑动(`slideToggle()`)或者自定义动画。这些动画可能应用于图片的加载、切换或者鼠标悬停事件...
1. 动画效果:抽奖插件的核心在于动态效果的呈现,如旋转、滚动、随机选择等。jQuery强大的动画功能使得这些效果得以流畅地实现,如使用`.animate()`方法进行平滑过渡。 2. 随机性:确保抽奖结果的公正性,插件通常...
"jQuery学习必备10几种经典特效"是一个针对初学者和中级开发者的重要资源,它包含了一系列预封装的特效源码,可以帮助你快速掌握jQuery的核心功能和特效实现。 首先,我们来看一下“特效核心”。这个部分通常涵盖了...
幻灯片效果主要有以下几种类型: 1. **123数字效果**:这种效果通常用于显示幻灯片的当前页数和总页数,例如“1/3”,当用户切换幻灯片时,数字会随之更新,提供一个清晰的导航指示。 2. **卡片式滑动**:这种效果...
如果在项目中只需要用到部分easing效果,为了减少文件大小和加载时间,可以只将需要的几种easing效果的JavaScript代码拷贝到自己的脚本文件中,而不是整个jQuery Easing Plugin文件。例如,如果你只需要"easeOutExpo...
综上所述,`animate()`是jQuery中实现动态效果的重要手段,通过合理的重复调用,我们可以创建出各种复杂的动画场景。同时,理解并掌握不同的调用方式和控制技巧,有助于我们在项目中实现更加灵活和高效的效果。
jQuery默认提供了几种内置的easing效果: 1. `swing`:这是jQuery的默认缓动效果,模仿了传统物理运动的加速和减速,类似于钟摆的摆动。 2. `linear`:线性缓动,动画在整个过程中保持恒定的速度,没有加速或减速。 ...
jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得开发者可以更加高效地创建动态和交互式的网页。我们将讨论以下几个关键知识点: 1. **jQuery基本概念**:首先,我们需要...
通过`$(window).scroll()`监听滚动事件,配合CSS样式改变,实现动态效果。 2. **图片轮播**:利用JQuery,可以构建各种类型的图片轮播插件,如Fade、Slide等过渡效果,结合定时器和索引控制,让图片展示更加生动。 ...