html css js项目总结-官网

项目介绍：官网展示
技术点：js,html,css，swiper轮播，pdjjs文档在页面预览加载
首页：

1布局

 场景一、左边img 中间是两头虚线中间实线 右边文字
 结构如下：
 <div class="headerLeft">
            <div class="headerLeftImg"> <img src='./public/imgs/topbackground.svg' class="headerLeftImgsvg" />
            </div>
            <div class="headerLeftSpeartor">
                <div class="gradTop"></div>
                <div class="gradBottom"></div>
            </div>
            <div class="leftTitle">官网</div>
        </div>

设置渐变虚线background: linear-gradient(#999999, white);
给盒子添加阴影：box-shadow: 0px 0px 5px #999999;
鼠标移入切换图片展示：
var obj = document.getElementById(“winnerContent”);
obj.src = “./public/imgs/xxx.png”;

轮播图的使用：（图片1-5可替换为img） 引入swiper.js与对应的css文件

    <div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">图片1</div>
                    <div class="swiper-slide">图片2</div>
                    <div class="swiper-slide">图片3</div>
                    <div class="swiper-slide">图片4</div>
                    <div class="swiper-slide">图片5</div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

swiper的使用，在对应的index.js中

var swiper = new Swiper(".swiper-container", {
  keyboard: true,   // 键盘的上下箭头能否触发轮播
  spaceBetween: 0,  //图片与图片之间的空隙
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false
  },
  pagination: {
    el: ".swiper-pagination",   // 分页器（图片下的12345或者圆点）
    clickable: true     // 是否可点击
  },
  mousewheel: true,  //鼠标滚动是否轮播
  loop: true  // 是够循环轮播
});
swiper.el.onmouseover = function () {
  swiper.autoplay.stop(); // 鼠标移入暂停轮播
};
swiper.el.onmouseout = function () {
  swiper.autoplay.start();  // 鼠标移出开始轮播
};

在页面的事件中

$(document).ready(function () {
  $("#siderImgIDOne").css("marginLeft", -leftPX * 0.6 + "px");
  $("#siderImgIDTwo").css("marginLeft", -leftPX * 0.6 + "px");
  $("#siderImgIDThree").css("marginLeft", -leftPX * 0.6 + "px");
  $("#siderImgIDFour").css("marginLeft", -leftPX * 0.6 + "px");
  $("#siderImgIDFive").css("marginLeft", -leftPX * 0.7 + "px");
});

跳转外部链接

window.open("www.baidu.com");

页面跳转及锚点

从首页跳转到简介页的某一个位置，使用a标签的name属性对应url中#的部分，
在简介页面设置opacity为0或者display:none均可
在首页添加这样一个标签
<a href="./about.html#dept">部门简介</a>
在简介的布局位置中添加如下： 
<a name="dept" style="opacity: 0"></a>

2 技术总结

窗体随滚动定位或消失
1.当前锚点滚动到顶部

document.getElementById("topServiceOne").scrollIntoView();

处理思想：
onscroll的时候 判断锚点与视窗的距离，然后做定位，在最后一个锚点和第一个锚点的时候会单独判断确定浮动导航是定位还是消失

$(document).ready(function () {
  // 加载完毕时调用样式及
  var tmpscrollTop =
    document.body.scrollTop || document.documentElement.scrollTop;
  if (tmpscrollTop === 0) {
    imgOneOver();
  }
});

