前端企業(yè)求職必備原生javascript打造拖拽照片墻特效！

碼/視頻評論后加前端學習群470593776

javascript課題：原生js拖拽照片墻

知識點：浮動定位布局切換技巧，js鼠標事件，拖拽功能

碰撞檢測，原生js運動框架，2017年就業(yè)形勢分析，面試技巧等

源碼：

源碼/視頻評論后加前端學習群470593776

代碼過長，只發(fā)部分，大家評論下本文章后

可以加下前端群【470593776】（源碼和視頻）

果展示

選中樣式制作

將每個 tab 設置固定寬度。
每個tab 添加相對定位，居中，行高
添加偽類，偽類設置絕對定位，在底部。
設置偽類的寬度為 0%（偽類會繼承該元素的寬度）
設置選中時候的偽類寬度為50%（視情況而定）
給元素添加過渡樣式

HTML代碼(wxml)

			
				{{item.name}}

CSS(less)：

		.nav-bar{
			position: relative;
			z-index: 10;
			height: 90upx;
			white-space: nowrap;
			background-color: #fbfbfb;
			
			.nav-item{
				display: inline-block;
				width: 150upx;
				height: 90upx;
				text-align: center;
				line-height: 90upx;
				font-size: 30upx;
				color: #a4a4a4;
				position: relative;
			}
			
			.current{
				color: #3f3f3f;
				font-weight: bold;
			}
		}

實現(xiàn)效果大致為這樣的：

拓展

PS: 以上為純CSS實現(xiàn)部分，如果項目 tab數(shù)量為通過接口動態(tài)獲取的，可以適當加入一些 js 計算。

JS 思路：

獲取當前選中的 tab 的寬度
獲取當前選中 tab 以及它之前全部 tab 的寬度總和。
獲取當前屏幕寬度
判斷當前選中 tab 是否超過屏幕中心點（當前選中 tab 以及它之前全部 tab 的寬度總和 - 當前選中 tab 寬度/2）
移動當前 tabs 到屏幕的重心點位置

大致為（以微信小程序為例）：

				let width = 0; // 當前選中選項卡及它之前的選項卡之和總寬度
				let nowWidth = 0; // 當前選項卡的寬度
				//獲取可滑動總寬度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if(i === index){
						nowWidth = result.width;
					}
				}
				// console.log(width, nowWidth, windowWidth)
				//等待swiper動畫結(jié)束再修改tabbar
				this.$nextTick(() => {
					if (width - nowWidth/2 > windowWidth / 2) {
						//如果當前項越過中心點，將其放在屏幕中心
						this.scrollLeft = width - nowWidth/2 - windowWidth / 2;
						console.log(this.scrollLeft)
					}else{
						this.scrollLeft = 0;
					}
					if(typeof e === 'object'){
						this.tabCurrentIndex = index; 
					}
					this.tabCurrentIndex = index; 
				})

ps: getElSize() 函數(shù)代碼為：

			getElSize(id) { 
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},

這樣就可以實現(xiàn)動態(tài) tab 切換了：

片編輯：如何在Lightroom中創(chuàng)建HTML Web畫廊？

隨著iPad和iPhone的日益普及，我們大多數(shù)人不再適合創(chuàng)建基于Flash的Web畫廊 - 它們無法在這些設備上輕松查看。如果您希望幾乎每個人都能夠看到您的畫廊，那么您需要將它們創(chuàng)建為HTML畫廊而不是Flash。

要在Lightroom中創(chuàng)建Web畫廊，請首先將圖像放入集合中。這使您可以更輕松地處理圖像，并且可以保存圖庫，以便將來根據(jù)需要進行編輯。選擇您的收藏并切換到Web模塊。從“布局樣式”選項中，您可以選擇Lightroom HTML庫，或者更簡單地從屏幕左側(cè)的“模板瀏覽器”面板中選擇基于HTML的庫。如果您在預覽區(qū)域中查看，HTML圖庫模板的左下角都有字母HTML。選擇要使用的模板。

