基本动画代码：代码如下:<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Hello World jQuery!</title><script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript">$(document).ready(function(){ //基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本//并且都提供了两个参数的重载，如show( speed, [callback] ), //callback,签名如下:function callback()...
代码如下:<html> <head> <meta charset="utf-8"/> <style> *{ 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;} </style> <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> <script> $(function(){ $("h5.head").toggle(function()...
代码如下:[code] <html> <head> <meta charset="utf-8"/> <style> *{ 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;} </style> <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> <script> $(function(){ $("h5.head").hover(func...
已经有两年多没登陆csdn账号了，中间做了些旁的事，可是现在却还是回归程序，但改做前端了，虽然很多东西都已忘得差不多了，但还是应该摆正心态，慢慢来，在前端漫游，做一只快乐双鱼。 路是一步一步走出来的，知识是一点一滴积累的，记录是笔财富，来吧，一起学着总结做笔记。 这几天在写后台文章的一些页面，为了能得到更好的交互性，需要做一些效果，js无疑使不二之选，但由于浏览器的兼容性一直差强人意，所以选用jquery框架，...
代码如下: <style type="text/css"> table{border:1px solid #666;} table td{border:1px solid #eee;width:200px;height:200px;} img{width:200px;height:200px;border:none;position:relative;} </style> <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // $(img).click(function () { ...
动画效果 show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换 都可以传入参数，speed. fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度 滑动显示 slideDown()： slideUp(): slideToggle(): 都可以传入一个speed参数。 $(:animated);获取正在执行动画的元素。 将正在执行动画的元素停止： $(:animated).stop():停止当前的动画。 stop(true)表示清除队列中的所有...
此Jquery插件是一款非常实用的特效，是很多网站不可缺少的推广神兵利器，传统的一般都用百度、加网的分享插件，但样式外观都不怎么好看，用户体验效果差一点，此作品不但有分享功能，还具备了动画效果，提高了用户体验。由于用了CSS3，为了可以看到插件的最佳效果，建议大家使用谷歌、火狐等浏览器。。。作品包括以下功能： 1、弹出层 2、遮罩层 3、动画效果 4、CSS3 效果如下： 源码下载 代码片段(1) 代码如下:$(document).ready...
导航菜单比较实用，当然还是选择经典的，代码最少的，效果最好的喽，各位童鞋请围观哦，废话不说， 效果图如下，欢迎评价： 看代码： 代码如下:<!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name="keywords" content="Jquery,Jquery资源,前端设计,div+css" /> <style> html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, lege...
效果预览图片： 大家可以下载demo看完整效果，下面介绍制作过程。 1.首先创建一个html页面，html结构如下： 代码如下:<div id="slider"> <div id="viewer"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <img id="image2" src="img/atari.jpg" alt="Atari TT030" /> <img id="image3" src="img/commodore16.jpg" alt="Commodore 64" /> <img id="image4" src="img/commodore128.jpg" alt="Commodore 128...
jquery动画 有意思的地方见效果图： 思想： 将图片设置分割div的背景图片，控制div的属性，可以现实有趣的滤镜效果，本例中展示了一种，感兴趣的朋友可以尝试其他滤镜的实现。 本例其余动画部分，主要是利用jquery中提供animate和delay实现。 animate：这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性。 delay：设置一个延时来推迟执行队列中之后的项目。 实例效果： 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> <title></title> <script src="http://demo.jb51.net/jslib/jquery/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").css("opacity", "0.1");//设置透明度 $("#panel"...
不过随着新版本的升级, 体积也慢慢变大了.24KB, Minified and Gzipped 155KB, Uncompressed Code压缩并gzip输出24K, 也不小了.如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了.body {padding:0; margin:0;} #main {margin: 50px auto;border: 1px solid #ccc;width:700px} #main img {padding:0 20px; border:none; display:none}(function() {var imgs = d...
因为要求是动态的，我就想到了应该是位置的变化，想到之前用过的JQuery，把里边的效果全试了试，最后选用了animate自定义，代码如下： 代码如下:<html> <head> <title>testAnimate</title> <script type="text/javascript"> function changeNum(n) { //n设为想要改成的数字 $(function () { $("counter").animate({ top: +=20px, opacity: 0 }, "slow", function () { //让数字向下移动并消失，top为元素距网页顶部距离，opacity为...
设计图如下:1.xhml 代码如下:<div id="mometer"> <div id="hot"></div> <span> <div id="Hgheader">0℃</div> <div id="Hg"></div> </span> </div> <input name="aa" type="text" value="请输入0-100的数值" id="num"/> <input name="" type="button" id="Risk" value="查看度数" /> 2.css 代码如下:#num{color:#999;} #mometer{position:relative; height:100px;width:15px;background-color:#CCC;margin:50px;} span{position...
还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果， 下面就开始我们的代码编写吧 html是比较简单的 代码 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv=content-type content="text/html; charset=gb2312"> <link rel="stylesheet" type="text/css" href="css/dirction.css"> <script langua...