window.onscroll = function () {
  // 被卷起来的高度
  var tmpscrollTop =
    document.body.scrollTop || document.documentElement.scrollTop;
  var tmpchuangkou = document.documentElement.clientHeight;
  var tmpMidLocation = 0.5 * tmpchuangkou; // 窗口中间线

  if (document.getElementById("scrollto") !== undefined) {
    if (
      document.documentElement.scrollTop + document.body.scrollTop >
      tmpMidLocation
    ) {
      document.getElementById("scrollto").style.display = "block";   // 这是回到顶部的按钮是否展示 当滑动的距离大于一半窗口时就展示回到顶部按钮
    } else {
      document.getElementById("scrollto").style.display = "none";
    }
  }

  var tmpOne = 0;
  var tmpTwo = 0;
  var tmpThree = 0;
  var tmpFour = 0;
  var tmpParentOne = 0;
  var tmpParentTwo = 0;
  var tmpParentThree = 0;
  var tmpParentFour = 0;
  var tmpServiceEnd = 0;
// 四个锚点
  if (
    document.getElementById("topServiceOne") !== undefined ||
    document.getElementById("topServiceTwo") !== undefined ||
    document.getElementById("topServiceThree") !== undefined ||
    document.getElementById("topServiceFour") !== undefined ||
    document.getElementById("serviceScrollEnd") !== undefined
  ) {
    tmpParentOne = document.getElementById("topServiceOne").offsetTop;
    //  tmpOne = document.getElementById('topServiceOne').offsetTop;

    tmpTwo = document.getElementById("topServiceTwo").offsetTop;
    //  tmpParentTwo = document.getElementById('topServiceTwo').offsetParent.offsetTop;

    tmpThree = document.getElementById("topServiceThree").offsetTop;
    //  tmpParentThree = document.getElementById('topServiceThree').offsetParent.offsetTop;

    tmpFour = document.getElementById("topServiceFour").offsetTop;
    //  tmpParentFour = document.getElementById('topServiceFour').offsetParent.offsetTop;

    tmpServiceEnd = document.getElementById("serviceScrollEnd").offsetTop;
  }

  // 各个锚点距离浏览器窗口顶部距离
  var tmpHighOne = tmpParentOne;
  var tmpHighTwo = tmpTwo - tmpscrollTop;
  var tmpHighThree = tmpThree - tmpscrollTop;
  var tmpHighFour = tmpFour - tmpscrollTop;

  //  // 判断第一个和第二个目录之间转换
  if (tmpHighTwo > tmpMidLocation || tmpscrollTop < tmpHighOne) {
    imgOneOver();
    imgTwoOut();
    imgThreeOut();
    imgFourOut();
  }
  //  // 判断第二个和第三个目录之间上下转换
  if (tmpHighTwo < tmpMidLocation && tmpHighThree > tmpMidLocation) {
    imgOneOut();
    imgTwoOver();
    imgThreeOut();
    imgFourOut();
  }

  // 判断第三个和第四个目录之间上下转换
  if (tmpHighThree < tmpMidLocation && tmpHighFour > tmpMidLocation) {
    imgOneOut();
    imgTwoOut();
    imgThreeOver();
    imgFourOut();
  }
  // 判断第四个目录
  if (tmpHighFour < tmpMidLocation) {
    imgOneOut();
    imgTwoOut();
    imgThreeOut();
    imgFourOver();
  }

  var tmpdiv = document.getElementById("fixMenuService");
  var tmpFourBot = tmpFour;
  var tmpEndHigh = tmpServiceEnd - tmpFour - 30; // 最后两个锚点间的距离

  var tmpEndHighPx = tmpFour + tmpEndHigh + 30 - tmpParentOne;

  // 设定浮动窗口的滚动区间
  var tmpEndHighPx = tmpEndHighPx + "px";
  if (tmpdiv !== undefined) {
    if (tmpParentOne < tmpscrollTop && tmpscrollTop < tmpFourBot + tmpEndHigh) {
      // 在第一个锚点和最后一个锚点区间设置fixed
      document.getElementById("fixMenuService").style.marginTop = "0px";
      document.getElementById("fixMenuService").style.position = "fixed";
      document.getElementById("fixMenuService").style.top = "30px";
    } else if (tmpscrollTop >= tmpFourBot + tmpEndHigh) {
      // 大于最后一个锚点时取消position的设置,导航随页面滚动
      document.getElementById("fixMenuService").style.position = "";
      document.getElementById("fixMenuService").style.marginTop = tmpEndHighPx;
      document.getElementById("fixMenuService").style.top = "";
    } else if (tmpscrollTop <= tmpParentOne) {
      // 滚动到锚点最开始时,设置margin值 回归文档流正常加载
      document.getElementById("fixMenuService").style.marginTop = "30px";
      document.getElementById("fixMenuService").style.position = "";
      document.getElementById("fixMenuService").style.top = "";
    }
  }
};

function gotoOneImgID() {
  document.getElementById("topServiceOne").scrollIntoView();
}

function gotoTwoImgID() {
  document.getElementById("topServiceTwo").scrollIntoView();
}

function gotoThreeImgID() {
  document.getElementById("topServiceThree").scrollIntoView();
}

function gotoFourImgID() {
  document.getElementById("topServiceFour").scrollIntoView();
}

// 导航栏的下拉子导航的显示与隐藏  start
function showMenu() {
  $("#serviceNavID")
    .removeClass("serviceHidden")
    .addClass("serviceNav");
}
function hiddenMenu() {
  $("#serviceNavID")
    .removeClass("serviceNav")
    .addClass("serviceHidden");
}

