语源科技BlogJava-linuxredhat

巧用CSS3 border制作图片遮罩效果

牛哥哥 — Sat, 07 Apr 2012 04:46:00 GMT

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;

牛哥哥 2012-04-07 12:46 发表评论

jQuery实例——展示表格点击变色、全选、删除

牛哥哥 — Sat, 07 Apr 2012 04:45:00 GMT

看着书上的代码，自己敲了好一阵，发现自己优化后的代码比书上的更简洁，功能也更多，贴出来，留后用~~

功能：

表格行点击变背景色、选择删除、全选删除、图片原图显示

效果显示：

代码贴上：

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>1001td>
        <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>1002td>
        <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>1003td>
        <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>2356td>
        <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>

牛哥哥 2012-04-07 12:45 发表评论

WPF使用---数据读取显示GridView

牛哥哥 — Sat, 07 Apr 2012 04:45:00 GMT

C# Code

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{
gvc = new GridViewColumn();
gvc.DisplayMemberBinding = new Binding(bstr[i]);
gvc.Header = headstr[i];
//gvc.Width = 100;
gv.Columns

牛哥哥 2012-04-07 12:45 发表评论

新人来了，慢慢再谢谢

牛哥哥 — Sat, 31 Mar 2012 10:25:00 GMT

新人来了，慢慢再谢谢

牛哥哥 2012-03-31 18:25 发表评论