已经有两年多没登陆csdn账号了，中间做了些旁的事，可是现在却还是回归程序，但改做前端了，虽然很多东西都已忘得差不多了，但还是应该摆正心态，慢慢来，在前端漫游，做一只快乐双鱼。 路是一步一步走出来的，知识是一点一滴积累的，记录是笔财富，来吧，一起学着总结做笔记。 这几天在写后台文章的一些页面，为了能得到更好的交互性，需要做一些效果，js无疑使不二之选，但由于浏览器的兼容性一直差强人意，所以选用jquery框架，...
源代码： 代码如下:谷歌主页动画.animate{ height:156px; width:97px; background:url(images/gumby11-gumby.jpg) no-repeat; background-position:-15581px center;}$(function(){ var offset = -15678; $('#start').click(function(){ var timer = setInterval(function(){ offset += 98; $('#animate').css({ 'background-position':offset + 'px center' }); if(offset > 0){ clearInterval(timer); } },50)...
其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。 这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按钮就会停止移动。 代码如下: JavaScript Motion Sample var movingID = null; var scrolling = false; function startMo...
代码如下: *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding:5px; cursor:pointer;} .content{ text-indent:15px;} $(function(){ $("h5.head").toggle(function(){ $("div.content").fadeOut(3000); },function(){ $("div.content").fadeIn(3000); }); }) 什么是jQuery? JQuery是继prototype原型之...
代码如下: [code] *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding:5px; cursor:pointer;} .content{ text-indent:15px;} $(function(){ $("h5.head").hover(function(){ $("div.content").slideUp(3000); },function(){ $("div.content").slideDown(3000); }); }) 什么是jQuery? JQuery是继protot...
基本动画代码：代码如下:Hello World jQuery! $(document).ready(function(){ //基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本//并且都提供了两个参数的重载，如show( speed, [callback] ), //callback,签名如下:function callback() {this;}在回调函数中的this 是执行此函数的DOM 对象. 会在动画结束时执行.//因为回调函数可以省略, 所以可以传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果的...
下边我就简单说一下过程和原理。第一步：实现一个匿名函数并能自己执行。 代码如下:（function(){ }）() 这个函数在一样编的好的JS代码中经常会见到，起到闭包，自动执行的效果，在函数后加一对()表示自动执行，前边的匿名函数需要用()包起来，这样才能为宿主（我们的BOM环境）理解，里面的function(){}这就是个匿名函数。第二步：实现动画，以改变一个box的秀明度来说明。id为animation的div 代码如下: 要实现animation的透明渐...
代码如下: Spiral var Spiral; var yjq; (function(){ yjq = function(name,turns,duration,frame,count,decrease_time){ $('style.enable_remove').remove(); $('[id^=test]').css({'position':'absolute','width':10,'height':10,'top':300,'left':300,'background':'black'}); Spiral(name+'1',600,300,300,300,turns,duration,frame); Spiral(name+'2',300,0,300,...
代码如下:/*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...
代码如下:无标题文档 .ld_anipic{ position:absolute; width:8px; height:8px; background-color:#ccc;} //ld动画组建//被加载的divIDfunction ldAni(contain_id,id_flag,start_id){ this.contain_id=contain_id; this.id_flag=id_flag; this.start_id=start_id; this.a = new Array(); this.tempa=new Array(); this.Add_cmd=function(cmd){ this.a.unshift(cmd); }; this.bakdata=function(){ this.tempa = this.a.concat...
由于项目中多处要给ajax提交的时候增加等待动画效果，所以就写了一个简单的通用js方法；代码如下： 代码如下:/*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms：表示loding图标显示的时长，毫秒//envent：表示出发事件的事件源对象，用于获得出发事件的对象//callback：表示动画结束后执行的回掉方法//stop（）方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding....
一、需求原因目前jQuery已经是一个比较成熟的框架了，而且基于他的插件也有上百种，本例我手动用jQuery实现一个动画效果的例子。 二、具体实现 代码如下:jQuery实现动画效果 #test { position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer; } $(function(){ $("#test").css("optcity","0.5");//设置...
实现原理：当色子掷出后，通过jQuery的animate()函数改变色子位移，中间加入延时效果，并变换色子背景，最终动画运行到随机产生的点数时停止，并显示掷出的点数。其实就是动画过程加入多个不同图片的帧（同flash动画影片中的帧），帧数越多效果越好，然后逐帧运行后就形成了动画效果。一、准备工作我们需要准备色子素材，本示例中，我采用从网络上获取到的色子素材，我们要做处理的是将6个色子图片（1-6点），以及中间过渡效果的图...
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实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下：代码如下:jQuery实现感应鼠标动画效果自动伸长的输入框body { margin:0; padding:0; font-size:12px; } a:link { color:#1553a9; text-decoration: none; } a:visited { text-decoration:none; color: #1553a9; } a:hover { text-decoration:none; color: #f46662; } a:active { text-decoration: none; color:#f46662; } #ma...