Ajax 登录时MD5加密验证/ jquery ui tools scrollable（滚动)/MSClass（JS类库滚动)

 

第一：Ajax 登录时MD5加密验证

Ajax登录重点：输入用户名和密码后，使用Ajax方式将信息提交到服务器端，服务器端判断时候存在该用户，存在则登录成功并转向管理界面（有时需要写cookie或是利用Session，此处不作讨论），不存在则提示登录失败。密码 使用 MD5中hex_md5（string）加密再传输到后台。

login Code 
 1  //页面点击登录按钮
 2     function DynamicLogin() {
 3    
 4  
 5     var UID= $('#UserName').val();
 6     var PWD=$('#PassWord').val();
 7         if (UID == "" || PWD == "") {
 8 
 9             if (UID == "") {
10                 $("#UserName").focus();
11             }
12             else if (PWD == "") {
13                 $("#PassWord").focus();
14             }
15             alert("用户名或密码不能为空！");
16         }
17         else {
18             jQuery.ajax({
19                 cache: false,
20                 type: "POST",
21                 url: "/WebManage/WebLook/Login.aspx",
22                 data: "UserName=" + escape(UID) + "&PassWord=" + hex_md5(escape(PWD)),
23 
24                 beforeSend: function ()
25                 {
26                     $("#login").css("display", "none");
27                     $("#loading").css("display", "block"); //点击登录后显示loading，隐藏输入框
28                   
29                 },
30                 success: function (msg)
31                 {
32 
33                     if (msg == "E") {
34                         alert("用户名或密码为空！");
35                         $("#UserName").focus();
36                         return false;
37                     }
38                     else if (msg == "N") {
39                         alert("用户不存在或密码错误！");
40                         $("#UserName").focus();
41                         return false;
42                     }
43                     else if (msg == "R") {
44                         alert("账号未审核！请联系管理员！");
45                         $("#UserName").focus();
46                         return false;
47                     }
48                     else {
49                                                 
50                         $("#login").load("/WebManage/Weblook/LoginDetail.aspx");
51                        
52                     }
53 
54                 },
55                 complete: function (data)
56                 {
57                    
58                     $("#loading").css("display", "none"); //点击登录后显示lusername，隐藏loading
59                     $("#login").css("display", "block");
60                 }
61 
62             });
63 
64 
65         }
66     }

 


参考资料：http://www.cnblogs.com/alexis/archive/2010/09/04/1818144.html

 

第二：jquery ui tools scrollable

Scrollable是一个灵活、轻量级（3.9kb）用于创建滚动内容的jQuery插件。任何内容（HTML、视频、文件、图片等...）都可以作为一个滚动项。支持水平与垂直两种滚动方向。

滚动插件提供了属性配置，vertical: true即支持垂直滚动；mousewheel: true支持鼠标滚轮驱动。

<script src="/Content/javascript/jQuery/jquery.tools.min.js" type="text/javascript"></script>

<div id="chained" class="scrollable L_newin">
                    <!-- root element for the items -->
                    <div class="items" style="left: -1360px;">
                        #if($dtinfo.Rows.Count==0) <span align="center">暂无记录</span> #else #foreach($dr in $dtinfo.Rows)
    #end #end
                    </div>
                </div>

 

参考资料：http://www.poluoluo.com/jzxy/201110/143879.html

第三：MSClass,是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式。

添加：<script src="http://www.cnblogs.com/Content/javascript/MSClass.js" type="text/javascript"></script>

Marque Code 
 1 <div class="content-center-box">
 2         <div class="notice-box div-open">
 3         <div class="fl mt10">
 4             <h1 class="fl notice-title">公告:</h1>
 5             <div class="fl" id="hottitle">
 6                 <p class="notice-info fl ml5" id="notice_scroll">
 7 后台查询出来在此循环<a href=""></a>
 8 </p>
 9             </div>
10         </div>
11         <script type="text/javascript">
12             new Marquee(["hottitle", "notice_scroll"], 2, 2, 850, 25, 200, 0, 0, 238);
13             </script>
14     </div>
15 </div>

参考资料：http://www.popub.net/script/MSClass.html

 

posted @ 2012-01-19 15:49  365lei  阅读(2678)  评论(0)  编辑  收藏  举报