今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。 代码如下: CSS+jQuery动画效果 body{ z-index: 0; width: 100%; min-height: 400px; } .pages{ position: absolute; } .current{ position: absolute; z-index: 12 !important; left: 0px !important; } .page1{ background-color: #a5c...
一、需求原因目前jQuery已经是一个比较成熟的框架了，而且基于他的插件也有上百种，本例我手动用jQuery实现一个动画效果的例子。 二、具体实现 代码如下:jQuery实现动画效果 #test { position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer; } $(function(){ $("#test").css("optcity","0.5");//设置...
代码如下:$(document).ready(function(){ $.ajax({ type:"get", cache:false, url:"ajaxpage.aspx?t=getcity", dataType:"json", beforeSend:function(){ $("#vvv").append(); }, success:function(data){ $("#city").html(data.info);//添加下拉框的option }, complete: function() {$("#vvv").remove(); }})})
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。 功能 : 在上方的按钮上滑动，可以切换各个page,点击下方的各个page，也可以切换收缩还是展开状态。 初始效果预览 代码如下: CSS+jQuery动画效果 body{ z-index: 0; width: 100%; min-height: 400px; } .pages{ position: absolute; } ....
实现原理：当色子掷出后，通过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...
本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法。分享给大家供大家参考。具体分析如下： 此代码测试环境为IE9 以及GG、FF浏览器，IE8及以下浏览器可能不支持，希望理解。 这款JS鼠标滑动效果使用jQuery实现简单动画的方法，而且也惊喜的发现，jquery有更好的书写方法，可以连写，在animate方法前加上stop方法就可实现鼠标移出后，不再执行滑动效果。代码如下:非常不错的jQuery鼠标滑动效果body{font-size:12px;font-fami...
本文实例讲述了jQuery实现带动画效果的二级下拉导航方法。分享给大家供大家参考。具体实现方法如下：代码如下:jQuery二级下滑导菜单body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:10px;} .nav_list{ list-style:none; margin:0; padding:0;} .nav_list li{ float:left; text-align:center; margin-right:10px; position:relative;} .nav_list li a{ width:80px; text-align:center; paddin...
HTML首先载入jQuery库文件和jquery.fly.min.js插件。代码如下:接着，将商品信息html结构布置好，本例中，我们用四个商品并排布置，每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。代码如下:￥3499.00 LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计 加入购物车 ￥3799.00 Hisense/海信 LED50T1A 海信电视官方旗舰店 加入购物车 ￥￥3999.00 Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视 加入购物车 ￥...
本文实例讲述了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") }); }); }如上面，函数也可以做为参数使用，就...
在一些图片网站上我们可以看到在展示图片的时候，用鼠标轻轻滑上图片可以看到该图片的文字介绍信息，其实用jQuery的animate函数就可以实现这样一个动画过程。强震摧毁加勒比海小国海地 今年，战争、经济动荡和自然灾害席卷全球，制造了无数的伤痛；但是，在痛苦的同时仍有明亮的瞬间存在。 查看详情 我们用一个DIV.wrap放置一张图片，以及一个需要覆盖的div.cover，cover里面放置图片的介绍信息，支持任意标准的html内容。然后将上...
1.方法：show：显示选中元素。 hide：隐藏选中元素。 toggle：显示或隐藏选中元素。 fadeIn：将选中元素的不透明度逐步提升到100%。 fadeOut：将选中元素的不透明度逐步降为0%。 slideDown：垂直向下滑动显示选中元素。 slideUp：垂直向上滑动隐藏当前元素。 slideToggle：垂直向上或向下滑动的形式折叠或展开选中元素。2.语法： $(selector).方法名([speed], [callback]);-- speed：可选，表示速度。默认“normal”。可取值 ...
本文实例讲述了jQuery实现动画效果circle的方法。分享给大家供大家参考。具体如下： 这款jQuery实现动画效果circle，Google+的圈子特效做的很不错，这里模仿下，时间有限，还有一个动画累积的问题没有解决。当然，是基于 jQuery的，纯JS 还没有这个能力呢。感兴趣的朋友可以加以完善试试。 运行效果截图如下：具体代码如下：jQuery 动画效果 circle body {width:200px;margin:0 auto;margin-top:100px;background:#CCC;}#login{pos...
本文实例讲述了jquery实现先淡出再折叠收起的动画效果。分享给大家供大家参考。具体如下： 这里使用jquery实现先淡出再折叠形变的动画效果，动画折叠展开一个层，先淡出，然后Div又发生形状的改变，整体不错哦。 运行效果截图如下：具体代码如下：jquery先淡出再变形的动画*{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { paddi...