以使用网页三剑客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图片预览组件，欢迎交流讨论。