JS 完成书签滑动动画

最新推荐文章于 2023-01-11 13:48:11 发布

原创最新推荐文章于 2023-01-11 13:48:11 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #servlet

本文展示了如何利用JavaScript和jQuery实现书签式的滑动动画效果。通过hover事件，当鼠标经过div元素时，元素会从左侧滑入，移开时则滑出。示例代码包括HTML结构、CSS样式以及jQuery实现的动画效果。

使用代码前请先引入您的js文件

示例代码：

<!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/jquery-3.6.0.min.js"></script>

<style>

* {

padding: 0;

margin: 0;

}

div {

position: absolute;

left: -90px;

text-align: center;

width: 100px;

height: 30px;

line-height: 30px;

}

div:nth-child(1) {

background-color: red;

position: absolute;

top: 0;

}

div:nth-child(2) {

background-color: blue;

position: absolute;

top: 30px;

}

div:nth-child(3) {

background-color: blueviolet;

position: absolute;

top: 60px;

}

div:nth-child(4) {

background-color: green;

position: absolute;

top: 90px;

}

div:nth-child(5) {

background-color: pink;

position: absolute;

top: 120px;

}

div:nth-child(6) {

background-color: yellow;

position: absolute;

top: 150px;

}

div:nth-child(7) {

background-color: red;

position: absolute;

top: 180px;

}

</style>

</head>

<body>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

</body>

<script>

$(function() {

$("div").hover(function() {

$(this).animate({

"left": "0"

})

}, function() {

//$(this).stop(true); //停止上一个动画

$(this).animate({

"left": "-90px"

})

})

})

</script>

</html>