JQ仿ebay右侧flash商品展示

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

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

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

 

先看看demo

 

为图片做准备

public class 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

 

using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;
public class Product
{
    public int ID { get; set; }
    public int ParentID { get; set; }
    public string Name { get; set; }
    public string ImageUrl { get; set; }
}
public class data : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        //获取产品父ID
        int parentID = int.Parse(context.Request.QueryString["parentID"]);
        List<Product> li = new List<Product>();
        Random ran = new Random();
        for (int i = 1; i <= parentID; i++)
        {
            //随机生产图片下载延时
            int sleep = ran.Next(1, 10) * 1000;
            li.Add(new Product
            {
                ID = i,
                Name = "product" + i.ToString(),
                ParentID = parentID,
                ImageUrl = "img.ashx?sleep=" + sleep.ToString()
            });
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write(JavaScriptConvert.SerializeObject(li));
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

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

 

    <style type="text/css">
        body
        {}{
            font-size: small;
        }
        #ShowImg
        {}{
            float: left;
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            vertical-align: middle;
            font-size: 260px;
        }
        #ShowImg img
        {}{
            vertical-align: middle;
        }
        #Navigation
        {}{
            padding-left: 4px;
            float: left;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        #Navigation ul
        {}{
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }
        #Navigation li
        {}{
            float: left;
            margin: 1px;
            width: 70px;
            height: 70px;
            border: solid 1px #cccccc;
            cursor: pointer;
            background-color: #FFFFFF;
            overflow: hidden;
        }
        #Mask
        {}{
            text-align: center;
            position: absolute;
            background-image: url( 'images/load-bg.png' );
            width: 604px;
            height: 304px;
            left: 2px;
            top: 2px;
            line-height: 304px;
        }
        #mask img
        {}{
            padding-top: 150px;
        }
        #productList a
        {}{
            float: left;
            width: 60px;
        }
    </style>

 

页面html以及js

<script src="../js/jquery.js" type="text/javascript"></script>

    <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>
        <div style="width: 604px; height: 304px; border: solid #cccccc 1px; padding: 2px;
            position: relative">
            <div id="ShowImg">
                <img src="" border="0" /></div>
            <div id="Navigation">
                <ul>
                </ul>
            </div>
            <div id="Mask">
                <img src="images/indicator_web20_working.gif" />
            </div>
        </div>
    </div>
    <div id="productList">
        <a href="#" pid="5">产品5</a> <a href="#"  pid="7">产品7</a> <a href="#" pid="11">产品11</a>
        <a href="#" pid="16">产品16</a>
    </div>