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