jQuery 事件实现滑动示例

最新推荐文章于 2024-07-30 03:35:30 发布
最新推荐文章于 2024-07-30 03:35:30 发布
阅读量800 收藏 1
点赞数
文章标签： jquery html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46813809/article/details/120476889
版权

mouseenter和mouseleave事件实现滑动

<style>
    .dj,
    .xihua {
        width: 600px;
        height: 60px;
        margin: 0 auto;
        background-color: rgba(247, 250, 65, 0.212);
        text-align: center;
        padding: 5px;
        border: 1px solid rgb(107, 107, 107);
        line-height: 60px;
    }
    
    .xihua {
        height: 200px;
        line-height: 200px;
        display: none;
    }
</style>

<body>
    <div class="dj" id="x">点击该元素下滑 </div>
    <div class="xihua" id="xi">元素显示完毕</div>
    <script>
        $(function() {
            $("#x").mouseenter(function() {
                $('#xi').slideDown(1000)
            })
            $("#x").mouseleave(function() {
                $('#xi').slideUp(1000)
            })
        })
    </script>
</body>

hover事件实现滑动

<style>
    .dj,
    .xihua {
        width: 600px;
        height: 60px;
        margin: 0 auto;
        background-color: rgba(247, 250, 65, 0.212);
        text-align: center;
        padding: 5px;
        border: 1px solid rgb(107, 107, 107);
        line-height: 60px;
    }
    
    .xihua {
        height: 200px;
        line-height: 200px;
        display: none;
    }
</style>

<body>
    <div class="dj" id="x">点击该元素下滑 </div>
    <div class="xihua" id="xi">元素显示完毕</div>
    <script>
        $(function() {
            $("#x").hover(function() {
                $('#xi').slideDown(1000);
            }, function() {
                $('#xi').slideUp(1000)
            })
        })
    </script>
</body>

或者

<style>
    .dj,
    .xihua {
        width: 600px;
        height: 60px;
        margin: 0 auto;
        background-color: rgba(247, 250, 65, 0.212);
        text-align: center;
        padding: 5px;
        border: 1px solid rgb(107, 107, 107);
        line-height: 60px;
    }
    
    .xihua {
        height: 200px;
        line-height: 200px;
        display: none;
    }
</style>

<body>
    <div class="dj" id="x">点击该元素下滑 </div>
    <div class="xihua" id="xi">元素显示完毕</div>
    <script>
        $(function() {
            $("#x").hover(function() {
                $('#xi').slideToggle(1000)
            })
        })
    </script>
