整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
：設置表格的邊框
Border：設置表格邊框；
Border-collapse：設置邊框分離，合并 默認是 separate(分離) collapse 合并；
Border-spacing ：設置單元格的間距；
Padding：設置單元格內容和邊框之間的距離；
2：設置表格的寬度
Table-layout：設置寬度
默認 auto 自動方式，根據單元格的內容自動調整寬度；
比如輸入1111，寬度為50，屬性設為auto后，輸入111111111會自動增加寬度。
Fixed 固定方式 表格寬度固定，無法改變。
3：設置表格隔行換色
把所有的基數行或者所有的偶數行變換顏色
4：設置鼠標經過時行變色效果
CSS內置的一個屬性：HOVER
者 | 小胡
責編 | 郭芮
說到圖片處理，我們經常會想到PhotoShop這類的圖像處理工具。作為前端開發者，我們經常會需要處理一些特效，例如根據不同的狀態，讓圖標顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。”
不過你以為上面的圖片都是經過PS軟件處理出來的？不不不，純粹是用CSS寫出來的，很神奇吧。
CSS濾鏡（filter）能夠提供模糊、銳化或元素變色等圖形特效，過濾器則通常用于調整圖片、背景和邊界的渲染。
CSS標準里包含了一些已實現預定義效果的函數：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<!--html--> <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原圖">
filter: none
沒有任何效果，默認filter就為none。
filter:blur( ) 高斯模糊
給圖像一個高斯模糊效果，length值越大，圖像越模糊。我們來嘗試一下：
img {
filter:blur(2px);;
}
brightness(%) 線性乘法
可以讓圖片看起來更亮或者更暗：
img {
filter:brightness(70%);
}
contrast(%) 對比度
調整圖像的對比度：
img {
filter:contrast(50%);
}
設置陰影效果(h-shadow v-shadow blur spread color)
陰影是合成在圖像下面、有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似，不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。
利用這個方案，我們可以改變圖標的顏色，比如黑色圖標變成藍色圖標：
img {
filter: drop-shadow(705px 0 0 #ccc);
}
在這里，我們將圖片投影形成一個同等大小的灰色區域：
hue-rotate(deg) 色相旋轉
img {
filter:hue-rotate(70deg);
}
看，我的小姐姐變成了阿凡達！
invert(%) 反轉
這個函數的作用是反轉輸入圖像，有點像曝光的效果：
img {
filter:invert(100%)
}
grayscale(%) 將圖像轉換為灰度圖像
這個效果可以將圖片做舊，有一種時代滄桑感。喜歡古風的人一定會喜歡上這個效果的：
img {
filter:grayscale(80%);
}
除了古風還有一種用法是有的時候需要將全站變成灰色，如大屠殺紀念日的時候：
可以這樣設置：
*{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
sepia(%) 將圖像轉換為深褐色
下面給我的小姐姐一個暖暖的色調：
img {
filter:sepia(50%)
}
大家是不是發現我并沒有把url()方法寫到這上面來？
沒錯，因為我想把這個內容放到最后來說，filter:url()就是CSS濾鏡改變圖片的終極方法。CSS:filter可以導入一個svg濾鏡，作為它自己的濾鏡。
為什么說filter:url()是圖片變色的終極解決方案？請容我慢慢道來。
我們先科普一下PS的工作原理，我們都知道網頁是有三原色的R(紅) G(綠) B(藍)，常見的RGBA還包括一個opicity值，而opcity值是根據alpha通道計算出來的。也就是說，我們見到的網頁的每一個像素點都是由紅藍綠再加alpha四個通道組成，每一個通道我們稱之為色板，PS中8位板的意思就是2的八次方256，意思就是每一個通道的取值范圍都是(0-255)。
如果我們可以改變每個通道的值是不是就能完美的得到我們想要的任意顏色了呢？原理上，我們可以像PS那樣利用svg濾鏡得到任何我們想要的圖像，不僅僅是變色，我們甚至可以憑空生成一幅圖像。
svg feColorMatrix大法好
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix type="matrix" values=" 0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> </svg> <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
img {
filter:url(#change);
}
通過單通道我們可以將圖片變成單一的顏色：
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter> </defs> </svg>
通過雙通道我們可到一些非常炫酷的PS效果：
當然，在這里只是舉個例子，通過配置矩陣中的值，我們可以配置每一個像素點的值按照我們定義的規則顯示。
我們在這里詳細講一下feColorMatrix 矩陣的計算方式：
其中Rin Gin Bin a(alpha) 為原始圖片中每個像素點的rgba值，通過矩陣計算，得到的Rout Gout Bout Aout就是最終顯示出來的rgba值。
將圖片轉為單色，以棕色rgba(140,59,0,1)為例
根據上面的公式，我們可以簡化一些計算，同一行中，只設置一個通道的值，其他通道為0。不難得出矩陣：
0 0 0 0 目標值R 0 0 0 0 目標值G 0 0 0 0 目標值B 0 0 0 0 1
根據規則，只需要計算，255/想要顯示的顏色對應通道 = 目標值，我們想要的棕色rgba(140,59,0,1) 換算成色板 rgba 為 140 59 0 255，可以算出目標值0 0 0 0 0.55。
0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 1
多通道設置出來的炫酷效果
就如同之前我們看到的雙通道形成的炫酷圖片一般。
要把圖片的飽和度提高，首先當然是想想飽和度的成因，就是紅的越紅，藍的越藍，綠的越綠。由這個成因出發，我們的矩陣就可以寫成下面的樣子，看到矩陣當中出現了3 和-1，一定會很那悶這是怎么來的，原理其實很容易理解，讓我們假設某一個像素的RGB 分別是(200/255),(100/255),(50/255)，呈現的應該是有點暗沉的橘色，經過矩陣的換算：
R 變成了200/255x3-100/255-50/255= 1.76；
G 變成200/255x(-1)+100/255*3-50/ 255=0.2；
B 變成200x(-1)+100x(-1)+50x3=-0.59。
因此RGB轉換后就是：200x1.76，100x0.2，50x-0.5。
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter> </defs> </svg>
其他方案
除了feColorMatrix svg濾鏡還有很多的方法可以定義濾鏡，它們同樣可以作用到圖片上。由于篇幅限制，這里就不詳細展開了。
CSS3提供了filter這個屬性，使得通過前端技術實現更多炫酷的特效成為了可能；依賴于svg的濾鏡，我們可以實現復雜的濾鏡效果。
但是要注意：
文章難免會有疏漏，歡迎大家指正批評。
作者：小胡，曉教育前端，開源愛好者。
聲明：本文為作者投稿，版權歸其個人所有。
信我或關注微信號：猿來如此呀，回復：學習，獲取免費學習資源包。
滾動到頁面頂部
$(document).ready(function() {
$("a.scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
重置/清除表單
$(document).ready(function() {
$('#formID')[0].reset();
});
防止用戶二次提交表單
$(document).ready(function() {
var $myForm = $("#formID");
$myForm.submit(function() {
$myForm.submit(function() {
return false;
});
});
});
表格隔行變色
$(document).ready(function() {
$("table tr:even").addClass('zebra');
});
在新標簽/窗口打開鏈接
$(document).ready(function(){
$( 'a[href^="http://"], a[href^="https://"]' ).attr( 'target', '_blank' ); //均在所有鏈接在新窗口中打開
$( 'a.external' ).attr( 'target', '_blank' ); });
檢查值是否存在于數組中
$(document).ready(function() {
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("value", arr);
if( jQuery.inArray("4", arr) != -1 ) {
return true
};
});
獲取客戶端IP地址
$(document).ready(function() {
$.getJSON("http://jsonip.com/?callback=?", function(data) {
console.log(data);
alert(data.ip);
});
});
檢查元素是否隱藏
$(document).ready(function() {
$(element).is(":visible");
});
獲取窗口或文檔大小
$(window).height(); // 返回瀏覽器可視區高度 $(document).height(); // 返回HTML文檔高度 $(window).width(); $(document).width(); //獲取屏幕大小需要使用內置的 screen 對象 screen.height; screen.width;
檢查是否存在某個HTML元素
$(document).ready(function() {
if ($(element).length > 0) {
alert("exists");
} else {
alert("doesn't exist");
}
});
計算表格的行數
$(document).ready(function () {
var rowCount = $('#myTable tr').length;
});
阻止右鍵菜單
$(document).ready(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
獲取表單數據
$(document).ready(function() {
$('form').serialize() // returns a string
$('form').serializeArray() // returns an array
});
表單整體提交
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function(data) {
alert(data);
});
});
});
在 iFrame 中訪問父級窗口的元素
$(document).ready(function () {
$('element', window.parent.document).html();
});
獲得字符串的長度
$(document).ready(function() {
$('#selector').val().length;
$('.selector').val().length;
});
字符串的大小寫
$(document).ready(function () {
$('#selector').val().toLowerCase();
$('#selector').val().toUpperCase();
});
判斷是否存在某個類名
$(document).ready(function() {
$("#selector").hasClass(className);
$(".selector").hasClass(className);
});
圖片上傳到服務器之前預覽圖片
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function () {
$("#upload").change(function() {
readURL(this);
});
});
//html
<form id="form">
<input type='file' id="upload" />
<img id="preview" src="#" />
</form>
來源網絡侵權聯系刪除
私信我或關注微信號：猿來如此呀，回復：學習，獲取免費學習資源包。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
