1. Angel follows the mouse results
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { margin: 0; padding: 0; height: 5000px; background-image: linear-gradient(0deg, purple, yellowgreen); } #box { position: fixed; left: 0; top: 0; } </style> </head> <body> <img src = "./ ImagesRF Royalty Free / angel.gif" alt = "little angel" the above mentioned id = "Box"> <Script> // get little angel, because he has to move var Box = document.querySelector ( "# Box " ); // Get body due to the binding event var body = document.querySelector (" body " ); body.addEventListener ( " mouseMove ", function (event) { // Get the mouse coordinate values, according to the visual browser mouse region acquiring coordinate values var X = event.clientX; var Y = event.clientY; // the console.log (X, Y); // the coordinate values assigned to the top left angel style. box.style.left = x + "px"; box.style.top Y + = "PX" ; }); // Summary: // 1. Find element // 2 binding event, the addEventListener // 3. event object, the mouse acquired coordinate values // 4. pattern fixedly positioned // 5 . style style attribute modification </ Script> </ body> </ HTML>
effect:
2.Tab bar to switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrapper{
width: 100px;
height: 475px;
/* margin: 0 auto; */
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li{
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
{.main .products
a float : left;
the display: none;
}
.products {.main.selected
the display: Block;
}
.tab li.active {
border - Color: Red;
border -bottom: 0 ;
}
</ style>
< / head>
<body>
<div class = "wrapper">
<-! part of the tab bar tab ->
<ul class = "the tab">
<-! custom attributes to each li add an index value, for purposes of switching the corresponding partition ->
<Data Li-index = "0" class = "Item Active-Tab"> international big </ Li>
<Data-index = Li ". 1" class = "Item-Tab"> national makeup brand </ li>
<li data-index="2" class="tab-item">清洁用品</li>
<li data-index = "3" class = "tab-item"> For Men </ Li>
</ UL>
<-! Tab field content portion ->
<div class="products">
<div class="main selected">
<a href="###"><img src="images/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="images/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="images/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="images/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
window.addEventListener("Load", function () {
// 1. Find element
// All find all elements
var TabItems = document.querySelectorAll ( 'Tab-Item.' );
var MAINS = document.querySelectorAll ( 'main.' );
// 2. Add an event, involving a plurality of elements, so we need to add to traverse
for ( var I = 0; I <tabItems.length; I ++ ) {
// 2.1 is added to all the elements into mouse events
tabItems [i] .addEventListener ( " mouseOver ", function () {
// 3.1 switching tab
// 3.1.1 exclude all
for ( var I = 0; I <tabItems.length; I ++ ) {
// 1.1 put all active class name of the first tab removed
TabItems [I] .classList.remove ( 'active' );
}
// 3.1.2 currently established, is added to the active elements of the current class name clicked
the this .classList.add ( "active" );
// 3.2 handover product
// 3.2.1 switching all goods class name
for ( var I = 0; I <mains.length; I ++ ) {
// out of the class name, hide all boxes
MAINS [I] .classList.remove ( "Selected" );
}
/ / 3.2.2 establish a, the tabs and how trade association
// 1 for custom tag index values stored in the current li
var index = the this .dataset.index;
the console.log (index);
//The index value is added to the first partition of several commodities selected class name, class name added boxes may be displayed
MAINS [index] .classList.add ( "selected" );
})
}
})
</ Script>
</ body>
</ html>
effect:
3. accordion effect
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
/* 去掉li标签自带的样式 点 */
ul {
list-style: none;
}
.wrap {
width: 1000px;
margin: 50px auto;
}
.slider {
width: 1000px;
height: 400px;
border: 1px solid red;
overflow: hidden;
}
.slider li {
width: 200px;
height: 400px;
float: left;
cursor: pointer;
/* 过渡属性 */
transition: all .4s;
}
</style>
<script>
/*
需求：
1.动态的给所有的li，添加背景图片
2.鼠标移入，让当前变宽，让其他变窄
3.鼠标移入，恢复原状
*/
// 浏览器加载事件 当浏览器资源加载完毕后自动执行。
window.addEventListener("load", function () {
// 查找元素 所有li标签 伪数组
var lis = document.querySelectorAll(".slider li");
// for循环遍历 让所有li标签都可以作用到
for (var i = 0; i < lis.length; i++) {
// 给每一个li标签的绑定一个鼠标移入的事件
lis[i].addEventListener("mouseover", function () {
// 排他事件 1.1 排除其他
for (var i = 0; i < lis.length; i++) {
// 让li标签的宽度变成50像素
lis[i].style.width = (1000 - 800) / 4 + "px";
}
// 排他事件 1.2 确立当前 鼠标移入的那一个li标签变成800像素
this.style.width = 800 + "px";
})
// 给li标签添加一个鼠标移出的事件
lis[i].addEventListener("mouseout", function () {
// for循环遍历
for (var i = 0; i < lis.length; i++) {
// 当鼠标移出的时候让所有li标签的宽度都变成200像素
lis[i].style.width = 200 + "px";
}
});
}
})
</script>
</head>
<body>
<div class="wrap">
<ul id="slider" class="slider">
<li>
<img src="./images/mi1.jpg" alt="">
</li>
<li>
<img src="./images/mi2.jpg" alt="">
</li>
<li>
<img src="./images/mi3.jpg" alt="">
</li>
<li>
<img src="./images/mi4.jpg" alt="">
</li>
<li>
<img src="./images/mi5.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>
效果：
4.轮播图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.slider{
width: 730px;
height: 454px;
padding: 8px;
border: 1px solid green;
margin: 100px auto;
}
.inner{
position: relative;
overflow: hidden;
height: 454px;
}
.imglist{
width: 700%;
position: absolute;
left: 0;
transition: all .4s;
}
.imglist img{
width: 730px;
}
li {
float: left;
}
.list {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.list i{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
color: #333;
float: left;
font-style: normal;
line-height: 20px;
font-size: 14px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.list i:last-child{
margin-right: 0;
}
.list i.current{
background-color: lightcoral;
color: #fff;
}
.arrow {
position: absolute;
width: 100%;
top: 50%;
margin-top: -30px;
}
.arrow-left,
.arrow-right{
width: 30px;
height: 60px;
position: absolute;
font: 20px/60px "consolas";
color: #fff;
background-color: rgba(0,0,0, .3);
text-align: center;
cursor: pointer;
}
.arrow-right{
right: 0;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<div class="inner" id="inner">
<ul class="imglist" id="imglist">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
</ul>
<div class="list">
<i class="current">1</i>
<i>2</i>
<i>3</i>
</div>
<dv class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</dv>
</div>
</div>
<script>
/*
需求：
1 点击序号
能切换序号
能切换图片
2 点击左箭头
能切换序号
能切换图片
3 点击右箭头
能切换序号
能切换图片
4 自动播放功能
能切换序号
能切换图片
5 鼠标移入停止播放功能
6 鼠标移出还原自动播放功能
*/
// 1 查找元素
// 查找全部小圆点
var dots = document.querySelectorAll('.list i');
var arrowLeft = document.querySelector(".arrow-left");
var arrowRight = document.querySelector(".arrow-right");
var slider = document.querySelector(".slider");
var imgList = document.querySelector(".imgList");
var inner = document.querySelector(".inner");
var styleObj = window.getComputedStyle(inner);
var imgWidth = parseInt(styleObj.width);
console.log(imgWidth);
var index = 0;
//点击序号切换序号和图片
for(var i=0; i<dots.length; i++){
// 把当前循环的i直接设置到元素的data-index自定义属性上
dots[i].dataset.index = i;
dots[i].addEventListener("click", function(){
// 1.1能切换序号 - 排他思想
// 排除所有
for(var i=0; i<dots.length; i++){
dots[i].classList.remove('current');
}
// 确立当前
this.classList.add('current');
// 切换图片
// 获取当前点击小圆点的自定义索引值
var index = this.dataset.index;
// 计算ul要移动数据，赋值给left
imglist.style.left = -1 * imgWidth * index + "px";
console.log(imglist.style.left);
});
}
/*
点击左箭头切换序号和图片
*/
arrowLeft.addEventListener('click', function(){
// 注意索引值的边界，如果索引值为0，点击的时候变成最后圆点的索引值
if(index===0){
index = dots.length -1;
}else {
// 其他情况下索引值减少
index--;
}
console.log(index);
// 1.1 能切换序号
for(var i=0; i<dots.length; i++){
dots[i].classList.remove('current');
}
// 根据索引值，给第几个小圆点添加样式
dots[index].classList.add('current');
// 1.2 能切换图片
imglist.style.left = -1 * imgWidth * index + 'px';
});
function rightMove(){
// index边界判断
if(index === dots.length -1){
index = 0;
}else{
index++;
}
// 小圆点处理
for(var i=0; i<dots.length; i++){
dots[i].classList.remove('current');
}
dots[index].classList.add('current');
// 换图片
imglist.style.left = -1 * imgWidth * index + "px";
}
arrowRight.addEventListener('click', rightMove);
// 自动播放的功能
var timer = setInterval(rightMove, 2000);
// 鼠标移入分区，清除定时器
slider.addEventListener("mouseover", function(){
clearInterval(timer);
});
// 鼠标移出分区，继续启动定时器
slider.addEventListener('mouseout', function(){
timer = setInterval(rightMove, 2000);
})
</script>
</body>
</html>
效果：