</body>
深浅Java
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery滑动效果与事件切换
weixin_46704556的博客
05-06 541
1 上滑动/下滑动/滑动切换 （1） 上滑动/下滑动/滑动切换 语法规范 slideDown([speed, [easing], [fn]]) // 下滑动 slideUp([speed, [easing], [fn]]) // 上滑动 slideToggle([speed, [easing], [fn]]) // 滑动切换 （2） 上滑动/下滑动/滑动切换 参数 参数都可以省略，无动画直接显示 speed：三种预定速度之一的字符串(“slow”, “normal”, or “fast”) 或
JQ鼠标滚轮事件
01-22
JQ鼠标滚轮事件可以响应鼠标滚轮事件,JQ鼠标滚轮事件可以响应鼠标滚轮事件
jquery移动设备上的滑动事件
shidaping的博客
11-19 769
原码： $.fn.onTouchUpOrDown = function(handler_up, handler_down) { var element = $(this); var start_client_y; var end_client_y; element[0].addEventListener('touchstart', function(event
jquery滚轮滑动事件
最新发布
weixin_41031350的博客
07-30 81
jQuery滚轮滑动事件科普 在网页开发中，我们经常需要实现一些交互效果，比如滚动条滚动时触发的事件。jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。本文将介绍如何使用jQuery来实现滚轮滑动事件。 什么是滚轮滑动事件？ 滚轮滑动事件是指当用户使用鼠...
jquery滑动效果及事件切换
qq_45308912的博客
11-22 626
1.滑动效果 还有一个slideToggle方法：它的功能可以让元素动态地上滑或者下滑，如若动画是下滑的，它可以动态切换为上滑，如若动画是上滑的，它可以动态切换为下滑 2.事件切换
jQuery滑动效果和事件切换
weixin_59425810的博客
03-20 413
jQuery滑动效果和事件切换
jQuery实现滑动开关效果
10-15
总的来说，jQuery实现滑动开关效果的关键在于理解DOM操作、CSS样式和事件处理的结合。通过绑定点击事件，改变元素的样式和内容，我们可以创建出具有互动性的滑动开关，为用户提供直观的交互体验。在进行此类开发时，...
jQuery实现图片滑动效果
10-20
总结来说，实现jQuery图片滑动效果的关键在于利用事件处理（如`hover`）和动画功能（可能通过`animate()`方法），结合CSS布局和定位，创建出动态的、吸引用户的视觉体验。这个过程涉及多个技术层面，包括DOM操作、...
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
11-21
本示例将介绍如何利用HTML、CSS和jQuery来实现一个左侧滑动拉伸的导航菜单栏。 首先，HTML结构是基础。在提供的代码中，可以看到`<body>`内有两个主要的`<div>`元素：一个用于头部（`#header`），另一个用于左侧...
jQuery复合事件用法示例
12-10
- 虽然这个示例没有直接使用 jQuery 的动画效果，但可以通过添加其他方法如 `.fadeIn()`, `.slideToggle()` 或 `.animate()` 来实现更复杂的动画效果，例如淡入淡出或滑动展示下拉菜单。 6. **事件与功能说明**： ...
jQuery实现的滑块滑动导航效果示例
10-18
本文主要介绍如何使用jQuery实现一个滑动导航效果，通过这个示例，我们可以学习到如何通过jQuery事件响应和页面元素动态操作技巧来创建一个吸引人的滑动导航菜单。 首先，我们了解到HTML结构是创建网页的基础。在本...
jquery实现鼠标划过事件动画
07-10
jquery代码，利用jquery的mouseenter等实现鼠标经过划过事件
jquery事件
caoxinhui521的博客
11-21 275
$(".menu").slideToggle("fast"); jquery通过使用滑动效果，在显示和隐藏之间切换menu元素 $(selector).slideToggle(speed,callback) 参数 描述 speed 可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。 可能的值： 毫秒 （比如
jquery移动端滑动事件_jQuery移动
10-27 636
jquery移动端滑动事件 jQuery Mobile库的早期版本是在一周前发布的。 考虑到jQuery库在传统桌面Web开发中的流行，我希望大多数Web开发人员会对这个版本感到非常兴奋。 但是jQuery Mobile到底是什么？在哪些情况下会考虑使用它？ 名字叫什么？ 首先，jQuery Mobile的名称有点让人误解：它不是一组核心jQuery库的移动版本，而是一组可以轻松插入页面的...
jQuery手机实现左右滑动事件
热门推荐
果酱的博客
08-03 1万+
随着手机的不断发展，移动端页面已经逐渐成长起来，但对于移动端的手势事件并不是十分完善，并没有左右滑动事件。不过可以通过已存在的事件实现移动端页面的左右滑动事件。移动端相关的事件： touchstart：手势触碰屏幕是触发该事件； touchmove：手指在屏幕中移动时触发该事件； touchend：手指离开屏幕时触发该事件。实现代码如下：//左右滑动翻页 this.$vrTable.on('t
jq 滚动到底事件
卓越追求
12-28 564
$(window).scroll(function () {         var scrollTop = $(this).scrollTop();         var scrollHeight = $(document).height();         var windowHeight = $(this).height();         if (scrollTop + wi
jquery关于页面
学习python
10-16 224
尺寸相关、滚动事件 1、获取和设置元素的尺寸 width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outer...
html jquery 滑动事件监听,jquery监听页面滚动条滚动事件
weixin_36378951的博客
06-09 1974
一、jQuery检测浏览器window滚动条到达底部jQuery获取位置和尺寸相关函数：$(document).height() 获取整个页面的高度$(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的scrollTop() 获取匹配元素相对滚动条顶部的偏移。scrollLeft() 获取...
JQuery的元素尺寸位置和页面滚动事件
spec_yue
01-20 317
获取元素尺寸 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript" s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值