项目介绍：官网展示
技术点：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) {// 在第一个锚点和最后一个锚点区间设置fixeddocument.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文件在网页预览形式展现

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

 function getDataFlow() {var tmpSearch = location.search;var tmpIndex = GetRequest(tmpSearch); // 获取参数IDvar 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文件流showPdfFileloadPDF(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.首先动态创建一个容器标签元素，如DIVhtmlDecodelet 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文件}});});
}

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-lineif (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;
}

html css js项目总结-官网相关推荐

web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）
前端搭建(HTML+CSS+JS)游戏官网(或其它)页面------实例与代码(示例:游戏官网界面) 注意:网页中的示例图片均出自米哈游–原神官网设计,如侵权,联系博主立马进行删除. 目标:网页实现前 ...
美团html页面代码,html+css+js制作美团官网
[实例简介] 该美团官网用html+css+js实现,对于前端新手来说,也可以去找类似的官网练练手,对自己帮助还是很大的,其中的很多细节错误都可以在锻炼中修改.希望该项目对大家有帮助,下载了的朋友顺便 ...
html+css+js 复现阴阳师官网，练手作
1.header部分 2. 首页 3.平安世界 4.游戏攻略 5.同人手账 6.同人大触,视听盛宴 7.泛娱乐 8.京都商业街 9.二维码,小神乐 10.footer 代码获取: git clone ...
如何用Nuxt.js构建项目,SSR官网项目搭建流程
SSR渲染现在Vue,React,angular等三大框架引领的单页面应用大行其道,使用这单页面技术构建的项目比比皆是.这些流行的框架给我们带来的好处显而易见,不仅是开发,维护成本都大大地获得了优化 ...
django项目之官网需求分析实现
上一篇:Django总目录篇点击跳转目录 Django的魅力按图需求分析首页需求分析核心团队职员现状在线视频常见问题关于我们 Djangoadmin后台管理 Django的魅力 Dj ...
HTML+CSS+JS实现原神官网静态页面
1. 需求概述客户需要一份能够吸引玩家的官网页面 1.1 术语解释 HTML:HTML是超文本标记语言,(英语:HyperText Markup Language,简称:HTML),是一种用来创建网 ...
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
html+css复刻NIKE官网静态页面（一）
nike的官网比较简洁,是我喜欢的风格,那么,复刻nike官网要怎么入手呢? html部分对一个网页进行复刻,我们应该先从结构下手. 这是初步的结构的分析,在html中我们可以用div或者secti ...

html css js项目总结-官网

1布局

2 技术总结

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

html css js项目总结-官网相关推荐

最新文章

热门文章