jQuery实现动画效果的实例代码_jquery_脚本之家

本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码。分享给大家供大家参考。具体如下:

本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码。分享给大家供大家参考。具体如下:

复制代码 代码如下:

功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询。欢迎拍砖,有问题的还望大虾们斧正哈。看看这个效果图,无刷新的噢!!

页面文档载入后,为第一张图片添加class属性值为img1,为第二张图片添加class属性值img2,为第三张图片添加class属性img3,为第四张图片添加class属性值img4,这会使得每张图片的下半部分被上一张更大的图片给覆盖住。

这里介绍的jQuery ajax投票特效,带动画效果
类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节。如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果。

这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul
li ul li的循环格式嵌套 如果没有下级分类 就用li
a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏。

图片 1

具体实现请看源码:

当鼠标单击暴露在最上面的图片时,该图片在0.6秒内从原本大小放大150%,并逐渐减小不透明度直到完全消失,与此同时,其他所有图片在0.6秒内动态的放大并占据相应上一张图片的位置。全部动态效果结束后,消失不见的那张图片重新显示在最下面。

jQuery ajax投票特效,带动画效果 柱状图$.ready { $.click.parent().animate({ width: '+=100px' }, 500); $.html.prev; return false; });});* { font-family: Arial, "Free Sans";}#container { margin-top: 20px; color: #fff;}#container #question { display: block; padding: 20px; font-weight: bold; letter-spacing: -3px; margin-bottom: 20px; padding: 10px; font-size: 40px;}#container div { font-weight: bold; letter-spacing: -3px; background: #0099cc; margin-bottom: 15px; padding: 10px; font-size: 34px; color: #ffffff; border-left: 20px solid #333; width: 400px; -webkit-border-radius: 0.5em; -moz-border-radius: 0 0.5em 0.5em 0; border-radius: 0 1.5em 1.5em 0;}#container div a { border-radius: 0.3em; text-decoration: none; color: #0099cc; padding: 5px 15px; background: #333; margin: 0 20px;}#container div a:hover { color: #fff;}#main { background: #0099cc; margin-top: 0; padding: 2px 0 4px 0; text-align: center;}#main a { color: #ffffff; text-decoration: none; font-size: 12px; font-weight: bold; font-family: Arial;}#main a:hover { text-decoration: underline;}body { margin: 0; padding: 0; background: #ffffff url('//files.jb51.net/file_images/article/201508/2015810110844109.gif') repeat right top;}#text { margin: 0 auto; width: 500px; font-size: 12px; color: #0099cc; font-weight: bold; text-align: center; margin-top: 20px;}  你最喜欢的编程语言是哪一种? 0投票PHP 0投票Ruby 0投票Java 0投票ASP 0投票Perl 0投票ColdFusion 

1、aspx页面复制代码 代码如下:

