简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

DIV绑定鼠标事件，滑动时由下向上展开

php中世界最好的语言
Lepaskan： 2018-05-15 11:14:00
asal
8292 orang telah melayarinya

这次给大家带来DIV绑定鼠标事件，滑动时由下向上展开，DIV绑定鼠标事件，滑动时由下向上展开的注意事项有哪些，下面就是实战案例，一起来看一下。

鼠标浮动时p由下向上缓慢展开效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery响应鼠标实现p由下向上展开</title>
<style type="text/css">
  .big{position:relative; width:234px; height:300px; background:#ccc}
  .show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
 {
  $(".big").hover(function () {
    $(".show").stop(true,true).animate({height:"70px"});
  }, function () {
    $(".show").stop(true,true).animate({height:"0px"});
  });
});
</script>
</head>
<body>
  <!--灰色的p-->
  <p class="big">
    <!--红色的p-->
    <p class="show"></p>
  </p>
</body>
</html>
Salin selepas log masuk

原理：

① 首先红色p是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px。
② 底部定位固定，高度变高的时候就向上扩展了。
③ 使用jQuery的$().animate()动画方法，控制红色p高度变化。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现电子时钟功能步骤详解

Angular5路由传参使用详解

Atas ialah kandungan terperinci DIV绑定鼠标事件，滑动时由下向上展开. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
事件 滑动
sumber：php.cn
Artikel sebelumnya：r.js合并压缩css文件步骤详解 Artikel seterusnya：Webpack打包字体font-awesome步骤详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tatasusunan PHP yang diperoleh daripada parameter URL tidak berkelakuan seperti yang diharapkan Saya mempunyai parameter URL yang mengandungi id kategori dan saya mahu menganggapnya seba...
daripada 2024-04-06 22:09:02
0
1
1428
Pemeriksa Sudoku tidak berfungsi? Bolehkah sesiapa membantu saya mengenal pasti ralat? Saya mencuba segala-galanya pada editor dalam talian tetapi masih mendapat ralat. Tetapi a...
daripada 2024-04-06 21:21:07
0
1
474
MySQL mendapat data daripada berbilang jadual Saya mempunyai jadual eg_design yang mengandungi lajur berikut: dan jadual eg_domains yang...
daripada 2024-04-06 18:42:44
0
2
479
Laravel 8 - Cara mengubah hala /{editable_text} laluan ke /{user} route Saya telah cuba membuat laluan ubah hala untuk membawa saya ke profil pengguna. Laluan uba...
daripada 2024-04-06 17:26:11
0
1
410
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！