提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
封装的方法
//方法封装
function animated(element,targetObject,callback,speed){//element 变化的元素 传入目标对象 targetObject callback 回调函数
clearInterval(element.timer)
if(typeof speed !='number'){
speed = Number(speed)
if(isNaN(speed)){
speed = 0
}
}
//遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
element.timer = setInterval(()=>{
let flag = true
for(let key in targetObject){
let current = parseFloat(getStyle(element,key))
let step = 0
//判断传进来的值
if(key=="opacity"){//如果是opacity是使用下面这个
//不需要px作为单位
//目标元素 targetObject[key] 当前的值 Number(getStyle(element,key)) 步长
step = (targetObject[key]*100-current*100)/10 //保证最终达到目标位置
element.style[key] = (current*100+step)/100
}
if(key=="zIndex"){//如果是层高 直接设置
element.style[key] = targetObject[key]
}
if(key!="opacity" && key!="zIndex"){ //height width left top
step = (targetObject[key]-current)/10>0?Math.ceil((targetObject[key]-current)/10):Math.floor((targetObject[key]-current)/10)
element.style[key] = current+step+'px'
}
if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完
flag = false
}
}
if(flag){
clearInterval(element.timer)
//执行对应的callback
if(typeof callback =='function'){//如果你是个函数
//执行这个函数
callback()
}
}
},speed)
//callback是所有的这个函数里面所有的事情做完以后做的事情
}
//获取样式的值
function getStyle(element,attr){ //需要获取样式的对象 样式的名字
// window.getComputedStyle(element,null)[attr]
// element.currentStyle ie的兼容写法
//获取样式对象
var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle
return style[attr]
}
// 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离
function myScoll(){
//如果没有滚动栏
if(window.pageYOffset!=null){
return {"left":window.pageXOffset,"top":window.pageYOffset}
}
//获取top值
let top = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop
//获取left值
let left = document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft
//再返回
return {left,top}
}
提示：以下是本篇文章正文内容，下面案例可供参考
一、双排透明度轮播图
1.要求利用透明度加缓冲动画分上下两排同时轮播
如图
2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
height: 500px;
width: 800px;
border: 1px solid #c0c0c0;
position: absolute;
margin: 100px auto;
left: 100px;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
height: 100%;
width: 100%;
}
ul > li {
height: 100%;
width: 100%;
position: absolute;
font-size: 30px;
text-align: center;
}
li:nth-child(1) {
/*background-color: red;*/
}
li:nth-child(2) {
/*background-color: yellow;*/
}
li:nth-child(3) {
/*background-color: green;*/
}
li:nth-child(4) {
/*background-color: #0094ff;*/
}
li:nth-child(5) {
/*background-color: pink;*/
}
ol {
list-style: none;
width: 100%;
margin-top: 5px;
}
ol > li {
height: 100px;
width: 146px;
margin-left: 8px;
float: left;
text-align: center;
border: 1px solid #999999;
}
ol > li img {
height: 100px;
width: 146px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul id="ul">
<li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<ol id="ol">
<li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ol>
</div>
<script src="./js/animatedPlus.js"></script>
<script>
var ulList = document.querySelectorAll('ul>li')
var olList = document.querySelectorAll('ol>li')
//定时器
//遍历所有的li
for(let li of ulList){
li.style.opacity = 0
}
for(let li of olList){
li.style.opacity = 0.5
}
//将第一张图片全部显示出来
ulList[0].style.opacity = 1
olList[0].style.opacity = 1
let i = 0
let timer
//自动轮播
function autoMove(){
timer = setInterval(()=>{
animated(ulList[i],{'opacity':0},1,40)
animated(olList[i],{'opacity':0.5},1,40)
i++
if(i>ulList.length-1){
i = 0
}
animated(ulList[i],{'opacity':1},1,40)
animated(olList[i],{'opacity':1},1,40)
//ul的li全部透明度为0,显示那个为1
//ul的li全部透明度为0.5,显示那个为1
},2000)
}
autoMove()
document.getElementById('ul').onmouseenter = function(){
clearInterval(timer)
}
document.getElementById('ul').onmouseleave = function(){
autoMove()
}
</script>
</body>
</html>
二、旋转木马轮播图
1.要求
鼠标移入显示出左右箭头
点击左边箭头向左轮播
点击右边箭头向右轮播
2.代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
<script src="./js/animatedPlus.js"></script>
<script>
var jsonData = [
{ // 1
width:400,
top:20,
left:50,
opacity:0.2,
zIndex:2
},
{ // 2
width:600,
top:70,
left:0,
opacity:.80,
zIndex:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{ // 4
width:600,
top:70,
left:600,
opacity:.80,
zIndex:3
},
{ //5
width:400,
top:20,
left:750,
opacity:.20,
zIndex:2
}
];
//渲染到页面
//获取所有li
var liList = Array.from(document.getElementsByTagName("li"))//将他转为数组
//封装为初始方法
function init(){
//给所有li属性
liList.forEach((li,index)=>{
animated(li,jsonData[index])
})
}
init()//调用初始化方法
//移入大盒子显示箭头
//获取大盒子 添加移入移出事件
let warp = document.getElementById('wrap')
//获取箭头
let arrow = document.querySelectorAll("#arrow>a")
let arrowBox = document.querySelector('#arrow')
warp.onmouseenter = function(){
//把盒子的透明度 变为1
arrowBox.style.opacity = 1
}
warp.onmouseleave = function(){
//把盒子的透明度 变为1
arrowBox.style.opacity = 0
}
//获取左右切换箭头添加点击事件
//左
arrow[0].onclick = function(){
jsonData.unshift(jsonData.pop())
init()
}
//右
arrow[1].onclick = function(){
jsonData.push(jsonData.shift())
init()
}
</script>
</body>
</html>
css文件
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
三、点击按钮方块交换位置
1.要求点击按钮div块交换位置且有动画效果
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/animatedPlus.js"></script>
<style>
*{margin: 0;padding: 0;}
button{
height: 20px;
}
#box1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 0;
top: 20px;
}
#box2{
width: 100px;
height: 100px;
background-color: burlywood;
position: absolute;
left: 100px;
top: 120px;
}
a{
position: relative;
}
</style>
</head>
<body>
<button>交换位置</button>
<a href="#">
<div id="box1"></div>
<div id="box2"></div>
</a>
<script>
//获取按钮
let btn = document.querySelector('button')
//给按钮加点击事件
btn.onclick = function(){
//点击事件里面交换位置
//获取两个div 得到两个div的初始位置
let divs = document.getElementsByTagName('div')
let firstPoint = {"left":parseFloat(getStyle(divs[0],"left")),"top":parseFloat(getStyle(divs[0],'top'))}
let lastPoint = {"left":parseFloat(getStyle(divs[1],"left")),"top":parseFloat(getStyle(divs[1],'top'))}
//调用animated方法使用两个div的位置进行交换
animated(divs[0],lastPoint,function(){
animated(divs[1],firstPoint ,function(){
console.log("完成");
})
})
}
</script>
</body>
</html>
四、猴子移动
1.要求
移动轨迹: 在页面上点击某处并拖动鼠标,最后松开, 让猴子在你鼠标滑过的地方移动, 如下图
思路:
-
onmousedown: 记录点击开始
-
onmousemove: 保存移动过程中的每一个点(x, y),(用对象保存 {x:x,y:y}), 用一个数组保存所有点,
-
onmouseup: 让猴子按顺序经过所有点
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pa{
position: absolute;
}
</style>
</head>
<body>
<script src="./js/animateAction.js"></script>
<script>
// 6, 移动轨迹: 在页面上点击某处并拖动鼠标,最后松开, 让猴子在你鼠标滑过的地方移动, 如下图
// 思路: 1, onmousedown: 记录点击开始
// 2, onmousemove: 保存移动过程中的每一个点(x, y),(用对象保存{x:x,y:y}), 用一个数组保存所有点,
// 3, onmouseup: 让猴子按顺序经过所有点
document.onmousedown = function(e){
//初始位置
e=e||window.event
//获取x位置 y位置
var x = e.clientX
var y = e.clientY
//创建元素 img
let img = document.createElement('img')
img.src = "./images/a.png"
img.className = 'pa'
img.style.left = x + 'px'
img.style.top = y + 'px'
//加到body里面
document.body.appendChild(img)
//声明数组
let pointList = []
document.onmousemove = function(e){
//初始位置
e=e||window.event
e.preventDefault()
//获取x位置 y位置 存入对象
let newPoint = new point(e.clientX,e.clientY)
//再进入数组
pointList.push(newPoint)
}
document.onmouseup = function(){
//让猴子按顺序经过所有的点
pointList.forEach(({x,y})=>{//遍历数组
animatedChange(img,{"left":x,"top":y})
})
setTimeout(()=>{
//将图片删除
document.body.removeChild(img)
},2000)
document.onmousemove = null
document.onmouseup = null
}
}
//坐标模板
class point{
constructor(x,y){
this.x = x
this.y = y
}
}
</script>
</body>
</html>
五、js实现全选反选
1.要求
- 点击全选全选选择框
- 点击反选反选选择框
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
全选:<input type="checkbox" id="selectAll">
反选:<input type="checkbox" id="select"><br>
<ul>
<li><input type="checkbox" name="food">1</li>
<li><input type="checkbox" name="food">2</li>
<li><input type="checkbox" name="food">3</li>
<li><input type="checkbox" name="food">4</li>
<li><input type="checkbox" name="food">5</li>
<li><input type="checkbox" name="food">6</li>
</ul>
<script>
//获取选择框
let selectAll = document.getElementById('selectAll')
let select = document.getElementById('select')
let checkboxList = Array.from(document.getElementsByName('food'))
//给选择框加点击事件
selectAll.onclick = function(){
//判断是on还是selected
if(!selectAll.checked){//取消选择
checkboxList.forEach((checkbox)=>{
checkbox.checked = false
})
}else{
checkboxList.forEach((checkbox)=>{
checkbox.checked = true
})
}
}
//给选择框加点击事件
select.onclick = function(){
//取消选择
checkboxList.forEach((checkbox)=>{
if(checkbox.checked){
checkbox.checked = false
}else{
checkbox.checked = true
}
})
}
</script>
</body>
</html>
1165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
