<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.trans {
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
.test_outer {
display: block;
width: 200px;
height: 200px;
margin: 1em auto;
position: relative;
overflow: hidden;
}
.test_cover {
width: 40px;
height: 40px;
border: 200px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -115px;
top: -165px;
}
.test_cover:hover {
width: 140px;
height: 140px;
left: -170px;
top: -165px;
}
.test_cover:hover:after {
content: "秋思-一葉知秋！";
text-align:center;
margin:55px 0 0 12px;
color: #fff;
font: bold 16px/1.2 '微軟雅黑';
text-shadow: 1px 1px rgba(0, 0, 0, .35);
position: absolute;
}
</style>
</head>
<body>
<a href="#" class="test_outer">
<span class="test_cover trans"></span>
<img src="http://center.w3cfuns.com/data/avatar/000/00/64/47_avatar_middle.jpg" width="200" height="200" />
</a>
</body>
</html>
其實現原理是利用個border偌大的半透明邊框屬性（demo中邊框寬度200像素），邊框顏色為rgba黑色半透明，然后50%圓角。再用用定位把它覆蓋在圖片上面。
主要核心代碼:
.test_cover {
width: 40px;
height: 40px;
border: 200px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -115px;
top: -165px;
}
然后外面再用個父容器把它溢出隱藏掉就可以了
.test_outer {
display: block;
width: 200px;
height: 200px;
margin: 1em auto;
position: relative;
overflow: hidden;
]]>
看著書上的代碼，自己敲了好一陣，發現自己優化后的代碼比書上的更簡潔，功能也更多，貼出來，留后用~~
功能：
表格行點擊變背景色、選擇刪除、全選刪除、圖片原圖顯示
效果顯示：
代碼貼上：
<!DOCTaYPE 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
body{font-size:12px}
table{width:360px;border-collapse:collapse}
table tr th,td{border:solid 1px #666;text-align:center}
table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:pointer}
table tr td span{float:left;padding-left:12px}
table tr th{background-color:#ccc;height:32px;background-color:#fff}
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer}
.btn{border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);cursor:pointer}
</style>
<body>
<script type="text/javascript">
$(function(){
//點擊表格行變色
$('tr').click(function(){
if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){
this.style.cssText='background-color:#CCC';
}else{
this.style.cssText='background-color:#fff';
}
})
//放大圖顯示
$('.a').mousemove(function(e){
$('#imgTip').show().attr('src',this.src);
$('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});
});
$('.a').mouseover(function(e){
$('#imgTip').show().attr('src',this.src);
$('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});
});
$('.a').mouseout(function(){
$('#imgTip').hide();
});
//點擊全選
$('#checkAll').click(function(){
if(this.checked){
$(':checkbox').attr('checked',true);
}else{
$(':checkbox').attr('checked',false);
}
});
//刪除部分與全部
$('.btn').click(function(){
if($('#checkAll').attr('checked')){
$('table tr td :checkbox:not("#checkAll")').each(function(index){
$('#'+this.value).remove();
});
}else{
$(':checkbox:not("#checkAll")').each(function(index){
if(this.checked){
$('#'+this.value).remove();
}
})
}
});
});
</script>
<table>
<tr>
<th>選項</th>
<th>編號</th>
<th>封面</th>
<th>購書人</th>
<th>性別</th>
<th>夠書價</th>
</tr>
<tr id="0">
<td><input type="checkbox" name="" id="checkbox1" value="0" /></td>
<td>1001</td>
<td><img src="1.jpg" title="" alt="" class="a" /></td>
<td>李小明</td>
<td>男</td>
<td>35.6元</td>
</tr>
<tr id="1">
<td><input type="checkbox" name="" id="checkbox2" value="1" /></td>
<td>1002</td>
<td><img src="2.jpg" title="" alt="" class="a" /></td>
<td>王明</td>
<td>男</td>
<td>28.9元</td>
</tr>
<tr id="2">
<td><input type="checkbox" name="" id="checkbox3" value="2" /></td>
<td>1003</td>
<td><img src="3.jpg" title="" alt="" class="a" /></td>
<td>皮特</td>
<td>女</td>
<td>34.3元</td>
</tr>
<tr id="3">
<td><input type="checkbox" name="" id="checkbox3" value="3" /></td>
<td>2356</td>
<td><img src="4.jpg" title="" alt="" class="a" /></td>
<td>愛丁堡</td>
<td>男</td>
<td>23.3元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span><input type="checkbox" name="" id="checkAll" />全選</span>
<span><input type="button" value="刪除" class="btn" /></span>
</td>
</tr>
</table>
<img src="1.jpg" title="" alt="" id="imgTip" class="clsImg" />
</body>
</html>
]]>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Data;
using System.Data.SqlClient;
namespace wang.lx
{
class HXGL_HXGL:Window
{
ListView lv;
dbHelper db = new dbHelper();
GridView gv;
GridViewColumn gvc;
public HXGL_HXGL()
{
Title = "橫向項目管理";
Grid grid = new Grid();
SizeToContent = SizeToContent.Height;
Width = 750;
grid.Margin = new Thickness(10);
Content = grid;
RowDefinition rd = new RowDefinition();
rd.Height = GridLength.Auto;
grid.RowDefinitions.Add(rd);
rd = new RowDefinition();
rd.Height = GridLength.Auto;
grid.RowDefinitions.Add(rd);
WrapPanel wrap = new WrapPanel();
Button btn1 = new Button();
btn1.Content = "增加";
btn1.Click += HXGL_btnOnClick;
btn1.Height = btn1.Width = 40;
wrap.Children.Add(btn1);
Button btn2 = new Button();
btn2.Height = btn2.Width = 40;
btn2.Content = "修改";
wrap.Children.Add(btn2);
Button btn3 = new Button();
btn3.Height = btn3.Width = 40;
btn3.Content = "刪除";
wrap.Children.Add(btn3);
grid.Children.Add(wrap);
ScrollViewer sv = new ScrollViewer();
sv.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
sv.Height = this.Height - btn1.Height - 10;
grid.Children.Add(sv);
Grid.SetRow(sv, 1);
lv = new ListView();
sv.Content = lv;
Data_Init();
gv = new GridView();
gv.AllowsColumnReorder = true;
gv.ColumnHeaderToolTip = "橫向項目管理";
lv.View = gv;
//可以向如下方式添加，但相當繁瑣，代碼重復次數超過兩次，最好寫成函數
//gvc = new GridViewColumn();
//gvc.DisplayMemberBinding = new Binding("name");
//gvc.Header = "項目名稱";
//gvc.Width = 100;
//gv.Columns.Add(gvc);
//gvc = new GridViewColumn();
//gvc.DisplayMemberBinding = new Binding("XMXH");
//gvc.Header = "項目序號";
//gvc.Width = 100;
//gv.Columns.Add(gvc);
//gvc = new GridViewColumn();
//gvc.DisplayMemberBinding = new Binding("fzr");
//gvc.Header = "負責人";
//gvc.Width = 100;
//gv.Columns.Add(gvc);
//gvc = new GridViewColumn();
//gvc.DisplayMemberBinding = new Binding("HTJF");
//gvc.Header = "合同經費";
//gvc.Width = 100;
//gv.Columns.Add(gvc);
//gvc = new GridViewColumn();
//gvc.DisplayMemberBinding = new Binding("DKJE");
//gvc.Header = "到款金額";
//gvc.Width = 100;
//gv.Columns.Add(gvc);
//利用數組批量添加，注意，此處必須和讀取的字段大小寫保持一致，否則無法顯示
string[] bstr = {"Name","XMXH","FZR","HTJF","DKJE", "HTBH", "FZRYB", "SBJF", "DKSJ", "XMLB", "LXSJ", "QDRQ", "JTSJ", "WTDW", "YXQX", "XMJJ","XMWCQKJJ", "XMCJZ" };
string[] headstr = {"項目名稱","項目序號","負責人","合同經費","到款金額", "合同編號", "負責人院別", "設備經費", "到款時間", "項目類別", "立項時間", "簽訂日期", "結題時間", "委托單位", "有效期限", "項目簡介","項目完成情況簡介", "項目參加者"};
AddColumn(bstr, headstr);
}
//批量添加函數
protected void AddColumn(string[] bstr, string[] headstr)
{
for(int i=0;i<bstr.Length;i++)
{
gvc = new GridViewColumn();
gvc.DisplayMemberBinding = new Binding(bstr[i]);
gvc.Header = headstr[i];
//gvc.Width = 100;
gv.Columns
]]>
]]>