📌一些设计原则

Don't Repeat Yourself（DRY，避免重复）————提高代码复用率
Keep It Simple and Stupid，尽量简单
Minimize Coupling ，低耦合————避免“牵一发而动全身”
Don't make me think，易于理解
Single Responsibility Principle，单一责任原则————代码段功能单一、明确
Maximize Cohesion，最大限度凝聚————功能相近相似的代码放在一起
Avoid Premature Optimization，避免过早优化————避免“完美主义”

v1.0 展示图片

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>展示照片</title>
	<style>
	*{
		margin: 0;
		padding: 0;
		text-align: center;
	}
	body{
		margin: 10px auto;
	}
	#big img{
		width: 600px;
		height: 400px;
	}
	li{
		display: inline;
		margin: 5px;
	}
	#smallPhotos,#previous,#next{
		display: inline-block;
	}
	</style>
  </head>
  <body>
	  <div id="big">
		<img src="https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png" id="bigPhotoSrc">
	  </div>
	  <div id="small">
		<div id="previous">上一张</div>
		<ul id="smallPhotos"></ul>
		<div id="next">下一张</div>
	  </div>
	<script>
	  var eg = {};
	  //定义数据
	  eg.data = [	["https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png","https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png"],
		["https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png","https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png"],
		["https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png","https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png"],
		["https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png","https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png"],
		["https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png","https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png"],
		["https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png","https://images.cnblogs.com/cnblogs_com/blogs/688454/galleries/1999081/o_210712114743wallhaven-rd3pjw_1920x1080%20(1).png"]
	  ];
	  eg.showNumber = 0;            //默认显示
	  eg.groupNumber = 1;             //当前显示的组
	  eg.groupSize = 6;                  //每组显示的数量
	  eg.showThumb = function(group){
		var ul = document.getElementById("smallPhotos");
		ul.innerHTML = '';                    //清空旧的内容
		var start = (group-1)*eg.groupSize;     //需要的data数据开始的位置
		var end = group*eg.groupSize;           //需要的data数据结束的位置
		for(var i = start;i < end && i< eg.data.length;i ++){
		  //生成HTML并插入到缩略图列表里
		  var li = document.createElement("li");
		  li.innerHTML = "<img src='"+eg.data[i][1]+"' width='80' height='40'"+">";
		  ul.appendChild(li);
		}
	  };
	  eg.init = function(){
		eg.showThumb(1);
	  };
	  eg.init();
	</script>
  </body>
</html>

知道多一点：

CSS Hack:针对不同的浏览器写不同的CSS代码的过程，主要针对IE浏览器，大致有3种表现形式：CSS类内部hack、选择器hack、HTML头部引用hack(if IE)

v2.0 响应鼠标动作

posted on 2021-09-23 15:14 KK的备忘录阅读(69) 评论(0) 收藏举报

刷新页面返回顶部

v1.0 展示图片

v2.0 响应鼠标动作

公告