开blog很久,今天第一次发表,因为本人啊实在不喜欢写文章,唉~以前语文老是不及格。
一直以来在思考,不知道学flash好还是silverlight好,结果在途中冒出了个JQ,凑用一下吧,反正我觉得未来flash或silverlight才是王道,未来……不知道是什么时候……
仿www.ebay.com简单做了个展示框,ebay用来展示商品,而我是用来展示产品,差不多吧,希望大家多多拍砖
先看看demo
为图片做准备
img.ashx
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
data.ashx
using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;
public class Product
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
public int ID
{ get; set; }
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
public int ParentID
{ get; set; }
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
public string Name
{ get; set; }
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
public string ImageUrl
{ get; set; }
}
public class data : IHttpHandler
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public void ProcessRequest(HttpContext context)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
//获取产品父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++)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
//随机生产图片下载延时
int sleep = ran.Next(1, 10) * 1000;
li.Add(new Product
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
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));
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public bool IsReusable
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
get
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
return false;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
好了,到了页面展示部分了,先看看css
页面css
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<style type="text/css">![](https://www.cnblogs.com/Images/dot.gif)
body
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
font-size: small;
}
#ShowImg
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
float: left;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
vertical-align: middle;
font-size: 260px;
}
#ShowImg img
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
vertical-align: middle;
}
#Navigation
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
padding-left: 4px;
float: left;
width: 300px;
height: 300px;
overflow: hidden;
}
#Navigation ul
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
padding: 0px;
margin: 0px;
list-style-type: none;
}
#Navigation li
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
float: left;
margin: 1px;
width: 70px;
height: 70px;
border: solid 1px #cccccc;
cursor: pointer;
background-color: #FFFFFF;
overflow: hidden;
}
#Mask
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
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
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
padding-top: 150px;
}
#productList a
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
}{
float: left;
width: 60px;
}
</style>
页面html以及js
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>
html
<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>