css設置滾動條並加hover效果
::-webkit-scrollbar{}//滾動條大小寬度等 ::-webkit-scrollbar-thumb{}//滾動條滑塊 ::-webkit-scrollbar-track {}//滾動條滑道 要增加hover效果直接在裏面寫&:hover{} eg:鼠標移上去改變滑道的樣式 ::-webkit-scrollbar-track { &:hover{} }
防止多次觸發hover效果,在動畫前加.stop(true,true),停止上一次動畫
$(this).find('.toggle').stop(true,true).slideDown();
js 報錯找不到event :查看函數內是否傳event,或者 event = event ? event : window.event;
製作簡易流程圖、思維導圖,learn.json用文件夾方式打開頁面進行請求會出現跨域問題,用http方式打開即可
css3 keyframes使用
// forwards表示停留在最後一幀
.notice_item:hover .notice_flag{
animation:notice_flag_hover 0.2s forwards;
}
@keyframes notice_flag
{
from {height: 0px;}
to {height: 40px;}
}
ps把選區的釐米變爲像素:編輯——首選項——單位與標尺
有一些常用的CSS樣式寫了就忘記了,做一個記錄,以便查閱,持續更新
ios手機上點擊塊出現灰色背景
html,body{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
// 我這個項目,寫了這個樣式過後,對安卓打開鍵盤產生了影響,所以這樣寫
<script>
$(function(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if(isiOS){
$("html,body").css("-webkit-tap-highlight-color","rgba(0, 0, 0, 0)");
}
})
</script>
微信安卓機清空緩存
對話框中輸入 debugx5.qq.com 發送出去,點擊進調試頁面勾選需清空的緩存
背景圖的顯示位置設置:
background-position: top | bottom | center | left | right | top left | top right | bottom left | bottom right
溢出顯示省略號並設置最多顯示n行
//超出@num行顯示省略號
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @num;
-webkit-box-orient: vertical;
//只顯示一行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
calc 在 less 中編譯出錯 ,加上~
width: calc(~"100% - 500px");
layer子彈窗關閉自己
var index=parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
文字滾動標籤:
<marquee behavior="" direction=""></marquee>
遍歷json,去掉爲空的數據:
for (key in data) {
if(data[key] == null || data[key] == undefined || data[key] == ""){
delete data[key]
}
}
css文件中使用自定義常量
//在 :root{} 中定義後,即可用 var() 使用
:root{
--base_color: #fff;
--cont_wrap: 20px;
}
.box{
padding: var(--cont_wrap);
border:1px solid var(--base_color);
}
輪播插件swiper: http://www.swiper.com.cn/
圖表插件echart: http://echarts.baidu.com/