使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib <!DOCTYPE html> <html><head><title>particle image</title><meta charset="utf-8" /><style>#logo {margin-left:20px;margin-top:20px;width:160px;height:48px;background:url(./images/logo.png);/*border: 1px solid red;*/}</style><script type="text/javascript" src="ParticleImage.js"></script><script>window.onload = functi...
本文实例讲述了JS动画效果打开、关闭层的实现方法。分享给大家供大家参考。具体如下: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>层展开、关闭</title> <style type="text/css"> #main{ width:500px; mar...
在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程。 <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <p>今年,战争、经济动荡和自然灾害席卷全球,制造了无数的伤痛;但是,在痛苦的同时仍有明亮的瞬间存在。</p> <p><a href="#">查看详情</a></p> </d...
本文实例讲述了js实现类似jquery里animate动画效果的方法。分享给大家供大家参考。具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果。 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,function(){ startrun(box,"opacity","100") }); }); }如上面,函数也可以做为参数使用,就...
HTML首先载入jQuery库文件和jquery.fly.min.js插件。代码如下: <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。代码如下: <div class="box"> <img src="images/lg.jpg" width="180" height="180"> <h4>¥<span>3499.00</span></h4> <p>LG 49L...
本文实例讲述了jQuery实现带动画效果的二级下拉导航方法。分享给大家供大家参考。具体实现方法如下:代码如下:<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery二级下滑导菜单</title> <script type="text...
本文实例讲述了JS实现超炫网页烟花动画效果的方法。分享给大家供大家参考。具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来代码如下:<!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> <title>超炫网页烟花效果</title> </head> <style type="text/css"...
本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法。分享给大家供大家参考。具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全。代码如下:代码如下:<html> <head> <title>js网页百叶窗动态切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:blue; background-color:blue; borde...
本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法。分享给大家供大家参考。具体分析如下: 此代码测试环境为IE9 以及GG、FF浏览器,IE8及以下浏览器可能不支持,希望理解。 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果。代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下:代码如下:<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现感应鼠标动画效果自动伸长的输入框<...
CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。 代码如下:$(#shang).click(function(){$(html,body).animate({scrollTop: 0px}, 800);});上面的代码表示滚动条跳到0的位置,页面移动速度是800。结合scrollTop实用示例: 代码如下:jQuery(document).ready(function($){ $(#shang).click(function(){ $(html,body).animate({...
实现原理:当色子掷出后,通过jQuery的animate()函数改变色子位移,中间加入延时效果,并变换色子背景,最终动画运行到随机产生的点数时停止,并显示掷出的点数。其实就是动画过程加入多个不同图片的帧(同flash动画影片中的帧),帧数越多效果越好,然后逐帧运行后就形成了动画效果。一、准备工作我们需要准备色子素材,本示例中,我采用从网络上获取到的色子素材,我们要做处理的是将6个色子图片(1-6点),以及中间过渡效果的图...
一、需求原因目前jQuery已经是一个比较成熟的框架了,而且基于他的插件也有上百种,本例我手动用jQuery实现一个动画效果的例子。 二、具体实现 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery实现动画效果</title><script language="JavaScript"src="../jQuery/j...
代码如下:/*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left,top,callback){ if (!left || typeof left == undefine...
代码如下:<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <style> .ld_anipic{ position:absolute; width:8px; height:8px; background-color:#ccc;} </style> <script>//ld动画组建//被加载的...