JQ仿ebay右侧flash商品展示

开blog很久，今天第一次发表，因为本人啊实在不喜欢写文章，唉~以前语文老是不及格。

一直以来在思考，不知道学flash好还是silverlight好，结果在途中冒出了个JQ，凑用一下吧，反正我觉得未来flash或silverlight才是王道，未来……不知道是什么时候……

仿www.ebay.com简单做了个展示框，ebay用来展示商品，而我是用来展示产品，差不多吧，希望大家多多拍砖

 

先看看demo

 

为图片做准备

 img : IHttpHandler {
    static public int percent = 0;
    public void ProcessRequest (HttpContext context) {
        //实现延时
        int sleep = int.Parse(context.Request.QueryString["sleep"]);
        Thread.Sleep(sleep);
        //生成图 片       
        context.Response.ContentType = "image/jpeg";
        Image image = Image.FromFile(context.Server.MapPath("images/2.jpg"));
        MemoryStream ms = new MemoryStream();
        image.Save(ms,ImageFormat.Jpeg);
        context.Response.BinaryWrite(ms.ToArray());
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

生成产品列表，并返回JSON

 

好了，到了页面展示部分了，先看看css

 

>

 

页面html以及js

    <script language="javascript" type="text/javascript">
    function getProduct(parentID){
        var imgLoad=0;
         $('#Mask').fadeIn();
         $.getJSON('data.ashx',{parentID:parentID},function(result){
            var content=$('#Navigation ul');
            content.empty();
            for(var i=0;i<result.length;i++){
                content.append('<li><img val="'+result[i].ID+'" src="'+result[i].ImageUrl+'" alt="'+result[i].Name+'"/></li>');
            }
            //alert(content.find('ul'));
           content.find('li').css('opacity','0.3').hover(
                function(){
                    $(this).css('border-color','#ff0000');
                    $(this).stop().animate({opacity:'1'},'fast');
                },
                function(){
                        $(this).stop().animate({opacity:'0.3'},'fast',function(){$(this).css('border-color','#cccccc');});
                }
            );
            
            content.find('img').each(function(){
                this.onload=function(){
                    imgLoad++;
                    //alert(imgLoad);
                    if(imgLoad==parentID){
                        $('#Mask').fadeOut('slow');
                    }
                }
            });
        });
    }
    $(function(){
        var isSomeoneClick=false;
        $('#Mask').css('opacity','0.3');
        $('#ShowImg').css('opacity','0');
        getProduct(5);
        $('#productList a').click(function(){
             getProduct($(this).attr('pid'));
        });
    });
    </script>

 

div>