`

jquery自写插件slideLeft，slideRight

 
阅读更多 
<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>
分享到：
| 微信公众平台
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery图像展示插件Strip

    **jQuery图像展示插件Strip详解** jQuery Strip是一个强大的图像展示插件，专为网页设计师和开发者设计，用于创建美观、动态且用户友好的图片滑动展示。它利用jQuery库的强大功能，提供了一系列丰富的功能和自定义...

    jquery 左右滚动图片效果

    接着，我们实现 `slideLeft` 和 `slideRight` 函数。这两个函数会改变图片的 `display` 属性，使图片按照指定方向滚动。同时，我们需要处理边界情况，例如当到达最后一张图片时，向左滑动应显示第一张图片，反之亦然...

    基于jQuery的左右移动图片代码

    $('#rightArrow').click(slideRight); }); ``` 在上述代码中，我们通过`.hide()`隐藏所有图片，然后使用`.eq(index).fadeIn()`方法让指定索引的图片渐显。`#leftArrow`和`#rightArrow`是控制左右滑动的按钮，点击...

    jquery左右滑动

    在这个"左右滑动"插件中，可能包含了一个或多个方法，如`slideLeft()`和`slideRight()`，用于控制元素的滑动方向。 `index.html`是项目的主入口文件，它包含了HTML结构和必要的JavaScript引用。HTML部分可能包含一...

    jquery-steps demo

    **jQuery Steps插件详解** `jQuery Steps`是一个强大的JavaScript库，用于创建美观、交互式的多步骤表单和向导。这个插件使得开发者能够轻松地将复杂的数据输入过程转化为易于理解且用户友好的多步流程。在“jquery...

    模仿jquery.SuperSlide整合 web动画集合

    【jQuery.SuperSlide】是一个基于jQuery的插件，主要用于创建丰富的Web动画效果，如轮播图（banner）、幻灯片切换、图片上下滚动以及文字滑动等。这个插件为网页设计师提供了简单易用的API，帮助他们快速实现动态...

    jquery向左向右无缝滚动

    function slideRight() { $('.slider').animate({scrollLeft: '+=width'}, duration); } ``` 5. **无限循环** 为了实现无缝效果，可以在容器的末尾复制第一个`&lt;li&gt;`元素，并在滚动到最后一张图片时，立即切换滚动...

    Jquery实现无缝隙上下左右滚动，超简便代码

    2. **动画方法（Animation Methods）**：jQuery的核心动画方法包括`slideUp()`, `slideDown()`, `slideLeft()`, 和 `slideRight()`，它们分别用于元素的向上、向下、向左、向右滑动。此外，`fadeIn()`, `fadeOut()`,...

    jquery steps Demo

    **jQuery Steps插件详解** `jQuery Steps`是一个高效且功能丰富的表单向导插件，旨在帮助开发者将复杂的信息或步骤流程转化为清晰、有条理的分步视图。通过这个插件，用户可以轻松地将长表单或一系列操作步骤拆分为...

    前端项目-jquery-steps.zip

    【前端项目-jquery-steps.zip】是一个包含前端开发中使用的jQuery插件——jQuery Steps的源码包。这个插件主要用于创建功能丰富的向导或步骤式界面，为用户提供一种引导性的交互体验。它不仅具备基本的步骤导航功能...

    jQuery Collapse1.1.0折叠插件简单使用

    2. **动画效果**：提供了四种动画效果，包括 `slideRight`（右滑动隐藏）、`slideLeft`（左滑动显示）、`slideUp`（上滑动隐藏）和 `slideDown`（下滑动显示）。这些效果可以通过设置 `style` 参数来选择。例如，当...

    jq横向滑动排版效果.zip

    `slideLeft`和`slideRight`函数分别用于向左和向右滑动，使用`animate`方法平滑地改变容器的`left`属性。最后，我们为页面上的左右箭头按钮添加了点击事件监听器，触发相应的滑动操作。 此外，还可以添加自动滑动...

    多种过渡动画效果幻灯片轮播大图jQuery特效.zip

    在“多种过渡动画效果”中，我们可以理解为这个jQuery特效提供了丰富的切换效果，例如淡入淡出（fadeIn/fadeOut）、滑动左右（slideLeft/slideRight）、缩放（scale）、旋转（rotate）以及更复杂的3D转换效果等。...

    jQuery步骤组件

    jQuery步骤组件是一种基于jQuery库的前端开发工具，用于创建引人入胜的多步骤表单或向导式界面。在本案例中，我们使用的jQuery版本是1.10.2，因为1.8.3可能存在与该组件不兼容的问题。确保使用正确的jQuery版本对于...

    jquery多图向左滚动效果

    在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得复杂的交互效果变得简单易行。本篇文章将详细讲解如何利用jQuery实现一个多图向左滚动的效果，以及涉及到的相关技术点...

    jquery按钮控制响应式图片滚动代码.rar

    例如，`slideLeft()`和`slideRight()`函数可以实现图片向左或向右平滑滚动。此外，为了实现响应式，JavaScript可能还需要检测窗口的resize事件，以在屏幕尺寸改变时调整图片布局。 总的来说，这个项目展示了如何...

    jQuery发展历程时间轴代码

    3. `slideRight()`: 控制时间轴向右滑动，展示更晚的事件。 4. `renderEvent(eventData)`: 渲染单个事件到时间轴上，可能包括日期、描述和相关图片等信息。 5. `loadEvents(data)`: 从数据源（可能是JSON对象）加载...

    html精美轮播图，支持上下左右滚动.rar

    在轮播图中，jQuery的`slideUp`和`slideDown`方法可能被用来实现上下滚动效果，而`slideLeft`和`slideRight`则可能用于左右滚动。这些方法可以配合计时器实现自动播放，同时提供暂停、继续、上一张、下一张等控制...

    jQuery左右图片自动滚动特效

    autoScrollInterval = setInterval(slideRight, 5000); // 每5秒滚动一次 } $('.left-arrow').on('click', function() { clearInterval(autoScrollInterval); slideLeft(); }); $('.right-arrow').on('...

    jquery css3判断鼠标进入图片的方向滑动特效

    .slideright { transform: translateX(10px); } .slidebottom { transform: translateY(10px); } .slidetop { transform: translateY(-10px); } ``` 以上就是利用jQuery和CSS3实现“鼠标进入图片的方向滑动特效”的...

Magicbox
Global site tag (gtag.js) - Google Analytics