[置頂] 仿QQ相冊模糊到清晰
仿QQ相冊模糊到清晰
原理
參考了葉小釵的博客:http://www.cnblogs.com/yexiaochai/p/3151662.htmljavascript
其實能夠理解爲:兩張圖片起位置同樣,一張用100X75的縮略圖顯示在670X502的圖片上, 確定會顯示的模糊css
在這個圖片的旁邊還有一個圖片是完整圖片,由於是浮動的在縮略圖上面的,因此完整圖片的加載從上而下時 就會造成由模糊到清晰的效果html
實例:
項目結構:
index.htm 主要顯示頁面java
ImageUpload.aspx 圖片上傳頁面jquery
Handler/ImageHandler.ashx 獲取圖片 li 列表ajax
ImageSL 存放縮略圖片chrome
ImageWZ 存放完整圖片數據庫
樣式:
樣式這裏就不介紹了,你們應該均可以看懂 PS 此處直接引用QQ相冊的樣式,若是你不能訪問外網 可能有些圖片
canvas
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, button, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{ margin: 0;
padding: 0;}
.photo_thumbnailist_detail{ height: 60px;
overflow: hidden;
position: relative;
width: 828px;}
.photo_v3{padding: 20px;}
.page_single{padding-bottom: 40px;}
.clear:before, .clear:after{content: "";
display: table;}
.clear:after{clear: both;}
.page_single .photo_thumbnailist{width: 842px;}
.photo_thumbnailist{margin: 0 auto 15px;
padding-left: 24px;
position: relative;}
.page_single .photo_layout{width: 870px;}
.photo_layout{margin: 0 auto;}
a:link, a:visited{text-decoration: none;}
.photo_thumbnailist_left_current{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position: -247px 0;}
.photo_thumbnailist_right_current{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position: -277px 0;}
.photo_thumbnailist li{float: left;
margin: 0 11px 10px 0;
overflow: hidden;
vertical-align: top;}
li{list-style: none outside none;}
.photo_thumbnailist li a, .photo_thumbnailist li a.photo_thumbnailist_current{border-style: solid;
border-width: 1px;
display: block;
font-size: 0;
height: 52px;
line-height: 0;
margin: 1px;
overflow: hidden;
padding: 1px;
width: 52px;}
a, .c_tx {color: #915833;}
.photo_thumbnailist_mask{display: block;
height: 52px;
overflow: hidden;
width: 52px;}
.photo_thumbnailist_container{display: table-cell;
height: 52px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 52px;}
.page_single .photo_layout_section{width: 670px;}
.photo_layout_section{float: left;
width: 100%;}
.photo_single{margin-bottom: 20px;
position: relative;
z-index: 10;}
.left-img{cursor:url("http://cnc.qzs.qq.com/qzone/client/photo/cursor/pre.cur?max_age=20111010"), auto}
.page_single .photo_single_img{height: 300px;
width: 670px;}
.right-img{cursor:url("http://cnc.qzs.qq.com/qzone/client/photo/cursor/next.cur?max_age=20111010"), auto}
.bg3, .bgr3, .bg3_hover:hover{background-color: #FEFDF9;}
.bor3, .bgr3, .tbor3, .bbor3, .lbor3, .rbor3{border-color: #ECDEB8;}
.photo_single_img{overflow: hidden;
text-align: center;
vertical-align: middle;}
.bor, .bgr, .bgr2, .bgr3, .bor2, .bor3, .bor4, .bor5{border-style: solid;}
.bor, .tbor, .bbor, .lbor, .rbor, .bor2, .tbor2, .bbor2, .lbor2, .rbor2, .bgr, .bgr2, .bgr3, .bor3, .lbor3, .rbor3, .bbor3, .tbor3, .bor4, .lbor4, .rbor4, .bbor4, .tbor4, .bor5, .lbor5, .rbor5, .bbor5, .tbor5{border-width: 1px;}
.photo_thumbnailist_left, .photo_thumbnailist_right, .photo_thumbnailist_left_current, .photo_thumbnailist_right_current{font-size: 0;
height: 38px;
line-height: 100px;
overflow: hidden;
position: absolute;
top: 10px;
width: 14px;}
.photo_thumbnailist_right, .photo_thumbnailist_right_current{right: 0;}
.photo_thumbnailist_left, .photo_thumbnailist_left_current{left: 0;}
.photo_thumbnailist_detail ul{left: 0;
overflow: hidden;
position: absolute;
top: 0;}
.photo_thumbnailist_right{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position:-262px 0;}
.photo_thumbnailist_left{background-image:url("http://cnc.qzonestyle.gtimg.cn/qzone_v6/sprite/photo_v3.png?max_age=19830211&d=20130613144752");background-position:-232px 0;}
.photo_thumbnailist li a:hover{ border-width:2px; margin:0px;}
.photo_v3 .highlight{border-color: #FFB424;border-width:2px;margin:0px;}
JavaScript
var index = 0; //索引
var islock = false; //鎖對象
//移動綁定事件
function _ul_li_mover() {
$("#pre_view_loop ul li").unbind("click"); //清空事件
$("#pre_view_loop ul li").eq(index).click(function () { $("#photo_list_prev").click(); }); //第一個翻頁事件
$("#pre_view_loop ul li").eq(index + 11).click(function () { $("#photo_list_next").click(); }); //最後一個翻頁事件
$("#pre_view_loop ul li").click(function () { //綁定單擊事件
var img = $(this).attr("photo_list_item"); //獲取上傳圖片名稱
$("#Img17").attr("src", "ImageSL/" + img); //第一次綁定地址 這裏要說明一下:第一次綁定是清除上次瀏覽器對img上次圖片的記憶,告訴瀏覽器開始加載新的圖片
$("#Img17").attr("src", ""); //清空地址 這裏的清空主要是由於 Img17 的position: absolute;會遮蓋下面的層的顯示
$("#_il_img_0_3").attr("src", "ImageSL/" + img); //開始加載縮略圖
$("#pre_view_loop ul li a").removeClass("highlight"); //清空選中樣式
$(this).find("a").addClass("highlight"); //添加選中樣式
$("#Img17").attr("src", "ImageWZ/" + img); //開始加載完整圖片
});
}
//點擊事件(基本與上面一直)
function _ul_li_click(a) { //a 當前是索引=>index
var img = $("#pre_view_loop ul li").eq(a).attr("photo_list_item");
$("#Img17").attr("src", "ImageSL/" + img);
$("#Img17").attr("src", "");
$("#_il_img_0_3").attr("src", "ImageSL/" + img);
$("#pre_view_loop ul li a").removeClass("highlight");
$("#pre_view_loop ul li").eq(a).find("a").addClass("highlight");
$("#Img17").attr("src", "ImageWZ/" + img);
}
//綁定上傳的文件列表(這裏是爲了模擬QQ相冊的須要,固然你也能夠存在數據庫中)
function _ul_li_bind() {
$.ajax({
url: "Handler/ImageHandler.ashx", //地址
data: "cmd=_ul_li_ImagesSL&time=" + new Date().getTime(), //參數
cache: false, //不緩存
asyac: false, //同步
dataType: "html", //類型
success: function (html) {
$("#pre_view_loop ul").html(html); //加載li
_ul_li_mover(); //初始化事件
}
});
}
$(document).ready(function () {
_ul_li_bind(); //綁定數據
$("#photo_list_prev").click(function () {
if (!islock) { //上次執行是否已經完成
islock = true; //標示:開始執行
if (parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) < 0) { //ul left若是小於0 說明能夠向前移動(這裏的判斷有點麻煩 其實能夠更簡單的 直接判斷index)
var _left = parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) + 69; //獲取向前移動後的left值
$("#pre_view_loop ul").animate({ left: _left + "" }, "fast", function () { islock = false; }); //開始移動 這裏調用animate的回調函數 islock = false; 標示:執行已完成
$("#photo_list_next").css("display", "block"); //顯示向下翻頁
$("#photo_list_next_disabled").css("display", "none"); //隱藏最後一頁
if (parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) >= -69) { //判斷若是是第一頁(每次移動 69px) 隱藏向上翻頁,顯示第一頁
$("#photo_list_prev").css("display", "none");
$("#photo_list_prev_disabled").css("display", "block");
}
} else {
$("#photo_list_prev").css("display", "none");
$("#photo_list_prev_disabled").css("display", "block");
islock = false;
}
if (index > 0) {
index = index - 1; //遞減索引(大於0時)
}
_ul_li_mover(); //綁定事件
}
});
$("#photo_list_next").click(function () {
if (!islock) { //上次執行是否已經完成
islock = true; //同上
if ((($("#pre_view_loop ul li").length - 12) * 69) > Math.abs(parseFloat($("#pre_view_loop ul").css("left").split('px')[0]))) { //這裏判斷也有點繁瑣(能夠直接用index) 每頁顯示12條數據因此前面要減去12每條數據佔69px
var _left = parseFloat($("#pre_view_loop ul").css("left").split('px')[0]) - 69; //同上
$("#pre_view_loop ul").animate({ left: _left + "" }, "fast", function () { islock = false; }); //同上
$("#photo_list_prev").css("display", "block"); //同上
$("#photo_list_prev_disabled").css("display", "none"); //同上
if ((($("#pre_view_loop ul li").length - 13) * 69) <= Math.abs(parseFloat($("#pre_view_loop ul").css("left").split('px')[0]))) { //最後一頁是顯示最後一頁 隱藏下一頁
$("#photo_list_next").css("display", "none");
$("#photo_list_next_disabled").css("display", "block");
}
} else {
$("#photo_list_next").css("display", "none");
$("#photo_list_next_disabled").css("display", "block");
islock = false;
}
if (index < ($("#pre_view_loop ul li").length - 1)) { //遞加索引(小於li總數)
index = index + 1;
}
if (index == ($("#pre_view_loop ul li").length - 11)) { //最後一頁時index-1
index = index - 1;
}
_ul_li_mover(); //同上
}
});
//切換不一樣的方向
$("#photo_container").mousemove(function (e) {
if ((e.clientX - $(this).offset().left) > 335) { //鼠標在圖片的右邊時 顯示下一頁信息
$("#photo_container").removeClass("left-img"); //刪除左鼠標樣式
$("#photo_container").addClass("right-img"); //添加右鼠標樣式
$("#photo_container").attr("title", "點擊跳到下一張"); //添加title
$("#photo_container img:visible").removeClass("left-img"); //刪除左鼠標樣式
$("#photo_container img:visible").addClass("right-img"); //添加右鼠標樣式
$("#photo_container img:visible").attr("title", "點擊跳到下一張"); //添加title
} else { //鼠標在圖片的左邊時 顯示下一頁信息
$("#photo_container").removeClass("right-img"); //刪除右鼠標樣式
$("#photo_container").addClass("left-img"); //添加左鼠標樣式
$("#photo_container").attr("title", "點擊跳到上一張"); //添加title
$("#photo_container img:visible").removeClass("right-img"); //刪除右鼠標樣式
$("#photo_container img:visible").addClass("left-img"); //添加左鼠標樣式
$("#photo_container img:visible").attr("title", "點擊跳到上一張"); //添加title
}
});
//綁定圖片鼠標點擊事件
$("#photo_container").mouseup(function (e) {
if ((e.clientX - $(this).offset().left) > 335) { //鼠標在圖片右邊時
if (index < $("#pre_view_loop ul li").length) { //小於li總數時
$("#photo_list_next").click(); //向下翻一頁
_ul_li_click(index); //顯示下一個圖片
}
} else { //鼠標在圖片左邊時
if (index > 0) { //index大於0時
$("#photo_list_prev").click(); //向上翻一頁
_ul_li_click(index); //顯示上一個圖片
}
}
});
});
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title></title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<meta name="viewport" content="width=device-width;initial-scale=1.0"/>
<!-- Ajax JS -->
<!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> -->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> -->
<script> !window.jQuery && document.write("<script src='Scripts/jquery-1.4.1.min.js'>" + "</" + "script>")</script>
</head>
<body>
<div id="app_mod" class="photo_v3 page_single">
<div id="pre_view_loop" class="clear photo_thumbnailist">
<div class="photo_thumbnailist_detail">
<!-- 這裏是測試數據 能夠刪除 -->
<ul style="left:0px">
<li id="ls_1372054281206_0" style="" photo_list_item="Chrysanthemum.jpg" index_number="0">
<a class="highlight" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Chrysanthemum.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_0">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_1" style="" photo_list_item="Desert.jpg" index_number="1">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Desert.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_1">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_2" style="" photo_list_item="g6.jpg" index_number="2">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/g6.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_2">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_3" style="" photo_list_item="Hydrangeas.jpg" index_number="3">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Hydrangeas.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_3">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_4" style="" photo_list_item="Jellyfish.jpg" index_number="4">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Jellyfish.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_4">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_5" style="" photo_list_item="Koala.jpg" index_number="5">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Koala.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_5">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_6" style="" photo_list_item="Lighthouse.jpg" index_number="6">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Lighthouse.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_6">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_7" style="" photo_list_item="Penguins.jpg" index_number="7">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Penguins.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_7">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_8" style="" photo_list_item="Tulips.jpg" index_number="8">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/Tulips.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_8">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_9" style="" photo_list_item="調整大小 HCBJ_00204.jpg" index_number="9">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00204.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_9">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_10" style="" photo_list_item="調整大小 HCBJ_00212.jpg" index_number="10">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00212.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_10">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_11" style="" photo_list_item="調整大小 HCBJ_00213.jpg" index_number="11">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00213.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_11">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_12" style="" photo_list_item="調整大小 HCBJ_00214.jpg" index_number="12">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00214.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_12">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_13" style="" photo_list_item="調整大小 HCBJ_00401.jpg" index_number="13">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00401.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_13">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_14" style="" photo_list_item="調整大小 HCBJ_00405.jpg" index_number="14">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00405.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_14">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_15" style="" photo_list_item="調整大小 HCBJ_00407.jpg" index_number="15">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00407.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_15">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_16" style="" photo_list_item="調整大小 HCBJ_00414.jpg" index_number="16">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00414.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_16">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_17" style="" photo_list_item="調整大小 HCBJ_00415.jpg" index_number="17">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/調整大小 HCBJ_00415.jpg" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_17">
</span>
</span>
</a>
</li>
<li id="ls_1372054281206_18" style="" photo_list_item="圖.GIF" index_number="18">
<a class="" href="javascript:void(0);">
<span class="photo_thumbnailist_mask">
<span class="photo_thumbnailist_container">
<img src="ImageSL/圖.GIF" class="statistic_preview" middle="0" style="visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;" id="img_1372054281206_18">
</span>
</span>
</a>
</li>
</ul>
</div>
<a id="photo_list_prev" class="photo_thumbnailist_left_current" href="javascript:void(0);" title="上一頁" style="display: none;">上一頁</a>
<a id="photo_list_next" class="photo_thumbnailist_right_current" href="javascript:void(0);" title="下一頁" style="">下一頁</a>
<span id="photo_list_prev_disabled" class="photo_thumbnailist_left" style="" title="最新一頁了">最新一頁了</span>
<span id="photo_list_next_disabled" class="photo_thumbnailist_right" style="display: none;" title="最後一頁了">最後一頁了</span>
</div>
<div class="clear photo_layout">
<div class="photo_layout_section">
<div id="photo_container" class="photo_single right-img" style="width: 670px; height: 502px;" title="點擊跳到下一張">
<p id="photo_view" class="bor3 bg3 photo_single_img" style="width: 670px; height: 502px;">
<img title="點擊跳到上一張" src="ImageWZ/Chrysanthemum.jpg" id="Img17" alt="" style="width: 670px; height: 502px; left: 0px; top: 0px; position: absolute;" class="statistic_photoview left-img">
<img src="ImageSL/Chrysanthemum.jpg" id="_il_img_0_3" alt="" style="width: 670px; height: 502px; left: 0px; top: 0px;" class="statistic_photoview">
</p>
</div>
</div>
</div>
<p style=" margin:0 auto; width:65px;"><a href="ImageUpload.aspx">上傳圖片</a></p>
</div>
</body>
</html>
ImageUpload.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageUpload.aspx.cs" Inherits="HTML5Template.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>縮略圖:<br /><asp:Image ID="Image1" runat="server" Width="100" Height="75"/></p>
<p>完整圖:<br /><asp:Image ID="Image2" runat="server" Width="670" Height="502"/></p>
<p><asp:FileUpload ID="FileUpload1" runat="server" /></p>
<p><asp:Button ID="Button1" runat="server" Text="上傳" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="" ForeColor="Red"></asp:Label>
</p>
<p style=" margin:0 auto; width:65px;"><a href="index.htm">圖片瀏覽</a></p>
</div>
</form>
</body>
</html>
ImageUpload.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
namespace HTML5Template
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.FileContent.Length > 0)
{
//生成完整圖片路徑
string path = Server.MapPath("~/ImageWZ/" + FileUpload1.FileName);
//生成縮略圖圖片路徑
string pathSL = Server.MapPath("~/ImageSL/" + FileUpload1.FileName);
if (!File.Exists(path)) //判斷是否重複
{
FileUpload1.SaveAs(path); //上傳完整圖片
SetImage(path, pathSL); //在指定位置生成縮略圖
Image1.ImageUrl = "~/ImageSL/" + FileUpload1.FileName; //顯示
Image2.ImageUrl = "~/ImageWZ/" + FileUpload1.FileName;
Label1.Text = "上傳成功!";
Label1.ForeColor = Color.Green;
}
else
{
Label1.Text = "文件已經存在!";
Label1.ForeColor = Color.Red;
}
}
}
public void SetImage(string path,string pathSL)
{
System.Drawing.Image image = System.Drawing.Image.FromFile(path); //加載完整圖片
System.Drawing.Image imageSL = image.GetThumbnailImage(100, 75, null, IntPtr.Zero); //按指定大小生成縮略圖
imageSL.Save(pathSL); //保存指定位置
}
}
}
Handler/ImageHandler.ashx
using System;
using System.Collections.Generic;
using System.Web;
using System.Reflection;
using System.IO;
using System.Text;
namespace HTML5Template
{
/// <summary>
/// ImageHandler 的摘要說明
/// </summary>
public class ImageHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string cmd = context.Request["cmd"];
if (!string.IsNullOrEmpty(cmd))
{
MethodInfo Method = this.GetType().GetMethod(cmd, BindingFlags.NonPublic | BindingFlags.Instance);
if (Method != null)
{
Method.Invoke(this, new object[] { context });
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
void _ul_li_ImagesSL(HttpContext context)
{
DirectoryInfo path = new DirectoryInfo(context.Server.MapPath("../ImageSL"));
int i = 0;
StringBuilder _ul_li_images = new StringBuilder();
foreach (FileInfo item in path.GetFiles())
{
_ul_li_images.AppendFormat("<li id=\"ls_1372054281206_{0}\" style=\"\" photo_list_item=\"{1}\" index_number=\"{0}\">",i,item.Name);
_ul_li_images.Append("<a class=\"" + (i == 0 ? "highlight" : "") + "\" href=\"javascript:void(0);\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_mask\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_container\">");
_ul_li_images.AppendFormat("<img src=\"ImageSL/{1}\" class=\"statistic_preview\" middle=\"0\" style=\"visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;\" id=\"img_1372054281206_{0}\">", i, item.Name);
_ul_li_images.Append("</span>");
_ul_li_images.Append("</span>");
_ul_li_images.Append("</a>");
_ul_li_images.Append("</li>");
i++;
}
_ul_li_images.AppendFormat("<li id=\"ls_1372054281206_{0}\" style=\"\" photo_list_item=\"photo_back.png\" index_number=\"{0}\">", i);
_ul_li_images.Append("<a class=\"" + (i == 0 ? "highlight" : "") + "\" href=\"javascript:void(0);\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_mask\">");
_ul_li_images.Append("<span class=\"photo_thumbnailist_container\">");
_ul_li_images.AppendFormat("<img src=\"http://cnc.qzs.qq.com/ac/qzone_v5/photo/photo_back.png\" class=\"statistic_preview\" middle=\"0\" style=\"visibility: visible; width: 69.3333px; height: 52px; margin-right: -8px; margin-left: -8px;\" id=\"img_1372054281206_{0}\">", i);
_ul_li_images.Append("</span>");
_ul_li_images.Append("</span>");
_ul_li_images.Append("</a>");
_ul_li_images.Append("</li>");
context.Response.Write(_ul_li_images.ToString());
context.Response.End();
}
}
}
效果
上傳圖片api
顯示數據
測試心得
若是你想測試的話 就發佈到本地IIS 而後清空瀏覽器的緩存 限制瀏覽器的網速 上/下 50K/S 就能夠 完整圖片最好大一點 但別超過30M的巨大圖片 哈哈 要不還得修改配置文件
結語
好了 今天就到這裏 休息 休息一下 謝謝閱讀!但願對你有所幫助 下載地址:http://download.csdn.net/detail/a66081638/5652811
相關文章
- 1. 圖片由模糊到清晰
- 2. ps把模糊圖片變清晰
- 3. 【web前端優化之圖片模糊到清晰】看我QQ空間如何顯示相片
- 4. [前端工坊]正則表達式-從模糊到清晰
- 5. Android Progressive JPEG 圖片由模糊到清晰
- 6. 化模糊爲清晰的圖片清晰術：動手嘗試修復模糊老照片
- 7. win10設置鎖屏+將鎖屏模糊變清晰的方法
- 8. [blender]圖片模糊不清楚怎麼變清晰
- 9. listview左滑刪除和置頂(仿QQ)
- 10. autojs模仿qq消息列表側拉置頂刪除菜單
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • XML 相關技術 - XML 教程
- • NewSQL-TiDB相關
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
