ps切片使用
9-11日總結(jié)
1.切片工具將圖片切分,按住shift則切片取整
2.切片選擇工具選擇需要保存的切片 ,需要點基于。。切片才能切好
3.按住shift+ctrl+alt+s保存,保存后選擇圖片存儲類型,點擊存儲后選擇切片,設(shè)置保存的圖片的多少。
git使用
1.創(chuàng)建項目
2.powershell上進入指定文件夾克隆,克隆后進入項目文件夾f2e -i進行初始化。
初始化后用code打開。
git add .存到存儲區(qū) ;git commit -m “進一步提交”;git push提交到本地倉庫 ;如果在倉庫里有人改動,則git pull拉取下來。再push提交上去。
如果是克隆別人的項目,則克隆后 npm install npm run dev
在一個div里的圖片如果需要用戶保存,則將其嵌入到img標簽里面,如果不需要保存,則將圖片放入到背景圖片里面。
通常情況下圖片的底部有個白邊,要想取消白邊,則對圖片設(shè)置display:block
項目打包:push完npm run build build后的打包文件在build大文件夾里,dev后綴文件,部署該文件即可
swiper輪滑和scroll
options:添加劃條或者是點擊左右按鈕,同時在data里寫上navigation或者scollbar,
所有滑動的那種效果都是放在swiper-slide里,swiper-slide下的div放左右按鈕或者是滑條。swiper-slide里如果不放背景圖片放img的話,則需要給圖片設(shè)置高度,寬度可以自己有100%/
下面的原點表示輪滑順序的點是paginition 需要自己寫div
pc端需要在index.js里加一個code=“no”,且pc端用px,pc端可以設(shè)置一個div居中,在div里設(shè)置元素的定位可以適應(yīng)屏幕的居中
嵌入直播 移動端:直接在video里寫src,src為m3u8鏈接,
pc端:添加一個div,有class設(shè)置元素屬性,id設(shè)置鏈接,netease鏈接放入mounted,不放也寫方法,把方法寫入mounted。括號內(nèi)部最后為字符串id。
在和后臺交互的時候,如果有ip接口地址,要放入config.url里。。config.url里如果有寫好的前綴,注意接口的方法和名字。
加載多個圖片的時候
shouye :require.context(’…/assets’,false,/shouye_(\d)/),
shouyeAssets:shouye.keys().map((item)=>{return shouye(item)}),
加載輪播圖 1.npminstall 2.div 3.datali放options后面的數(shù)據(jù) 4.component里放組件
浮層彈窗
https://blog.csdn.net/baidu_41644405/article/details/90174995
在點擊預(yù)約的時候沒有彈窗是因為時間冒泡,在父元素中有this,isShow=false,所以會一直不出現(xiàn),所以要取消冒泡事件
需要定時的,js獲取當(dāng)前時間戳
https://www.cnblogs.com/vaiyanzi/archive/2010/08/05/1792931.html
在部分區(qū)域吸頂燈效果
scrolltop,通常取得是相對于父元素的滾動高度,被屏幕遮住的那一部分,通常是相對于body,所以如果是父元素的子元素的子元素,要加上父元素的scrolltop才是該元素的滾動高度
offsettop 是子元素相對于父元素頂部的距離,通常來說是固定的, 但是要和scrolltop比,也是要加上父元素的offsettop
var ofT=document.getElementById(‘containwrap’)
var fixdom=document.getElementById(‘wrap’)
var ofTparent=document.getElementById(‘part8’)
var ofT9=document.getElementById(‘part9’)
window.addEventListener(‘scroll’,winscroll,false)
function winscroll(e){
let offsetT=ofTparent.offsetTop+ofT.offsetTop; //子元素的固定高度
let offsetT9=ofT9.offsetTop;
// console.log(offsetT);
let scrollT=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 子元素的滾動距離…
console.log(scrollT);
if(scrollT>offsetT&&scrollT<offsetT9){ 都是相對于屏幕比較的 然后比較大小
fixdom.classList.add(‘fixed’);
}else{
fixdom.classList.remove(‘fixed’);
}
window.οnscrοll=function(){} //用來監(jiān)聽滾輪滾動事件,可以放在mounted里面。
實現(xiàn)輪播圖的縮略圖 https://blog.csdn.net/kassiaaaa/article/details/94636794
swiper學(xué)習(xí)筆記
https://www.jianshu.com/p/33824b920e8f
swiper3d
swiperOption2:{
effect : ‘coverflow’,
slidesPerView: 1, //關(guān)鍵是將輪播的設(shè)為1,并且最外層swiper設(shè)置為overflow:visible不為overhidden
centeredSlides: true,
coverflowEffect: {
rotate: 0,
stretch: 90,
depth: 60,
modifier: 2,
slideShadows : true
},
pagination:{
el:’.swiper-pagination2’
},
navigation: {
nextEl: ‘.swiper-button-next2’,
prevEl: ‘.swiper-button-prev2’
},
關(guān)于swiper回調(diào)index,dfinspire項目
總結(jié)
- 上一篇: Java用awt编写计算器(只有加减乘除
- 下一篇: suffix automachine-陈