jquery写的slideLeft，slideRight

最新推荐文章于 2023-07-29 18:00:27 发布
最新推荐文章于 2023-07-29 18:00:27 发布
阅读量784 收藏
点赞数
分类专栏： jquery 文章标签： slideLeft slideRight jquery 
<html>    
<head>    
<script type="text/javascript" src="jquery.1.2.6.js"></script>    
<script type="text/javascript">    
    jQuery.fn.slideLeftHide = function( speed, callback ) {    
        this.animate({    
            width : "hide",    
            paddingLeft : "hide",    
            paddingRight : "hide",    
            marginLeft : "hide",    
            marginRight : "hide"    
        }, speed, callback );    
    };    
    jQuery.fn.slideLeftShow = function( speed, callback ) {    
        this.animate({    
            width : "show",    
            paddingLeft : "show",    
            paddingRight : "show",    
            marginLeft : "show",    
            marginRight : "show"    
        }, speed, callback );    
    };    
</script>    
<script type="text/javascript">    
    $(function() {    
        $(".title_bar").slideLeftHide(4000);    
        $(".title_bar").slideLeftShow(4000);    
    });    
</script>    
    
    
</head>    
<body>    
    
    <div class="title_bar">    
    <img src="recruitment.png" border="0"    
             />          
    </div>    
</body>    
</html>