function showAboutMenu() {
  $("#aboutUsNavID")
    .removeClass("serviceHidden")
    .addClass("serviceNav");
}
function hiddenAboutMenu() {
  $("#aboutUsNavID")
    .removeClass("serviceNav")
    .addClass("serviceHidden");
}
// 导航栏的下拉子导航的显示与隐藏  end

//站点导航//
function imgOneOver() {
  $("#imgOneUnclick").prop("src", "../public/imgs/serviceNavOneClick.png");
  $("#oneImgID").prop("class", "fixMenuServiceContentOne");
  document.getElementById("oneImgIDTitle").style.color = "white";
}

function imgOneOut() {
  $("#imgOneUnclick").attr("src", "../public/imgs/serviceNavOne.png");
  $("#oneImgID").attr("class", "fixMenuServiceContent");
  document.getElementById("oneImgIDTitle").style.color = "#333";
}

function imgTwoOver() {
  $("#imgTwoUnclick").attr("src", "../public/imgs/serviceNavTwoClick.png");
  $("#twoImgID").attr("class", "fixMenuServiceContentOne");

  document.getElementById("twoImgIDTitle").style.color = "white";
}

function imgTwoOut() {
  $("#imgTwoUnclick").attr("src", "../public/imgs/serviceNavTwo.png");
  $("#twoImgID").attr("class", "fixMenuServiceContent");
  document.getElementById("twoImgIDTitle").style.color = "#333";
}

function imgThreeOver() {
  $("#imgThreeUnclick").attr("src", "../public/imgs/serviceNavThreeClick.png");
  $("#threeImgID").attr("class", "fixMenuServiceContentOne");

  document.getElementById("threeImgIDTitle").style.color = "white";
}

function imgThreeOut() {
  $("#imgThreeUnclick").attr("src", "../public/imgs/serviceNavThree.png");
  $("#threeImgID").attr("class", "fixMenuServiceContent");
  document.getElementById("threeImgIDTitle").style.color = "#333";
}

function imgFourOver() {
  $("#imgFourUnclick").attr("src", "../public/imgs/serviceNavFourClick.png");
  $("#fourImgID").attr("class", "fixMenuServiceContentOne");
  document.getElementById("fourImgIDTitle").style.color = "white";
}

function imgFourOut() {
  $("#imgFourUnclick").attr("src", "../public/imgs/serviceNavFour.png");
  $("#fourImgID").attr("class", "fixMenuServiceContent");
  document.getElementById("fourImgIDTitle").style.color = "#333";
}

//站点导航//

3 pdf文件在网页预览形式展现

1. 引用pdf.js
   后端返回文件的base64字符串(注意让后端清除/r/n否则在IE下无法正确渲染)，
   由于页面信息都是后端提供，这边会发送接口请求到数据(包括字符串)，主要说这一堆字符串的处理

 function getDataFlow() {
  var tmpSearch = location.search;
  var tmpIndex = GetRequest(tmpSearch); // 获取参数ID
  var tmpUrl = Host + "showFile?id=" + tmpIndex;
  $.ajax({
    url: tmpUrl,
    type: "GET",
    dataType: "", //返回数据的 类型 text|json|html--
    contentType: "application/json",
    async: false,
    beforeSend: function () { },
    success: function (data) {
      var tmpData = htmlDecode(data);
      var tmpFlow = JSON.parse(tmpData);
      // console.log("tmpFlow", tmpFlow);
      //渲染PDFJS及页面
      var tmpCode = tmpFlow.code;
      var tmpTitle = tmpFlow.data.prdtName; //获取标题
      var tmpDate = tmpFlow.data.pubDate; //获取时间
      tmpDate = changeCorrentTime(tmpDate);
      if (!tmpTitle) $("#detailNoticeContent").hide();
      $("#infoDetailTitle").text(tmpTitle); //设置页面标题
      $("#infoDetailTime").text(tmpDate); //设置页面时间
      $("#detailNoticeLine").show();
      var tmpFileNameUrl = tmpFlow.data.fileUrl; //获取文件下载链接
      if (tmpCode === "0") {
        var tmpData64Flow = tmpFlow.data.data; //获取base64文件流showPdfFile
        loadPDF(tmpData64Flow);    // 这里加载pdf相关处理
      } else {
        // 非Pdf文件时加载此处提醒
        $("#containerbk").hide();
        $("#containerPdfContent").css("backgroundColor", "#eaeaea");
        $("#containerPdfContent").css("height", "800px");
        $("#containerPdfContent").css("line-height", "800px");
        $("#containerPdfContent").css("text-align", "center");
        $("#containerPdfContent").text("暂不支持此文件的预览，可点击附件下载后查阅。");
        // $("#containerPdfContent").css("backgroundColor","red");
      }},
    complete: function (json) { },
    error: function () {
      alert("数据加载失败");
    }
  });
}

