整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
頁(yè)截圖是我們最常使用的一個(gè)功能，但是一般網(wǎng)頁(yè)都會(huì)超過(guò)一屏的頁(yè)面。所以按照常規(guī)的方法進(jìn)行截屏操作的話(huà)，就不能將所有的內(nèi)容進(jìn)行截取操作，往往需要進(jìn)行幾次截屏并進(jìn)行拼接才可以。其實(shí)借助一些軟件工具，無(wú)需如此繁瑣，只需一鍵即可截下長(zhǎng)網(wǎng)頁(yè)。
專(zhuān)業(yè)軟件完成滾動(dòng)截圖
我們常見(jiàn)的截圖功能之所以不能完成相應(yīng)的操作，主要是因?yàn)樗鼈內(nèi)狈σ粋€(gè)名為“滾動(dòng)截圖”的獨(dú)門(mén)絕技。所以我們要想解決這個(gè)問(wèn)題的話(huà)，只需要安裝擁有這類(lèi)功能的截圖軟件就可以了。比如知名的免費(fèi)截圖軟件PicPick，就包含這樣一項(xiàng)獨(dú)特的功能。
運(yùn)行PicPick這款軟件以后，我們?cè)谲浖鹘缑娴摹敖厝∑聊弧眳^(qū)域，就可以看到一個(gè)名為“滾動(dòng)窗口”的選項(xiàng)，利用它就可以進(jìn)行網(wǎng)頁(yè)內(nèi)容的滾動(dòng)截圖操作了。以后當(dāng)我們需要進(jìn)行網(wǎng)頁(yè)滾動(dòng)截圖操作的時(shí)候，首先將瀏覽器滾動(dòng)條移動(dòng)到最上方，接下來(lái)點(diǎn)擊PicPick軟件窗口中的“滾動(dòng)窗口”按鈕（圖1）。
然后截圖軟件就會(huì)自動(dòng)隱藏窗口，我們現(xiàn)在將鼠標(biāo)移動(dòng)到瀏覽器上，它就會(huì)自動(dòng)框選瀏覽器的邊框。接下來(lái)我們只需要點(diǎn)擊鼠標(biāo)左鍵，網(wǎng)頁(yè)里面的內(nèi)容就會(huì)自動(dòng)開(kāi)始滾動(dòng)，當(dāng)滾動(dòng)到網(wǎng)頁(yè)最下方后就可以完成截圖操作。截取完成的圖片會(huì)自動(dòng)載入到軟件的編輯窗口里面，用戶(hù)點(diǎn)擊“文件”按鈕以后，在彈出的菜單里面選擇“保存”命令，這樣就可以將截圖進(jìn)行保存操作了。
小提示：如果用戶(hù)的電腦屏幕較小而不方便在軟件屏幕操作的話(huà)，那么可以在系統(tǒng)托盤(pán)通過(guò)鼠標(biāo)右鍵點(diǎn)擊PicPick軟件的圖標(biāo)，在彈出的菜單里面選擇“截取屏幕”按鈕中的命令就可以了（圖2）。
滾動(dòng)截圖也能停止操作
雖然PicPick這款軟件擁有我們需要的功能，但是我們?cè)谑褂盟臅r(shí)候也會(huì)發(fā)現(xiàn)有兩個(gè)問(wèn)題。比如在截取某些瀏覽器網(wǎng)頁(yè)窗口的時(shí)候，它并不會(huì)自動(dòng)進(jìn)行滾動(dòng)操作，而是稍微滾動(dòng)就會(huì)馬上停住。出現(xiàn)這樣的問(wèn)題主要是這款軟件對(duì)這個(gè)瀏覽器的內(nèi)核不兼容造成的，用戶(hù)只要切換到IE瀏覽器或者瀏覽器的兼容模式里面就可以解決了。而最主要的問(wèn)題在于，它在進(jìn)行滾動(dòng)截圖的時(shí)候無(wú)法進(jìn)行停止操作，這樣就會(huì)截取到大量沒(méi)有意義的內(nèi)容。所以要想解決這個(gè)問(wèn)題，只能換一款其他的軟件來(lái)解決。
現(xiàn)在我們運(yùn)行FastStone Capture這款軟件，這樣在電腦屏幕上就會(huì)出現(xiàn)一個(gè)軟件的工具條（圖3）。
當(dāng)我們要想進(jìn)行網(wǎng)頁(yè)滾動(dòng)截圖操作的時(shí)候，只需要點(diǎn)擊工具條中的“捕獲滾動(dòng)窗口”按鈕。接下來(lái)同樣將鼠標(biāo)移動(dòng)到瀏覽器窗口的上方，接著當(dāng)截圖軟件在瀏覽器的邊框上顯示出提示框以后，點(diǎn)擊鼠標(biāo)左鍵就可以開(kāi)始滾動(dòng)截圖的操作了。當(dāng)滾動(dòng)截圖的操作完成以后，截取的圖片就會(huì)自動(dòng)載入到軟件的編輯窗口里面，然后點(diǎn)擊工具欄中的“另存為”按鈕就可以進(jìn)行保存（圖4）。如果在滾動(dòng)截圖的過(guò)程中想停止操作，那么只需要雙擊鼠標(biāo)左鍵就可以了。
自帶功能就能滾動(dòng)截圖
如果用戶(hù)覺(jué)得第3方軟件操作比較麻煩的話(huà)，那么利用某些瀏覽器自帶的功能也可以完成截圖操作，比如Opera瀏覽器 就自帶有相應(yīng)的功能。首先在瀏覽器里面打開(kāi)要截圖的網(wǎng)頁(yè)，接著在左側(cè)側(cè)邊欄中找到“快照”按鈕。點(diǎn)擊它以后就會(huì)在網(wǎng)頁(yè)上出現(xiàn)一個(gè)選擇框，通過(guò)鼠標(biāo)拖拽調(diào)整選擇框到合適的寬度（圖5）。
接下來(lái)將鼠標(biāo)移動(dòng)到選擇框的下方，當(dāng)鼠標(biāo)指針變成雙箭頭以后向下不停的拖動(dòng)，從而實(shí)現(xiàn)了網(wǎng)頁(yè)滾動(dòng)的效果。當(dāng)需要截圖的內(nèi)容全部框選以后，點(diǎn)擊選擇框中的“捕獲”按鈕，就可以將我們需要的所有信息進(jìn)行截圖操作。然后在彈出的“編輯快照”對(duì)話(huà)框中，點(diǎn)擊“保存圖片”按鈕就可以完成圖片的截圖保存了（圖6）。
利用功能擴(kuò)展完成截圖
由于瀏覽器的種類(lèi)多種多樣，所以并不是所有的用戶(hù)都選擇使用歐朋瀏覽器，所以這些用戶(hù)要想進(jìn)行截圖操作的話(huà)就會(huì)很麻煩。比如我們知道谷歌瀏覽器開(kāi)放了源代碼，所以包括360瀏覽器、百度瀏覽器等在內(nèi)都是在它的基礎(chǔ)上拓展而來(lái)的。因此使用這些瀏覽器的用戶(hù)只需要安裝一款名為Fireshot的功能擴(kuò)展，就可以解決相關(guān)的問(wèn)題了。
當(dāng)我們要想進(jìn)行滾動(dòng)截圖的時(shí)候，只需要點(diǎn)擊工具欄中的擴(kuò)展圖標(biāo)，在彈出的菜單中選擇“捕捉整個(gè)頁(yè)面”命令。擴(kuò)展就會(huì)自動(dòng)對(duì)整個(gè)頁(yè)面進(jìn)行滾動(dòng)操作，當(dāng)滾動(dòng)到最下方的時(shí)候就會(huì)完成截圖操作。接下來(lái)會(huì)彈出一個(gè)新的網(wǎng)頁(yè)窗口，在窗口中就可以預(yù)覽到我們剛剛截取的圖片內(nèi)容。如果沒(méi)有問(wèn)題的話(huà)，點(diǎn)擊窗口右側(cè)的“另存為圖片”按鈕，就可以對(duì)這個(gè)圖片進(jìn)行保存操作了（圖7）。當(dāng)然我們利用其中的其他命令，還可以完成諸如“保存為PDF”、“復(fù)制到剪貼板”等其他的操作。
小提示：
如果用戶(hù)使用的是火狐瀏覽器或者火狐內(nèi)核的瀏覽器的話(huà)，那么安裝一款名為Full Web Page Screenshots的功能擴(kuò)展也可以解決相應(yīng)的問(wèn)題。它的操作方法與Fireshot擴(kuò)展類(lèi)似，這里我們就不再進(jìn)行介紹了。
手機(jī)系統(tǒng)也能滾動(dòng)截圖
隨著移動(dòng)設(shè)備在日常生活中的占比越來(lái)越多，除了在電腦里面進(jìn)行滾動(dòng)截圖操作以外，我們?cè)谑謾C(jī)里面也需要使用到這個(gè)操作。那么如何在手機(jī)系統(tǒng)里面完成滾動(dòng)截圖的操作呢？
我們首先按照常規(guī)的方法同時(shí)按住“音量減”和“電源”鍵，就可以完成對(duì)當(dāng)前屏幕的截圖操作。接下來(lái)我們就可以看到一個(gè)預(yù)覽窗口，在預(yù)覽窗口的工具欄里面有一個(gè)“滾動(dòng)截屏”的按鈕。點(diǎn)擊這個(gè)按鈕后就會(huì)開(kāi)始進(jìn)行滾動(dòng)操作，當(dāng)滾動(dòng)到頁(yè)面的最下方以后就會(huì)完成滾動(dòng)并進(jìn)行截圖操作。用戶(hù)在頁(yè)面滾動(dòng)的過(guò)程中點(diǎn)擊屏幕，就會(huì)止 滾動(dòng)停止并馬上完成截圖操作。
圖1
圖2
圖3
圖4
就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
天用js做的圖片無(wú)縫滾動(dòng)的效果，朋友們都說(shuō)CSS3也可以實(shí)現(xiàn)，話(huà)說(shuō)自己原來(lái)學(xué)的都是CSS2，主要用來(lái)網(wǎng)頁(yè)靜態(tài)布局，還真沒(méi)想過(guò)用CSS3的動(dòng)畫(huà)屬性。于是乎，花了一天時(shí)間在w3school上把關(guān)于CSS3動(dòng)畫(huà)的知識(shí)看了一遍，簡(jiǎn)單做了個(gè)圖片滾動(dòng)的效果，有些簡(jiǎn)陋，卻也發(fā)現(xiàn)CSS3的功能果然強(qiáng)大，也有一些瀏覽器兼容性的問(wèn)題（不過(guò)大家現(xiàn)在用的瀏覽器應(yīng)該都能支持，別告訴我你還在用XP，那你真是超級(jí)懷舊派了，話(huà)說(shuō)XP的確挺好）
這個(gè)是用來(lái)定義動(dòng)畫(huà)規(guī)則用的，在其中能夠定義任意多樣式任意多次數(shù)的動(dòng)畫(huà)規(guī)則，可以用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間。比如0%，25%，50%，75%，100%，也可以用關(guān)鍵詞“from”和“to”，等同于0%和100%。
0%是動(dòng)畫(huà)的開(kāi)始，100%是動(dòng)畫(huà)的結(jié)束。一般來(lái)說(shuō)，為了得到瀏覽器更好地支持，我們要始終定義0%和100%。
舉個(gè)例子，我們?cè)趧?dòng)畫(huà)開(kāi)始的時(shí)候，定義一個(gè)div元素的背景色為紅色，動(dòng)畫(huà)到一半的時(shí)候，定義背景色為藍(lán)色，動(dòng)畫(huà)結(jié)束的時(shí)候，背景色為黃色，怎么寫(xiě)這個(gè)動(dòng)畫(huà)規(guī)則？
@keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
一般來(lái)說(shuō)，為了更好的適配瀏覽器，我們還要寫(xiě)幾個(gè)作用于不同瀏覽器的規(guī)則
1、作用于Firefox瀏覽器
@-moz-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
2、作用于Safari和Chrome瀏覽器
@-webkit-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
3、作用于Opera瀏覽器
@-o-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
1、animation-name:規(guī)定動(dòng)畫(huà)的名稱(chēng)
2、animation-duration:規(guī)定動(dòng)畫(huà)完成一個(gè)周期的時(shí)長(zhǎng)
3、animation-timing-function:規(guī)定動(dòng)畫(huà)的曲線(xiàn)速度
4、animation-delay:規(guī)定動(dòng)畫(huà)開(kāi)始的時(shí)間
5、animation-iteration-count:規(guī)定動(dòng)畫(huà)播放的次數(shù)
6、animation-direction:規(guī)定動(dòng)畫(huà)在下個(gè)周期是否反向播放
7、animation-play-state:規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停
888、animation:簡(jiǎn)寫(xiě)屬性，將上邊1—6的屬性在一個(gè)表達(dá)式中體現(xiàn)，可以減少N多工作量。
最重要的一點(diǎn)，動(dòng)畫(huà)規(guī)則只有捆綁到某個(gè)選擇器上，動(dòng)畫(huà)才生效。意思一看都明白，關(guān)鍵是要多練習(xí)實(shí)際敲幾次代碼運(yùn)行下效果，這里我就不再累贅了。
1、擺上我們用來(lái)演示的圖片。
<body>
<p>圖片無(wú)縫滾動(dòng)</p>
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
</body>
2、加上CSS樣式
*{margin:0; padding: 0;}
p{
margin:0 auto;
text-align: center;
font-size:30px;
}
#wrap{
width:610px;
height:130px;
border:1px solid #000;
position: relative;
margin:100px auto;
overflow: hidden;
}
#list{
position: absolute;
left:0;
top:0;
width:200%;
}
#list li{
width:120px;
height:130px;
border:1px solid red;
background: pink;
color:#fff;
text-align: center;
font-size:50px;
float:left;
list-style: none;
}
3、給ul加上動(dòng)畫(huà)效果。為了適配不同的瀏覽器，還要多添加幾個(gè)animation屬性
#list{
position: absolute;
left:0;
top:0;
width:200%;
animation:myfirst 8s linear infinite alternate;
-moz-animation:myfirst 8s linear infinite alternate;
-webkit-animation:myfirst 8s linear infinite alternate;
-o-animation:myfirst 8s linear infinite alternate;
}
好了，大家可以看一看具體效果咯。
用CSS3實(shí)現(xiàn)圖片滾動(dòng)確實(shí)很輕松，效果也挺不錯(cuò)。還是最開(kāi)始我說(shuō)的，前期我們暫不必糾結(jié)到底JS方法好還是CSS3方法好，只要能把要求的效果實(shí)現(xiàn)了就行，進(jìn)步緣于一點(diǎn)一滴的實(shí)踐與鍛煉。
謹(jǐn)以此與大家共勉——一個(gè)奮斗在web開(kāi)發(fā)路上的小白
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