charsBing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery左右图片自动滚动特效
04-07
autoScrollInterval = setInterval(slideRight, 5000); // 每5秒滚动一次 } $('.left-arrow').on('click', function() { clearInterval(autoScrollInterval); slideLeft(); }); $('.right-arrow').on('...
jQuery实现轮播图
10-16
$('.right_btn').click(slideRight); startSlide(); // 开始轮播 }); ``` 以上代码完成了轮播图的基本功能，包括自动切换、手动切换和按钮控制。根据实际需求，可以进一步优化和扩展，例如添加动画效果、添加...
jquery自写插件slideLeft，slideRight
love398146779的专栏
04-02 382
[code="java"] jQuery.fn.slideLeftHide = function( speed, callback ) { this.animate({ width : "hide", paddingLeft : "hide", paddingRight : "hide", marginLeft : "hide", ma...
jQuery自定义slide方向
weixin_30299709的博客
01-03 138
jQuery官方动画库只提供了slide的向下开，向上关，明显不够用嘛。 so,找了找向左向右的代码。 jQuery.fn.extend({ slideRightShow: function() { return this.each(function() { $(this).show('slide', {direction: 'right'}, 1000);...
无涯教程-jQuery - Slide方法函数
最新发布
无涯教程
07-29 721
幻灯片效果可以与show/hide/toggle一起使用。这会将元素滑出视口。
【11】jQuery控制的不同方向的滑动(向左、向右滑动等)
程序猿的博客
09-12 4638
引入jquery.js，复制以下代码，即可运行。<style type="text/css"> .slide { position: relative; height: 200; lightyellow; } .slide .inner { position: absolute; left: 0; bottom: 0; hei
jQuery制作多种弹出层效果特效代码
03-20
animation: 'slideDown', // 动画效果，可选：'fade', 'slideDown', 'slideRight', 'slideLeft' }); }); ``` 除了基本的配置，Drop.js还允许我们添加自定义事件和回调函数，以实现更复杂的交互逻辑。例如，我们...
jQuery Collapse1.1.0折叠插件简单使用
10-19
2. **动画效果**：提供了四种动画效果，包括 `slideRight`（右滑动隐藏）、`slideLeft`（左滑动显示）、`slideUp`（上滑动隐藏）和 `slideDown`（下滑动显示）。这些效果可以通过设置 `style` 参数来选择。例如，当...
多种过渡动画效果幻灯片轮播大图jQuery特效.zip
07-11
在“多种过渡动画效果”中，我们可以理解为这个jQuery特效提供了丰富的切换效果，例如淡入淡出（fadeIn/fadeOut）、滑动左右（slideLeft/slideRight）、缩放（scale）、旋转（rotate）以及更复杂的3D转换效果等。...
slideleft_menu
03-28
主要是一个快捷导航 一开始是隐藏在右侧，页面只有个快捷按钮点击后菜单从右侧平滑飞入效果 然后点击遮罩和快捷导航的div快也能隐藏菜单的效果
jQuery之位置坐标图形相关方法(offset\offset\position\scrollTop\scrollLeft\width\height\innerWidth\outerWidth)
JEFF_xieyuzhi的博客
04-08 328
文章目录offset取值、offset设值position offset取值、offset设值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
slideLeft DIV向左右滑动
a5868530的博客
05-21 718
animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。 注释：使用 "+=" 或 "-=" 来创建相对动画（relative animat...
js实现首尾相连左右循环切换效果
weixin_43443341的博客
10-11 1402
js实现首尾相连左右循环切换效果
jQuery实现slideRightShow()方法
weixin_34034261的博客
12-10 274
//jQueryx 实现slideLeft 和slideRight方法 $.fn.slideLeftHide = function(speed, callback) { this.animate({ width: "hide", paddingLeft: "hide", paddingRight: "hide", margin...
JQuery 从右侧向左滑动
热门推荐
韩世雷 程序员专栏
08-12 3万+
html:
jQuery实现侧边下拉导航栏
zsl15039718107的博客
12-05 1052
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>下拉导航栏</title> <style> a{ text-decoration:none; } .menu{ margin:100px ...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
习惯有你&的博客
01-10 1万+
jQuery 滑动方法可使元素上下滑动。     jQuery slideDown() 方法用于向下滑动元素。     $(selector).slideDown(speed,callback);     可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。     可选的 callback 参数是滑动完成后所执行的函数名称。
写一个图片轮播html
06-06
好的，以下是一个简单的图片轮播的HTML代码： ``` <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> .container { position: relative; width: 100%; height: 400px; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1; } .control { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #fff; cursor: pointer; } .control.active { background-color: #333; } </style> </head> <body> <div class="container"> <div class="slide active"> <img src="https://dummyimage.com/600x400/000/fff" alt="Slide 1"> </div> <div class="slide"> <img src="https://dummyimage.com/600x400/ccc/000" alt="Slide 2"> </div> <div class="slide"> <img src="https://dummyimage.com/600x400/fff/333" alt="Slide 3"> </div> <div class="controls"> <div class="control active"></div> <div class="control"></div> <div class="control"></div> </div> </div> <script> let slides = document.querySelectorAll('.slide'); let controls = document.querySelectorAll('.control'); let currentSlide = 0; function resetSlides() { for (let i = 0; i < slides.length; i++) { slides[i].classList.remove('active'); controls[i].classList.remove('active'); } } function startSlide() { resetSlides(); slides[0].classList.add('active'); controls[0].classList.add('active'); } function slideLeft() { resetSlides(); slides[currentSlide - 1].classList.add('active'); controls[currentSlide - 1].classList.add('active'); currentSlide--; } function slideRight() { resetSlides(); slides[currentSlide + 1].classList.add('active'); controls[currentSlide + 1].classList.add('active'); currentSlide++; } controls.forEach(function(control, index) { control.addEventListener('click', function() { resetSlides(); control.classList.add('active'); slides[index].classList.add('active'); currentSlide = index; }); }); startSlide(); setInterval(function() { if (currentSlide === slides.length - 1) { currentSlide = -1; } slideRight(); }, 5000); </script> </body> </html> ``` 这段代码使用了 CSS 的 `position` 属性和 JavaScript 的 `setInterval` 方法来实现图片轮播。在 HTML 中，我们创建了一个 `div` 元素作为容器，其中包含了若干个 `div` 元素作为轮播的每个图片，每个图片都使用了 `img` 元素来显示图片。同时，我们还创建了控制轮播的小圆点，使用了 JavaScript 来控制图片的切换和小圆点的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值