//返回的是html格式数据
function htmlDecode(text) {
  // 1.首先动态创建一个容器标签元素，如DIVhtmlDecode
  let temp = document.createElement("div");
  // 2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
  temp.innerHTML = text;
  // 3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML的字符串了。
  const output = temp.innerText || temp.textContent;
  temp = null;
  return output;
}

//读取pdf文件，并加载到页面中
function loadPDF(data) {
  var fileContent = converData(data);
  pdfjsLib.getDocument(fileContent).then(function (pdf) {
    //用 promise 获取页面
    var id = "";
    var idTemplate = "cw-pdf-";
    var pageNum = pdf.numPages;
    pageAll = pdf.numPages;
    //根据页码创建画布
    createSeriesCanvas(pageNum, idTemplate);
    //将pdf渲染到画布上去
    for (var i = 1; i <= pageNum; i++) {
      id = idTemplate + i;
      renderPDF(pdf, i, id);
    }
  });
}
// 转换为Uint8Array
function converData(data) {
  data = data.replace(/[\r\n]/g, "");
  var raw = window.atob(data);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for (var i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}

//创建
function createPdfContainer(id) {
  var pdfContainer = document.getElementById("pop");
  var canvasNew = document.createElement("canvas");
  canvasNew.id = id;
  pdfContainer.appendChild(canvasNew);
}

//创建和pdf页数等同的canvas数
function createSeriesCanvas(num, template) {
  var id = "";
  for (var j = 1; j <= num; j++) {
    id = template + j;
    createPdfContainer(id);
  }
}

//
//渲染pdf
//建议给定pdf宽度
function renderPDF(pdf, i, id) {
  pdf.getPage(i).then(function (page) {
    var scale = 1.5;  // 文字缩放比例
    var viewport = page.getViewport(scale);

    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.then(function () {
      countNum++;
      if (countNum === pageAll) {
        $("#containerbk").hide();   // 之前的遮盖层隐藏
        // 有且只有加载完是才会真实的PDF容  类似于懒加载
        $("#container").show();  /// 加载渲染好的pdf文件
      }
    });
  });
}

3. input框输入后，点击enter开始查询

    $("#articleNameInput").on("keypress", function (event) {
  if (event.keyCode == 13) {
    // alert("你输入的内容为1：" + $("#prdtcodeInput").val());
    onSearchData();
  }
});

4.关闭按钮在手机端不生效的解决办法
在页面中添加标签的事件

<a  onclick="closeDetail()">关闭页面</a>

在JS中事件处理如下:

	function isIE() {
  if (!!window.ActiveXObject || "ActiveXObject" in window) return true;
  else return false;
}

function isChrome() {
  var userAgent = navigator.userAgent;
  if (userAgent.indexOf("Chrome") > -1) {
    return true;
  } else false;
}

function closeDetail() {
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) {
    window.location.href = document.referrer;
    var u = navigator.userAgent;
    if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) && /(Safari)/i.test(u)) {
      window.location.href = document.referrer;
    }
  } else {
    //否则就是电脑端打开
    // window.location.href = 'http://www.xxx.com';
    // IE下关闭浏览器时window.open("", "_self"); 没有空格
    var tmpString = isIE() ? "" : " ";
    window.opener = null;
    if (isIE()) {
      window.open(tmpString, "_self");
      window.close();
    } else if (isChrome()) {
      // window.location.href = "about:blank"; // 打开一个新的空白页
      window.open("../disclosure.html", "_self");
      window.close();
    } else {
      window.open(" ", "_self");
      window.close();
    }
  }
}

5.获取url中的参数

//跳转后页面 参数ID start
function GetRequest(tmpurl) {
  const url = tmpurl; // 获取url中"?"符后的字串
  const theRequest = new Object(); // eslint-disable-line
  if (url.indexOf("?") !== -1) {
    const str = url.substr(1);
    const strs = str.split("&");
    for (let i = 0; i < strs.length; i += 1) {
      theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
  }
  return theRequest.id;
}

6.文件下载
在页面中触发a标签或者其他的标签

<a  onclick="getDataUrl(this)" ></a>

在js中 GetRequest 方法参见5 ，

// 文件下载
function getDataUrl() {
  const tmpID = location.search;
  const tmpUrlID = GetRequest(tmpID); // 通过ID传递参数 避免文件名过长 在IE浏览器下无法加载
  window.location.href = Host + FileDownLoad + "?id=" + tmpUrlID;
}