jQuery UIdiv{position: relative;}img{position: absolute;border:solid 3px black;}.img1{width: 300px;height: 220px;top:120px;left: 200px;z-index: 4;opacity:1;cursor:pointer;}.img2{width: 200px;height: 145px;top:85px;left: 250px;z-index: 3;opacity: 0.7;}.img3{width: 120px;height: 90px;top:60px;left: 290px;z-index: 2;opacity: 0.5;}.img4{width: 60px;height: 55px;top:45px;left: 320px;z-index: 1;opacity: 0.4;}$.each{$.addClass;$.live{$.hide('puff',{percent:150},600,function.attr.show.switchClass;$.switchClass;$.switchClass;});

希望本文所述对大家的jquery程序设计有所帮助。

jQuery多级下拉菜单ul,li{list-style:none;font-size:12px;line-height:20px;width:80px;margin:0;padding-left:6px;}.child{ display:none;}.nav a{display:block;color:#5c84c1;padding-left:22px;} //说明 所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套 $.ready{ //$.children; $.not.children.css({textDecoration:"none",color:"#333",background:"none"}) .click.get.location.href="'"+$+"'"; }); $.find.children.css({background:"url(images/statu_close.gif) no-repeat left top;"}) .click{ if.is.next.slideDown.parent.children{ $.siblings.slideUp.parent.siblings.children.css({background:"url(images/statu_close.gif) no-repeat left top;"}) .end.children.css({background:"url(images/statu_close.gif) no-repeat left top;"});} $.css({background:"url(images/statu_open.gif) no-repeat left top;"}); return false; }else{ $.slideUp; //不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏 $.css({background:"url(images/statu_close.gif) no-repeat left top;"}); $.children.fadeOut.next.find.children.css({background:"url(images/statu_close.gif) no-repeat left top;"}); return false; } }); });   一级菜单1   二级菜单1   二级菜单1   三级菜单1   三级菜单1     二级菜单2   三级菜单2   三级菜单2   四级菜单   四级菜单1   四级菜单1   五级菜单1   五级菜单1   五级菜单1           一级菜单2   二级菜单1   二级菜单1     一级菜单3   二级菜单1   二级菜单1     一级菜单4  

ajax分页

希望本文所述对大家的jquery程序设计有所帮助。

2、具体实现JS 复制代码 代码如下: var
pageIndex = 1; //页索引 var where = ” where 1=1″; $ { BindData;
//总记录条数 //GetPageCount(); //总页数绑定 //第一页按钮click事件
$.click { pageIndex = 1; $; BindData; //上一页按钮click事件 $.click { if
{ pageIndex–; $.text; } BindData; //下一页按钮click事件 $.click { var
pageCount = parseInt.text; if (pageIndex != pageCount) { pageIndex++;
$.text; } BindData; //最后一页按钮click事件 $.click { var pageCount =
parseInt.text; pageIndex = pageCount; BindData; //查询 $.click { where =
” where 1=1″; var csbh = $; if (csbh != null && csbh != NaN) { pageIndex
= 1; where += ” and csbh like ‘%” + csbh + “%'”; } BindData
//AJAX方法取得数据并显示到页面上 function BindData() { $.ajax({ type:
“get”, //使用get方法访问后台 dataType: “json”, //返回json格式的数据 url:
“../AjaxService/JgcsService.ashx”, //要访问的后台地址 data: {
“pageIndex”: pageIndex, “where”: where }, //要发送的数据 ajaxStart:
function; }, complete: function; }, //AJAX请求完成时隐藏loading提示
success: function {//msg为返回的数据,在这里做数据绑定 var data =
msg.table; if { var t = document.getElementById; //获取展示数据的表格
while { t.removeChild; //在读取数据时如果表格已存在行.一律删除 } }
$.each(data, function { $.append(“

” + item.CSBH + “

” + item.K + “

” + item.C + “

” + item.S + “

” + item.DSB + “

” + item.TCBJ + “

” + item.LHDCYL + “

” + item.BJJL + “

” + item.YLXS + “

” + item.FCTH + “

” +
图片 2

“); }) }, error: function() { var t = document.getElementById;
//获取展示数据的表格 while { t.removeChild;
//在读取数据时如果表格已存在行.一律删除 } alert; }
//加载失败,请求错误处理 //ajaxStop:$; GetTotalCount; bindPager(); } //
页脚属性设置 function bindPager() { //填充分布控件信息 var pageCount =
parseInt.text; //总页数 if { document.getElementById.innerHTML = “0”; }
else { if (pageIndex > pageCount) { $; } else { $.text; //当前页 } }
document.getElementById.disabled = (pageIndex == 1 || $ == “0”) ? true :
false; document.getElementById.disabled = (pageIndex <= 1 || $ ==
“0”) ? true : false; document.getElementById.disabled = (pageIndex >=
pageCount) ? true : false; document.getElementById.disabled = (pageIndex
== pageCount || $ == “0”) ? true : false; } //AJAX方法取得总页数
function GetPageCount() { var pageCount; $.ajax({ type: “get”, dataType:
“text”, url: “../AjaxService/JgcsService.ashx”, data: {
“wherePageCount”: where }, //”wherePageCount” +
where,个人建议不用这种方式 async: false, success: function {
document.getElementById.innerHTML = msg; } }); } //AJAX方法取得记录总数
function GetTotalCount() { var pageCount; $.ajax({ type: “get”,
dataType: “text”, url: “../AjaxService/JgcsService.ashx”, data: {
“whereCount”: where }, async: false, success: function {
document.getElementById.innerHTML = msg; } }); }
3、一般处理程序ashx中的代码 复制代码
代码如下: public class JgcsService : IHttpHandler { readonly int
pageSize = 15; public void ProcessRequest { context.Response.ContentType
= “text/plain”; //不让浏览器缓存 context.Response.Buffer = true;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays;
context.Response.AddHeader; context.Response.AddHeader;
context.Response.CacheControl = “no-cache”; string result = “”;
//记录总条数 if (!string.IsNullOrEmpty(context.Request[“whereCount”]))
{ string where = context.Request.Params[“whereCount”].ToString();
result = Jgcs.GetToatlNum; } //总页数 if
(!string.IsNullOrEmpty(context.Request[“wherePageCount”])) { string
where = context.Request.Params[“wherePageCount”].ToString(); int count
= Jgcs.GetToatlNum; string pageCount = Math.Ceilingcount / .ToString();
result = pageCount; } //分页数据 if
(!string.IsNullOrEmpty(context.Request.Params[“pageIndex”]) &&
!string.IsNullOrEmpty(context.Request.Params[“where”])) { string where
= context.Request.Params[“where”].ToString(); int pageIndex =
Convert.ToInt32(context.Request.Params[“pageIndex”]); result =
GetJsonString; } context.Response.Write; } /// /// 返回json串 /// ///
查询条件 /// 页面索引 /// json串 protected string GetJsonString(string
where, int pageIndex) { DataTable dt = Jgcs.GetInfo(“csbh”, where,
pageIndex, pageSize); return JsonHelper.DataTable2Json; } public bool
IsReusable { get { return false; } } }
4、分页查询的方法可看可不看了,都会这个吧,做示例简单的开了个头,应用时在处理方面可不要这么去写噢,贴下来仅做一个参考
分页方法 复制代码 代码如下: /// ///
分页查询的方法 /// /// 排序字段 /// 查询条件 /// 当前页 /// 页大小 ///
public static DataTable GetInfo(string orderFile, string where, int
pageNumber, int pageSize) { DBHelper db = new DBHelper(); string str =
@”with TestInfo as over as rowNumber,* from (select
CSBH,K,C,S,DSB,TCBJ,LHDCYL,BJJL,BJLX,YLXS,FCTH,KHM1,KHM2,QKCS from
YW_JGCS) temp {1} ) select * from TestInfo where rowNumber between and
{2}*{3}”; string strSql = string.Format(str, orderFile, where,
pageNumber, pageSize); try { db.DBOpen(); return db.DbDataSet; } catch {
throw ex; } finally { db.DBClose(); } } /// /// 结果参数总条数 /// ///
/// public static int GetToatlNum { DBHelper db = new DBHelper(); string
strSql = string.Format from (select
CSBH,K,C,S,DSB,TCBJ,LHDCYL,BJJL,BJLX,YLXS,FCTH,KHM1,KHM2,QKCS from
YW_JGCS) temp {0}”, where); try { db.DBOpendb.ExecuteScalar; } catch {
throw ex; } finally { db.DBClose(); } } 好了,代码就这么多

发表评论

电子邮件地址不会被公开。 必填项已用*标注