一次性定时器、左右焦点轮播图

qq_53587164

于 2022-04-29 21:27:25 发布

阅读量111

点赞数

文章标签： javascript linq html

本文链接：https://blog.youkuaiyun.com/qq_53587164/article/details/124504529

版权

一次性定时器

window.οnlοad=function(){

//一次性定时器

var timerd=window.setTimeout(function ( {

alert("您好");

},1000) ;

//点击这个按钮,停止这个一次性的定时器

docunent.getElementById("btn").οnclick=function () {

clearTimeout(timeId);

};

</script>

</head>

<body>

</body>

点击按钮设置div背景色渐变

<style>

div{

width: 300px;

height: 200px;

background-color: hotpink;

}

</ style>

my$("btn").onclick = function () {

var opacity = 10;

var timeId = setInterval(function () {

//透明化了

opacity--;

if (opacity <= 0) {

clearInterval(timeId);清理定时器 }

//设置div的透明度

my$("dv").style.opacity = opacity / 10;

}, 200);

};

</script>

div变宽

<style>*{

margin: 0;padding: 0;

}

div{

width: 200px;height: 150px;

background-color: red;}

</style></ head><body>

my$("btn" ).onclick = function () {

var width = 200;

var timeid = setInterval(function () {

width+=10;

if(width==800){

clearIntervai(timeId);|}

my$( "dv" ).style.width=width+"px" }，20);

}

动画函数animate封装

<!DOCTYPE html><html lang="en">

<head>

<title>title</title>

<style>

* {

margin: 0;

padding: 0;

}

input {

margin-top: 20px;

}

div {

margin-top: 30px;

width: 200px;

height: 100px;

background-color: pink;

position: absolute;

}

</style></head>

<body>

//点击第一个按钮，移动到400px my$("btn1").onclick = function () {

animate(my$("dv"), 400);

};

//点击第二个按钮，移动到800px my$("btn2").onclick = function () {

animate(my$("dv"), 800);

};

//动画函数animate封装

function animate(element, target) {

//先清理定时器 clearInterval(element.timeId);

//一会要清理定时器（只产生一个定时器） element.timeId = setInterval(function () {

//获取div当前位置

var current = element.offsetLeft; //数字类型，没有px

//div每移动多少像素---步数

var step = 10;

step = current < target ? step : -step;

//每次移动后的距离 current += step;

//判断当前移动后的位置，是否达到目标位置

if (Math.abs(target - current) > Math.abs(step)) {

element.style.left = current + "px";

} else {

//清理定时器 clearInterval(element.timeId);

element.style.left = target + "px";

}

}, 20);

}

</script></body>

</html>

左右焦点轮播图

<style>

* {

margin: 0;

padding: 0;

}

img {

vertical-align: top;

}

.box {

width: 730px;

height: 454px;

margin: 100px auto;

padding: 5px;

border: 1px solid #ccc;

background-color: #cccccc;

}

.inner {

width: 730px;

height: 454px;

background-color: aliceblue;

overflow: hidden;

position: relative;

}

.inner ul {

width: 1000%;

position: absolute;

top: 0;

left: 0;

z-index: 1;

}

.inner li {

float: left;

list-style: none;

}

.focused {

position: relative;

width: 100%;

height: 100%;

}

#left,

#right {

z-index: 1;

position: absolute;

width: 35px;

height: 60px;

background-color: red;

top: 50%;

margin-top: -30px;

background: rgba(0, 0, 0, .3);

color: #fff;

line-height: 60px;

text-align: center;

font-size: 25px;

cursor: pointer;

}

#right {

right: 0;

}

</style>

<ul>

</ul>

</div>

//获取最外面的div

var box = my$("box");

//获取相框

var inner = box.children[0];

//获取相框宽度

var imgWidth = inner.offsetWidth;

//获取ul

var ulObj = inner.children[0];

//获取span

var spanObjs = inner.children[1].children;

//获取两边焦点div

var focused = inner.children[2];

//显示和隐藏左右焦点

box.onmouseover = function () {

focused.style.display = "block";

};

box.onmouseout = function () {

focused.style.display = "none";

};

var index = 0;

//为左右焦点注册点击事件

my$("right").onclick = function () {

if (index < ulObj.children.length - 1) {

index++;

animate(ulObj, -index * imgWidth);

}

};

my$("left").onclick = function () {

if (index > 0) {

index--;

animate(ulObj, -index * imgWidth);

}

};

</script>

无缝的轮播图

<!DOCTYPE html><html>

<style>

* {

margin: 0;

padding: 0;

}

ul {

list-style: none;

}

img {

vertical-align: top;

}

/*取消图片底部3像素距离*/

.box {

width: 300px;

height: 200px;

margin: 100px auto;

background-color: pink;

border: 1px solid red;

position: relative;

overflow: hidden;

}

.box ul li {

float: left;

}

.box ul {

width: 1500px;

position: absolute;

left: 0;

top: 0;

}

</style></head>

<body>

<ul>

</ul>

</div>

var current = 0;//只声明了一次

function f1() {

//获取ul里面的子元素

var ulObj = my$("screen").children[0];

//从当前位置每一次向左移动10px current -= 10;

//判断当前位置超过-1200,就回到0的位置

if (current < -1200) {

ulObj.style.left = 0 + "px";

} else {

ulObj.style.left = current + "px";

}

var timeId = setInterval(f1, 30)

my$("screen").onmouseover = function () {

clearInterval(timeId);

};

my$("screen").onmouseout = function () {

timeId = setInterval(f1, 30)

};

</script>

</body>

</html>

用offset(位移)系列获取元素尺寸(无论样式是设置在属性中还是标签中都可以获取)

offsetWidth：获取元素的宽

offsetHeight：获取元素的高

offsetLeft：就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离

offsetTop：就是这个元素上边框外，到自己的offsetParent对象的上边框内的距离

offsetParent：获取距离当前元素最近的定位(position不等于static)父元素，如果没有定位父元素此时是body

offsetParent：

当元素自身有fixed定位时，生成的绝对定位元素相对于浏览器窗口进行定位，此时没有定位父级

元素自身有fixed定位，offsetParent的结果为null

元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>

元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素

<body>元素的parentNode是null（document.body.offsetParent;//null）

offsetWidth/Height：

offsetWidth = width+padding+border

offsetHeight = height+padding+border

举例1：

举例2：

案例3：

案例4：

补充：1.直接通过document获取元素

2.图片跟随鼠标移动（案例）——有bug，先了解一下两个属性