從工具欄（如果不可見則按T鍵），如果您選擇了一個集合，請選擇所有膠片照片，這會將所有圖像添加到您的圖庫。您在編輯區(qū)域的屏幕上看到的是您的網(wǎng)絡圖庫的實時版本。您可以單擊任何圖像以查看它在Web上的外觀。

打開“站點信息”面板，然后鍵入站點標題，集合標題和集合描述。如果您不想使用所有這些，只需刪除您不想使用的項目的占位符文本，并且將釋放它們在模板中占用的空間以用于您的圖像。對于“聯(lián)系信息”，請根據(jù)需要鍵入您的聯(lián)系人姓名，然后填寫“Web或郵件鏈接”，這將自動鏈接到Web畫廊中的聯(lián)系人姓名。

您可以在圖庫中添加標識牌，如果需要，它將位于網(wǎng)站標題上方。如果需要，您可以通過完成Web或郵件鏈接框?qū)⑵滏溄踊啬恼军c。

使用“調(diào)色板”選項可以更改網(wǎng)站模板中各種元素的顏色。

在“外觀”面板中，您可以設置縮略圖圖像網(wǎng)格大小 - 默認為3 x 3，不能小于任何小，但可以大得多。如果要在圖像上顯示單元格編號，可以這樣做 - 當您需要為查看者提供一種簡單的方法來識別他們喜歡的圖像時，這非常有用。圖像按順序編號，如果您有多個頁面，則第二頁上的圖像將從第一頁的編號順序繼續(xù)。

您可以通過調(diào)整“大小”滑塊來控制“圖像”頁面上的完整大小圖像的大小。您還可以將圖片邊框添加到圖像頁面中的圖像。請注意，“外觀”面板分為“通用設置”，“網(wǎng)格頁面”和“圖像頁面”，允許您進行影響整個圖庫的更改，僅影響網(wǎng)格頁面或僅影響圖像頁面。

在“圖像信息”面板中，您可以選擇為圖像添加標簽。它們僅出現(xiàn)在圖像頁面上。您可以選擇圖像上方顯示的標題和圖像下方顯示的標題。例如，對于每一個，您可以從圖像元數(shù)據(jù)中獲取文本，并且沒有理由不能將標題設置為標題元數(shù)據(jù)，而將標題設置為您的設備元數(shù)據(jù)。

在輸出設置中選擇較大尺寸JPG圖像的質(zhì)量 - 0是低質(zhì)量，100是高質(zhì)量。如果要在圖像中包含元數(shù)據(jù)，請選擇要包含的內(nèi)容 - 您的選擇是“僅限版權(quán)”還是“全部”。

如果需要，還可以添加水印。如果您選擇添加水印，您將在圖像頁面和索引頁面上看到它，以便您可以檢查它是否是您想要的。選擇是否銳化圖像 - 此銳化僅在圖像輸出時應用，因此您不會在屏幕上看到它。如果您不確定要使用什么，請啟用銳化并將其設置為標準。

完成后，單擊“創(chuàng)建已保存的Web畫廊” - 這是Lightroom 4中的新選項，它顯示在主編輯區(qū)域的右上角。鍵入Web庫的名稱，然后單擊“創(chuàng)建”。這樣做可確保庫已保存，一旦完成此操作，Lightroom將從現(xiàn)在開始跟蹤您的更改。將來您可以通過單擊Lightroom為您創(chuàng)建的特殊集合返回Web畫廊。

配置好所有內(nèi)容后，單擊“上載”以呈現(xiàn)庫圖像，創(chuàng)建必要的html代碼并將其全部自動上傳到服務器。

Lightroom中的HTML畫廊并不是城里最漂亮的畫廊，但是幾乎任何設備都可以使用畫廊，這絕對是激勵他們使用它們代替Flash畫廊。

在線咨詢

上一篇：終于，JavaScript也有了類（class）的概念
下一篇：HTML電腦編程03 標題物理字體標簽的使用，大學生學編程

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商