JavaScript 入门案例
四、 JavaScript 入门案例
在看本节之前，笔者建议您先看 JavaScript 基础篇 https://www.cnblogs.com/IT-LFP/p/10945884.html
1. 瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局-瀑布流</title>
<link rel="stylesheet" href="css/layout.css" />
<script src="js/layout.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<a href="img/1.jpg"><img src="img/1.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/2.jpg"><img src="img/2.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/3.jpg"><img src="img/3.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/4.jpg"><img src="img/4.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/5.jpg"><img src="img/5.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/6.jpg"><img src="img/6.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/7.jpg"><img src="img/7.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/8.jpg"><img src="img/8.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/9.jpg"><img src="img/9.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/10.jpg"><img src="img/10.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/11.jpg"><img src="img/11.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/12.jpg"><img src="img/12.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/13.jpg"><img src="img/13.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/14.jpg"><img src="img/14.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/15.jpg"><img src="img/15.jpg" alt="" ></a>
</div>
</div>
<div class="box">
<div class="box_img">
<a href="img/6.jpg"><img src="img/16.jpg" alt="" ></a>
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
imgLocation("container", "box");
var imgData = {
"data": [
{"src": "2.jpg"}, {"src": "4.jpg"}, {"src": "6.jpg"}, {"src": "8.jpg"}, {"src": "10.jpg"}, {"src": "12.jpg"}, {"src": "14.jpg"}, {"src": "16.jpg"},
{"src": "1.jpg"}, {"src": "3.jpg"}, {"src": "5.jpg"}, {"src": "7.jpg"}, {"src": "9.jpg"}, {"src": "11.jpg"}, {"src": "13.jpg"}, {"src": "15.jpg"}
]
};
window.onscroll = function () {
if (checkFlag()) {
var cparent = document.getElementById("container");
for (var i in imgData.data) {//添加图片节点
//console.log(i);
var ccontent = document.createElement("div");
ccontent.className = "box";
cparent.appendChild(ccontent);
var boximg = document.createElement("div");
boximg.className = "box_img";
ccontent.appendChild(boximg);
var aimg = document.createElement("a");
aimg.href = "img/" + imgData.data[i].src;
boximg.appendChild(aimg);
var img = document.createElement("img");
img.src = "img/" + imgData.data[i].src;
aimg.appendChild(img);
}
imgLocation("container", "box");
}
}
};
function checkFlag() {
var cparent = document.getElementById("container");
var ccontent = getChildrenElement(cparent, "box");
var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
//console.log(lastContentHeight + ":" + scrolltop + ":" + pageHeight);
if (lastContentHeight < scrolltop + pageHeight)
return true;
}
//将content储存在数组中
function getChildrenElement(parent, content) {
var contentArr = [];
var contentAll = parent.getElementsByClassName(content);
//console.log(contentAll.length);
for (var i = 0; i < contentAll.length; i++) {//为什么这里不能用var i in contentAll
contentArr.push(contentAll[i]);
}
return contentArr;
}
//将parent下所有的content取出
function imgLocation(parent, content) {
var cparent = document.getElementById(parent);
var ccontent = getChildrenElement(cparent, content);
var imgWidth = ccontent[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
//console.log(cols);
cparent.style.cssText = "width:" + imgWidth * cols + "px;margin:0 auto";
//获取衔接点
var boxHeightArr = [];
for (var i in ccontent) {
if (i < cols) {
boxHeightArr[i] = ccontent[i].offsetHeight;
//console.log(boxHeightArr[i]);
} else {
var minHeight = Math.min.apply(null, boxHeightArr);
//console.log(minHeight);
var minIndex = getMinIndex(boxHeightArr, minHeight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight + "px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
boxHeightArr[minIndex] += ccontent[i].offsetHeight;
}
}
}
function getMinIndex(boxHeightArr, minHeight) {
for (var i in boxHeightArr)
if (boxHeightArr[i] == minHeight)
return i;
return -1;
}
</script>
</html>
2. 3D翻页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D翻页轮播</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: url("img/0.jpg") no-repeat center/100%;
/*overflow: hidden;*/
}
.wrap {
position: relative;
width: 1000px;
height: 612px;
margin: 100px auto;
background: url("img/0.jpg") no-repeat 100%;
perspective: 6000px; /*3d景深*/
box-shadow: 0 0 18px pink;
}
.left, .right {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
}
.left {
transform: rotateY(0deg);
transform-origin: left;
transform-style: preserve-3d; /*3d属性*/
z-index: 1;
}
.on {
transform: rotateY(-180deg);
transition: transform 1.5s ease-in-out;
}
.right {
background: url("img/1.jpg") no-repeat right top 50%;
}
.prev, .next {
position: absolute;
width: 100%;
height: 100%;
}
.prev {
background: url("img/0.jpg") no-repeat right top 50%;
}
.next {
background: url("img/1.jpg") no-repeat left top 50%;
transform: translateZ(-1px) scale(-1, 1); /*scale(x,y)负值可以达到镜像,translateZ(-1px)改变层次*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<div class="prev"></div>
<div class="next"></div>
</div>
<div class="right"></div>
</div>
</body>
<script>
/**
* 防止全局变量污染
*/
(function () {
var oLeft = document.querySelector(".left");//获取元素querySelector(".left");
var oPrevImg = document.querySelector(".prev"),
oNextImg = document.querySelector(".next"),
oWrapImg = document.querySelector(".wrap"),
oRightImg = document.querySelector(".right"),
oBodyImg = document.querySelector("body");
var index = 0,//当前第几张图
isClick = false;//多次点击的开关
function change() {
if (isClick) return;
isClick = true;
index++;
index %= 4;
oLeft.classList.add("on");//添加类名,可维护性
document.addEventListener("transitionend", function () {//transitionend
oLeft.classList.remove("on");
oBodyImg.style.backgroundImage =
oPrevImg.style.backgroundImage =
oWrapImg.style.backgroundImage = "url('img/" + index + ".jpg')";
oNextImg.style.backgroundImage =
oRightImg.style.backgroundImage = "url('img/" + (index + 1) % 4 + ".jpg')";
isClick = false;
});
}
document.onclick = function () {
change();
}
}
)();
</script>
</html>
3. 网易轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1200px;
height: 367px;
margin: 80px auto;
}
.wrap .imgBox ul {
position: relative;
width: 1200px;
height: 336px;
overflow: hidden;
}
.wrap .imgBox ul li {
position: absolute;
list-style: none;
width: 730px;
height: 336px;
transition: transform .2s ease;
}
.wrap .imgBox ul .list1 {
z-index: 1;
transform: scale(0.81);
transform-origin: 0 100%;
}
.wrap .imgBox ul .list2 {
z-index: 2;
transform: translateX(235px);
}
.wrap .imgBox ul .list3 {
z-index: 1;
transform: translateX(730px) scale(0.81);
transform-origin: 100% 100%;
}
.wrap .imgBox ul .list4 {
transform: translateX(965px) scale(0.81);
transform-origin: 100% 100%;
}
.wrap .imgBox ul .list5 {
transform: translateX(1200px) scale(0.81);
transform-origin: 100% 100%;
}
.wrap .imgBox ul .list6 {
transform: translateX(1435px) scale(0.81);
transform-origin: 100% 100%;
}
.wrap .imgBox ul li img {
width: 730px;
height: 336px;
}
.wrap .lineBar {
width: 1200px;
height: 31px;
text-align: center;
}
.wrap .lineBar span {
display: inline-block;
width: 35px;
height: 3px;
margin-left: 4px;
background-color: #cccccc;
}
</style>
</head>
<body>
<!--
div.wrap>(div.imgBox>ul>li.list$*6>img[src="img/0$.jpg"])+div.lineBar>span*6
-->
<div class="wrap">
<div class="imgBox">
<ul>
<li class="list1"><img src="img/01.jpg" alt=""></li>
<li class="list2"><img src="img/02.jpg" alt=""></li>
<li class="list3"><img src="img/03.jpg" alt=""></li>
<li class="list4"><img src="img/04.jpg" alt=""></li>
<li class="list5"><img src="img/05.jpg" alt=""></li>
<li class="list6"><img src="img/06.jpg" alt=""></li>
</ul>
</div>
<div class="lineBar"><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
</body>
<script>
(function () {
var listArray = document.querySelectorAll(".wrap .imgBox ul li"),
lineBar = document.querySelectorAll(" .wrap .lineBar span"),
oImgBox = document.querySelector(".wrap .imgBox"),
oName = [],
index = 0,
listLength = listArray.length;
for (var item of listArray) {
oName.push(item.className);
}
function nextPic() {//把最后一个放到第一个位置
oName.unshift(oName[5]);
oName.pop();
for (var i = 0; i < listLength; i++)
listArray[i].className = oName[i];
index++;
index %=6;
changeColor();
}
function prePic() {//把第一个放到最后一个位置
oName.push(oName[0]);
oName.shift();
for (var i = 0; i < listLength; i++)
listArray[i].className = oName[i];
index--;
if (index<0) index=5;
changeColor();
}
function changeColor() {
for (var i = 0; i < listLength; i++) {
if (i == index)
lineBar[index].style.backgroundColor = "green";
else
lineBar[i].style.backgroundColor = "#cccccc";
}
}
changeColor();
var eleSel = ["list1", "list3"];
var eleAct = ["prePic", "nextPic"];
oImgBox.addEventListener("click", function (e) {
var e = e || window.event;
var ele = e.target.parentNode.getAttribute("class");
if (ele == "list3") nextPic();
if (ele == "list1") prePic();
//window[eleAct[eleSel.indexOf(ele)]]();
});
})();
</script>
</html>
4. 京东轮播图
//京东轮播图
(function () {
var oLefter = document.querySelector(".j-content .content-wrap01 .content02 .lefter");
var oRighter = document.querySelector(".j-content .content-wrap01 .content02 .righter");
var oImages = document.querySelectorAll(".j-content .content-wrap01 .content02 .banner-img a");
var oCircle = document.querySelectorAll(".j-content .content-wrap01 .content02 .circle span");
var oBanner = document.querySelector(".j-content .content-wrap01 .content02");
var index = 0;
var lastIndex = 0;
var timer = 0;//定时器的返回值是number类型
//方向点击切换
oLefter.onclick = function () {
change(function () {
index--;
if (index < 0) index = oImages.length - 1;
});
};
oRighter.onclick = function () {
rightChange();
};
function rightChange() {
change(function () {
index++;
index %= oImages.length;
});
}
//鼠标移动到圆的切换
for (var i = 0; i < oCircle.length; i++) {
oCircle[i].index = i;//在每个圆中自定义一个index属性,核心点
oCircle[i].onmouseover = function (e) {
change(function () {
index = e.currentTarget.index;//核心点,想想为什么不能用this.index
});
}
}
//自动轮播
function auto() {
timer = setInterval(function () {
rightChange();
// console.log(index);
}, 3000);
}
auto();
//鼠标进入轮播图清除定时时间
oBanner.onmouseenter = function () {
clearInterval(timer);
};
//鼠标移出自动轮播
oBanner.onmouseout = function () {
clearInterval(timer);//清除重复的定时器,修复bug
auto();
};
//change函数
function change(callback) {
//prev
oImages[lastIndex].classList.remove("banner-on");//className = '';
oCircle[lastIndex].classList.remove("circle-on");
//index变化
callback && callback();//防止报错
//next
oImages[index].classList.add("banner-on");//className="banner-on";
oCircle[index].classList.add("circle-on");
//lastIndex变化
lastIndex = index;
}
})();
5. 京东公告栏和线条跟随
(function () {
var oLine = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .line"),
oPromotion = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .a2-1"),
oNotice = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .a2-2");
var promote = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .promotion"),
note = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .notice");
//促销栏和下划线的显示
oPromotion.onmouseenter = function () {
oLine.classList.remove("line-on");
oLine.addEventListener("transitionend", function () {
note.classList.add("text-none");
promote.classList.remove("text-none");
});
};
//公告栏和下划线的显示
oNotice.onmouseenter = function () {
oLine.classList.add("line-on");
oLine.addEventListener("transitionend", function () {
promote.classList.add("text-none");
note.classList.remove("text-none");
});
}
})();
6. 京东秒杀
/*京东秒杀*/
(function () {
var timeData = {//获取时间数据
oHours: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .hours"),
oMinimums: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .minimums"),
oSeconds: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .seconds"),
};
//计时器
function timer(time) {
if (Number(time.oSeconds.innerHTML) > 0) {
change(time.oSeconds);
} else {
if (Number(time.oMinimums.innerHTML) > 0) {
change(time.oMinimums);
time.oSeconds.innerHTML = 59;
} else {
if (Number(time.oHours.innerHTML) > 0) {
change(time.oHours);
time.oMinimums.innerHTML = 59;
time.oSeconds.innerHTML = 59
} else {
clearInterval();
}
}
}
}
//计时变化
function change(data) {
var count = Number(data.innerHTML);
// console.log(typeof data.innerHTML);
count--;
if (count < 10)
data.innerHTML = "0" + count;
else
data.innerHTML = count;
}
//定时
setInterval(function () {
timer(timeData);
}, 1000);
})();
7. 京东搜索框热词推荐
/*热词变化*/
(function () {
var data01 = ["海尔空调", "烧烤炉", "奶瓶消毒器", "挂烫机", "云南白药牙膏", "U盘16G", "魅族手机", "油烟机"];
var data02 = ["1元享800M", "家电清凉节", "建材3件8折", "巴味渝珍李"];
var length01 = data01.length,
index01 = 0,
length02 = data02.length,
index02 = 0,
timer02 = 0;
var oPlaceholder = document.querySelector(".search-wrap .search-box .searcher .searchText"),
oHotWords = document.querySelector(".search-wrap .search-hotWords .a-1");
var flag = false;
//placeholder的热词切换
setInterval(function () {
if (!flag) {
index01++;
index01 %= length01;
oPlaceholder.setAttribute("placeholder", data01[index01]);
}
}, 5000);
//搜索框获取和失去焦点时,placeholder的热词消失和出现
oPlaceholder.onfocus = function () {
flag = true;
oPlaceholder.setAttribute("placeholder", "");
};
oPlaceholder.onblur = function () {
flag = false;
oPlaceholder.setAttribute("placeholder", data01[index01]);
};
//推荐热词的切换函数
function auto() {
timer02 = setInterval(function () {
index02++;
index02 %= length02;
oHotWords.innerHTML = data02[index02];
}, 3000);
}
auto();
//鼠标移入后,推荐热词停止切换
oHotWords.onmouseenter = function () {
clearInterval(timer02);
};
//鼠标移出后,推荐热词继续切换
oHotWords.onmouseout = function () {
clearInterval(timer02);
auto();
};
})();
JavaScript 入门案例的更多相关文章
- javascript入门视频第一天 小案例制作 零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符 第二章 JavaScript流程控制语句 2.1 循 ...
- SpringMVC入门案例及请求流程图（关于处理器或视图解析器或处理器映射器等的初步配置）
SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...
- SpringMvc核心流程以及入门案例的搭建
1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...
- Struts2第一个入门案例
一.如何获取Struts2,以及Struts2资源包的目录结构的了解 Struts的官方地址为http://struts.apache.org 在他的主页当中,我们可以通过左侧的Apache ...
- MyBatis入门案例、增删改查
一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...
- Hibernate入门案例及增删改查
一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...
- Quartz应用实践入门案例二(基于java工程)
在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...
随机推荐
- MySQL事务及Spring事务管理
事务,是在数据库中用于保证数据正确性的一种机制,涉及到很多概念以及不同的情况,这里做一个总结 相关概念 事务四特性(ACID) 原子性(Atomicity,或称不可分割性):要么全部完成或者全部不完成 ...
- MongoDB学习day08--Mongoose索引、Mongoose内置方法、扩展Mongoose Model的静态方法和实例方法
一.Mongoose索引 索引是对数据库表中一列或多列的值进行排序的一种结构, 可以让我们查询数据库变得更快. MongoDB 的索引几乎与传统的关系型数据库一模一样, 这其中也包括一些基本的查询优化 ...
- 阿里oss上传图片react组件alioss-react，vue组件alioss-vue （不用我先收藏着，后端看下前端处理方法）
1.介绍 最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面. 因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件. 因 ...
- CEF3研究(一)
一.基本概览 C++ WrapperC++Wrapper(包装类)就是将C结构包装C++类. 这是C/C++API转换层通过translator tool自动产生的. 进程 CEF3用多进程运 ...
- 【APUE】孤儿进程与僵死进程
基本概念: 在unix/linux中,正常情况下,子进程是通过父进程创建的,子进程在创建新的进程.子进程的结束和父进程的运行是一个异步过程,即父进程永远无法预测子进程 到底什么时候结束. 当一个 进程 ...
- 机器学习技法总结（五）Adaptive Boosting, AdaBoost-Stump,决策树
上一讲主要利用不同模型计算出来的g.採用aggregation来实现更好的g.假设还没有做出来g.我们能够採用bootstrap的方法来做出一系列的"diversity"的data ...
- Python第五讲
一.冒泡算法 1.将两个变量的值互换 a1 = 123 a2 = 456 #要想将a1与a2的值进行位置互换需要借助一个中间变量(temp) temp = a1#将a1的值赋值给temp(temp=1 ...
- Tomcat和Jetty对WebSocket的支持
公司项目须要,了解了下眼下几种支持WebSocket的框架.曾经用jWebSocket做过一些项目.相对来说.改jWebSocket的源代码略复杂,也不是一天两天能搞定的. 一调研才发现,如今非常多主 ...
- eclipse maven 插件的安装和配置
maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完毕.Maven是 Apache 下的一个项目.眼下最新版本号是 3.0.4.我用的也是这个. 首先去官网下载 Mave ...
- 李洪强iOS开发之录音和播放实现
李洪强iOS开发之录音和播放实现 //首先导入框架后,导入头文件.以下内容为托控件,在storyboard中拖出两个按钮为录音和播放按钮 //创建一个UIViewController在.h文件中写 # ...