HTML+CSS+JS網(wǎng)頁(yè)設(shè)計(jì)與制作攝影類個(gè)人網(wǎng)頁(yè)

以使用網(wǎng)頁(yè)三劍客html+css+js實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)與制作，頁(yè)面排版布局高端大氣。

使用HTML+CSS頁(yè)面布局設(shè)計(jì)，HTML+CSS+JS網(wǎng)頁(yè)設(shè)計(jì)與制作攝影類個(gè)人網(wǎng)頁(yè)，這是一個(gè)優(yōu)質(zhì)的個(gè)人網(wǎng)頁(yè)制作。

憑借簡(jiǎn)約的設(shè)計(jì)風(fēng)格、精湛的制作工藝，突破與創(chuàng)新的理念。

個(gè)人網(wǎng)站、個(gè)人博客、個(gè)人介紹、攝影作品、圖片畫(huà)廊展示等個(gè)人網(wǎng)站的設(shè)計(jì)與制作。

網(wǎng)站介紹

1、網(wǎng)站程序：主要使用網(wǎng)頁(yè)三劍客html+css+javaScript實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)與制作，完成網(wǎng)站的功能設(shè)計(jì)。制作適用于任何瀏覽器或設(shè)備的精美網(wǎng)站。

2、網(wǎng)站布局：主要采用浮動(dòng)布局。兼容各大主流瀏覽器、顯示效果穩(wěn)定。

3、網(wǎng)站文件：網(wǎng)站系統(tǒng)文件種類包含html網(wǎng)頁(yè)結(jié)構(gòu)文件、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、images網(wǎng)頁(yè)圖片文件等。

4、網(wǎng)站素材：搜集或制作適合網(wǎng)頁(yè)風(fēng)格和尺寸的圖片，追求優(yōu)質(zhì)視覺(jué)體驗(yàn)。

5、網(wǎng)頁(yè)編輯：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意編輯軟件進(jìn)行編輯修改等操作）。

6、網(wǎng)頁(yè)效果預(yù)覽：雙擊html文件或者拖拽html文件到瀏覽器打開(kāi)，即可預(yù)覽當(dāng)前網(wǎng)頁(yè)效果。

網(wǎng)站亮點(diǎn)

1、視覺(jué)設(shè)計(jì)：排版布局極簡(jiǎn)設(shè)計(jì)，優(yōu)質(zhì)的視覺(jué)體驗(yàn)等。

2、動(dòng)效交互：幻燈效果、入場(chǎng)動(dòng)畫(huà)、按鈕點(diǎn)擊、視差功能、錨點(diǎn)功能、圖片畫(huà)廊功能、英文斷行等。

網(wǎng)站文件目錄

（1）index.html：首頁(yè)html；

（2）style：靜態(tài)資源目錄，存放css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、images網(wǎng)頁(yè)圖片文件等；

其中：

（1）css文件夾：存放網(wǎng)頁(yè)所有css樣式表文件文件；

（2）images文件夾：存放網(wǎng)頁(yè)所有圖片資源文件；

（3）js文件夾：存放網(wǎng)頁(yè)所有網(wǎng)頁(yè)特效文件；

網(wǎng)站源碼

一步寫(xiě)入input

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

 .ph08{
 opacity: 0; //如果自定義上傳按鈕一般都會(huì)這樣設(shè)置
 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">
 上傳海報(bào)
 </button>

第二步j(luò)s獲取上傳圖片路徑

 //處理圖片路徑
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("請(qǐng)上傳圖片格式");
 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+")");
 })
 }
 }
 })

這樣獲取到圖片路徑直接放入到你想要顯示的dom就可以

天給小伙伴們分享一個(gè)優(yōu)秀的vue.js圖片預(yù)覽組件VuePhotoPreview。

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

安裝

$ 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, //左右按鈕
  ... //更多配置
})

也支持單獨(dú)的引入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標(biāo)簽添加 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圖片預(yù)覽組件，歡迎交流討論。

在線咨詢

上一篇：《英雄聯(lián)盟》賀LPL奪冠：全大區(qū)全英雄免費(fèi)
下一篇：HTML5開(kāi)發(fā)常見(jiàn)的7個(gè)框架，不可不知，收藏啦

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。