为我家猫咪创建博客
起因
家里有只小橘猫，性格挺讨人喜欢的，就想着做个它的简易博客，记录其大小轶事，也用于记录我和他妈的养猫日常和感受。
demo：https://unuliha.gitee.io/blog/2021/08/29/zhongqiu/index.html
源码: https://gitee.com/unuliha/blog/tree/master/2021/08/29/zhongqiu
怎么做
需要记录的资料：照片、视频、文字信息
网页整体构造：参照《JavaScript DOM 编程艺术》（第2版）最后一章的综合实例
编程工具：WebStorm
思路：在整体框架不变的基础上，将内容样式修改为自己的，并添加上想要实现的功能。
主要功能及实现
功能1：鼠标放哪个标签，哪个标签高亮
思路：找到所有标签索引，为每一个标签添加两个事件：
onmouseover事件：被触发时增加新类名，新类的背景样式为高亮 onmouseout事件：鼠标移走时恢复原来的类名，即可恢复原来类的样式代码：
function highlightRows(){ var rows = document.getElementsByTagName("tr"); for (var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className; rows[i].onmouseover = function () { addClass(this, "highlight"); } rows[i].onmouseout = function () { this.className = this.oldClassName; } } } function addClass(elem,theclass){ if (!elem.className){ elem.className = theclass; } else { var classNames = elem.className; classNames += " "; classNames += theclass; elem.setAttribute("className",classNames); } }
功能2：给表格奇偶行设置不同样式
思路：直接给奇数行或偶数行添加新类名，让新类有不同的样式即可
代码：
function stripeTables(){ var tables = document.getElementsByTagName("table"); for (var i=0; i<tables.length; i++){ var odd = false; var rows = tables[i].getElementsByTagName("tr"); for (var j=0; j<rows.length; j++){ if (odd == true){ addClass(rows[j],"odd"); odd = false; } else { odd = true; // addClass(rows[j],"even") } } } }
这个功能也可以通过CSS伪类选择器nth-child(n)实现，其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。
功能3：图片索引上下翻页
思路：用了大佬的方法：https://www.cnblogs.com/starof/p/5732097.html
具体要实现：
当前页为第一页时，前翻按钮隐藏；当前页为最后一页时，后翻页按钮隐藏 点击上下翻页按钮，分别实现上下翻页，每次点击移动图片数量可设置步骤：
（1）设置变量now表示当前图片的位置、linum表示总共图片数量、shownum表示每页呈现数量。当前位置初始化为1，此时前翻按钮隐藏。如果当前位置为 linum-shownum+1，说明已经在最后一页的第一张图片的位置，此时后翻按钮隐藏。其他时候，前后翻按钮都显示。
（2）前后翻按钮每点击一次，页面前翻或后翻一页，可通过now+=number中的number设置每次翻页移动的图片张数。
（3）上下翻页通过设置图片索引列表的margin-left来实现，即wrap.stop(true).animate({"margin-left": -(now - 1) * 100})，由于事先裁好每个小图片宽度100，所以这里直接乘了100。
代码：
function swichPic() { //task growth var switchPic = (function () { /* now:当前第几个li linum:总共几个li shownum:要展示几个li w_li:li的宽度 marginR_li:li的右边距 */ var now = 1; var linum, shownum, pre, next, wrap; function init(o) { pre = o.preBtn; next = o.nextBtn; wrap = o.wrap; bindBtn(); } function btnShow() { getInfo(); if (linum <= shownum) { //如果li总个数小于要展示的个数，pre和next都不显示 pre.hide(); next.hide(); } else if (now == 1) { //初始化，只显示next pre.hide(); next.show(); } else if (now > linum - shownum + 1) { //到最后一组，只显示pre pre.show(); next.hide(); } else { //中间pre,next都显示。 pre.show(); next.show(); } } function getInfo() { linum = $("#imagegallery").find("li").size(); shownum = 6; } function bindBtn() { btnShow(); next.on("click", function () { now += 5; btnShow(); // wrap.stop(true).animate({"margin-left": -(now - 1) * offset}); wrap.stop(true).animate({"margin-left": -(now - 1) * 100}); }); pre.on("click", function () { now -= 5; btnShow(); wrap.stop(true).animate({"margin-left": -(now - 1) * 100}); }); $(window).resize(function () { now = 1; btnShow(); wrap.animate({"margin-left": 0}); }); } return {init: init} })();
功能4：点击图片索引在下方呈现完整图片，并能够呈现视频
思路：先在下方放一个placeholder用于呈现图片，再放一个placeholder1用于呈现视频。当点击上方索引时，获取的src为mp4时，placeholder隐藏，否则就placeholder1隐藏。
代码：
function prepareGallery(){ if (!document.getElementsByTagName) return false; //检查浏览器是否有该DOM方法 if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false;//检查是否存在钙元素 var gallery = document.getElementById("imagegallery") links = gallery.getElementsByTagName("a"); for (var i = 0;i<links.length;i++){ links[i].onclick = function (){ return showPic(this); } } } function preparePlaceholder(){ var gallery = document.getElementById("picSwichArrow"); var bigImage = document.createElement('div'); bigImage.setAttribute("id","bigImage"); var placeholder = document.createElement('img'); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src","images/chuyou.jpg"); placeholder.setAttribute("alt","my image gallery"); var placeholder1 = document.createElement('video'); placeholder1.setAttribute("id","placeholder1"); placeholder1.setAttribute("controls","all"); placeholder1.setAttribute("src","images/bodou.mp4"); bigImage.append(placeholder); bigImage.append(placeholder1); insertAfter(bigImage,gallery); placeholder1.style.display = "none"; } function showPic(whichpic){ var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); if (source.split(".")[1] == 'jpg'){ placeholder1.style.display ="none"; placeholder.style.display = "block"; placeholder.setAttribute("src",source); } else { placeholder.style.display = "none"; placeholder1.style.display ="block"; placeholder1.setAttribute("src",source); } return false; }
功能5：大图片添加翻页按钮，并与索引的翻页联动
具体功能：
（1）为了确定当前图片排在第几个，需要将所有图片索引放到一个数组里，通过当前图片在数组中的索引确定大图片按钮隐藏状态：
如果索引为0，说明是第一张图片正在呈现，前翻按钮隐藏；如果索引是length-1，说明是最后一张图片在呈现，后翻按钮隐藏。
（2）每次前后翻页，将current_img_index加1或减1，由于上方（功能3中的图片索引）也可以点击查看图片，上方点击后下面原本的current_img_index需要同时更新，因此点击翻页按钮时要先重新确定当前图片的索引。
（3）由于同时有视频文件和图片文件，相互切换时需要同步调整placeholder和placeholder1的隐藏状态。通过current_img_index所指资源的后缀名进行判断。
代码：
function bigSwich() { //添加箭头 let $left_arrow = $("<div id='big_left'>" + "<img src='images/left_arrow.png' style='width: 100%'/>" + "</div>"); let $right_arrow = $("<div id='big_right'>" + "<img src='images/right_arrow.png' style = 'width:100%'/>" + "</div>") $("#bigImage").append($left_arrow); $("#bigImage").append($right_arrow); //将图片保存在数组中 let arr = new Array(); let linum = $("#imagegallery").find("li").size(); for (let i = 0; i < linum; i++) { arr.push($(`#imagegallery li:eq(${i}) a`).attr("href")); } //创建对象封装功能 let bigSwichVa = (function () { let current_img_index, place,pre,next; function init(o) { pre = o.preBtn; next = o.nextBtn; bindBtn(); } function bigBtnShow() { if (current_img_index < 1) { pre.hide(); next.show(); } else if (current_img_index > arr.length - 2) { pre.show(); next.hide(); } else { pre.show(); next.show(); } } function getplace(index) { if (arr[index].split(".")[1] == 'jpg') { $("#placeholder").css("display" , "block"); $("#placeholder1").css("display" , "none"); place = $("#placeholder"); } else { $("#placeholder").css("display" , "none"); $("#placeholder1").css("display" , "block"); place = $("#placeholder1"); } return place; } function getIndex(){ let nowplace = ($("#placeholder").is(":hidden"))? ($("#placeholder1")):($("#placeholder")); let nowPic = nowplace.attr("src"); current_img_index = arr.indexOf(nowPic); } function bindBtn() { window.onclick = function (){ getIndex(); bigBtnShow(); } next.on("click", function () { getIndex(); current_img_index++; getplace(current_img_index); place.attr("src",arr[current_img_index]); bigBtnShow(); }) pre.on("click", function () { getIndex(); current_img_index--; place = getplace(current_img_index); place.attr("src",arr[current_img_index]); bigBtnShow(); }); } return {init: init} })(); bigSwichVa.init({ preBtn: $("#big_left img"), nextBtn: $("#big_right img"), }) }
功能6：点击文本标题显示该部分文本，其他部分隐藏
思路：首先给每个文本标签添加destination属性，指向文本的id，初始时所有文本隐藏。标签被点击时，其指向的文本显示，其余文本隐藏。
代码：
function showSection(id){ var sections = document.getElementsByTagName("section"); for (var i=0; i<sections.length; i++){ if (sections[i].getAttribute("id") != id){ sections[i].style.display = "none"; } else { sections[i].style.display = "block"; } } } function prepareInternalnav(){ var articles = document.getElementsByTagName("article"); if (articles.length == 0) return false; var navs = articles[0].getElementsByTagName("nav"); if (navs.length==0) return false; var nav = navs[0]; var links = nav.getElementsByTagName("a"); for (var i=0; i<links.length; i++){ var sectionId = links[i].getAttribute("href").split("#")[1]; if (!document.getElementById(sectionId)) continue; document.getElementById(sectionId).style.display = "none"; links[i].destination = sectionId; links[i].onclick = function (){ // alert(this.destination); showSection(this.destination); return false; } } }
待完善的内容
功能1：为图片索引添加提示边框，当下方呈现哪个图片时，上方索引图片有提示边框
功能2：为图片索引添加翻页提示小圆点
功能3：添加评论控件
相关知识
关于博客我们必须知道的十件事
2010年度最佳英文博客《时代》推荐
我家的小狗 tangweijia的博客
博客宠物最新资讯
国外博客大全.doc
宠物医院博客(宠物医院论坛)
哪些博客类型是最受欢迎的？
JavaScript请用对象字面量的形式创建一个宠物狗对象，具体信息如下。
宠物博客
为博客添加Gadgets Hamster仓鼠宠物代码
网址: 为我家猫咪创建博客 https://m.mcbbbk.com/newsview708871.html
| 上一篇: ssm毕设 猫咪铲屎官app源码 |
下一篇: 基于Springboot的宠物猫 |
