以使用網頁三劍客html+css+js實現網頁設計與制作，頁面排版布局高端大氣。

使用HTML+CSS頁面布局設計，HTML+CSS+JS網頁設計與制作攝影類個人網頁，這是一個優質的個人網頁制作。

憑借簡約的設計風格、精湛的制作工藝，突破與創新的理念。

個人網站、個人博客、個人介紹、攝影作品、圖片畫廊展示等個人網站的設計與制作。

網站介紹

1、網站程序：主要使用網頁三劍客html+css+javaScript實現網頁設計與制作，完成網站的功能設計。制作適用于任何瀏覽器或設備的精美網站。

2、網站布局：主要采用浮動布局。兼容各大主流瀏覽器、顯示效果穩定。

3、網站文件：網站系統文件種類包含html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件等。

4、網站素材：搜集或制作適合網頁風格和尺寸的圖片，追求優質視覺體驗。

5、網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意編輯軟件進行編輯修改等操作）。

6、網頁效果預覽：雙擊html文件或者拖拽html文件到瀏覽器打開，即可預覽當前網頁效果。

網站亮點

1、視覺設計：排版布局極簡設計，優質的視覺體驗等。

2、動效交互：幻燈效果、入場動畫、按鈕點擊、視差功能、錨點功能、圖片畫廊功能、英文斷行等。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

網站文件目錄

（1）index.html：首頁html；

（2）style：靜態資源目錄，存放css網頁樣式文件、js網頁特效文件、images網頁圖片文件等；

其中：

（1）css文件夾：存放網頁所有css樣式表文件文件；

（2）images文件夾：存放網頁所有圖片資源文件；

（3）js文件夾：存放網頁所有網頁特效文件；

網站源碼

 .uploadWrap{
 font-size: 14px;
 line-height: 24px;
 cursor: pointer;
 height: 36px;
 width: 118px;
 margin-right: 6px;
 margin-left: 28px;
 position: relative;
 }

 .ph08{
 opacity: 0; //如果自定義上傳按鈕一般都會這樣設置
 height: 36px;
 width: 118px;
 position: absolute;
 top: 0;
 left: 0;
 }

<div class="poster" id="poster"> </div>//圖片顯示dom


<button class="uploadWrap defaultBtn_low_short_noBg">
 <input type="file" name="file0" id="file0" multiple="" class="ph08">
 上傳海報
 </button>

 //處理圖片路徑
function getObjectURL(file) {
 var url = null;
 if (window.createObjectURL != undefined) { // basic
 url = window.createObjectURL(file);
 } else if (window.URL != undefined) { // mozilla(firefox)
 url = window.URL.createObjectURL(file);
 } else if (window.webkitURL != undefined) { // webkit or chrome
 url = window.webkitURL.createObjectURL(file);
 }
 return url;
 }

$("#file0").change(function(){
 if (this.files && this.files[0]){
 var filePath = $('#file0').val().toLowerCase().split(".");
 var fileType = filePath[filePath.length - 1]; //獲取圖片格式
 if(fileType=='zip'||fileType=='rar'||fileType=='html'){
 alert("請上傳圖片格式");
 return false;
 }
 var objUrl = getObjectURL(this.files[0]);
 if(objUrl){
 console.log(objUrl);
 $("#poster").css("background-image","url("+objUrl+")");
 $("#file0").click(function(e){
 $("#poster").css("background-image","url("+objUrl+")");
 })
 }
 }
 })

天給小伙伴們分享一個優秀的vue.js圖片預覽組件VuePhotoPreview。

vue-photo-preview 基于 PhotoSwipe 的 Vue 圖片預覽組件。超流暢的預覽效果、完美支持pc及移動端適配。

安裝

$ npm i vue-photo-preview -S

引入插件

// 在main.js中引入
import Vue from 'vue'
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(photoPreview)

// or
Vue.use(photoPreview, {
  loop: false,
  fullscreenEl: false, //是否全屏
  arrowEl: false, //左右按鈕
  ... //更多配置
})

也支持單獨的引入js

<link rel="stylesheet" type="text/css" href="路徑/dist/skin.css"/>
<script src="路徑/dist/vue-photo-preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var options= {
    fullscreenEl: false, //是否全屏
    arrowEl: false, //左右按鈕
  }
  Vue.use(vuePhotoPreview,options)
  new Vue({
    el:'#app'
  })
</script>

使用

在img標簽添加 preview 屬性，preview值相同即表示為同一組。

<template>
  <div>
    <img src="xxx.jpg" preview="0" preview-text="描述文字">
    <!-- 分組 -->
    <img src="xxx.jpg" preview="1" preview-text="描述文字">
    <img src="xxx.jpg" preview="1" preview-text="描述文字">
    
    <img src="xxx.jpg" preview="2" preview-text="描述文字">
    <img src="xxx.jpg" preview="2" preview-text="描述文字">
    
    <img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="縮略圖與大圖模式">
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>

# photoswipe插件文檔
https://photoswipe.com/documentation/api.html

# demo地址
https://826327700.github.io/vue-photo-preview/demo/

# github地址
https://github.com/826327700/vue-photo-preview

ok，就分享到這里。如果大家有好的Vue圖片預覽組件，歡迎交流討論。