`

JQuery 使用animate让DIV变化或左右移动

阅读更多
JQuery,利用 animate 让DIV变化或左右移动

<!-- @auther:evenfun@126.com -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
////////////////////////////////////////////////
o = {};
o.speed = 1000;
o.long = function() {
    $(".back").animate({ width:$(window).width() }, o.speed, o.short );
}
o.short = function() {
    $(".back").animate({ width:"100px" }, o.speed, o.long );
}

	
o.left = function() {
	$(".back1").animate({ left:"0px" }, o.speed, o.right );
}
o.right = function() {
	$(".back1").animate({left:$(window).width()-100 }, o.speed, o.left);
}
/////////////////////////////////////
$(document).ready(function() {
	o.long();
	o.right();
	$("#input\\.name").val("evenfun@126.com");
	//$("div").html("evenfun@126.com").html();
	var leftFlag = 0;
	$("#right").click(function(){if($(window).width()-leftFlag>=300) {
			leftFlag+=300;$(".block").animate({left: '+=300'}, "slow");}});

	$("#left").click(function(){if(leftFlag>=300) {leftFlag-=300; 
			$(".block").animate({left: '-=300'}, "slow");}});
});
</script>
<style>
body{margin:0 0 0 0;}
.back{ width:100px; background:red; }
.back1{ position:absolute; background:red; }
.block{ position:absolute; background:red; }
</style>
<input id="input.name" type="text" value="test" />
<div class='back'>宽度自动变化</div><br />
<button id="left">««左移««</button>
<button id="right">»»右移»»</button>><br />
<div class="block">手动左右移</div>
<div id="abc" style="border:dotted 2px black;"> </div>
<div class='back1'>自动左右移</div>
  • 大小: 31.3 KB
2
0
分享到:
评论
2 楼 CHENYINGDAN 2014-09-03  
有用
1 楼 popo001 2014-05-06  
好,不错,正用得上啊。机耕支持一下。

相关推荐

    Jquery的animate实例

    比如,我们可以让一个div元素从屏幕左边滑入,然后在一段时间后淡出: ```javascript $('#monster').animate({ left: '0', opacity: 1 }, 1000, 'easeIn', function() { setTimeout(function() { $('#...

    jQuery实现将div的滚动条滚动到指定位置

    要实现将div的滚动条滚动到指定位置,我们可以使用jQuery的`animate()`方法。`animate()`方法允许我们创建平滑的动画效果,包括改变滚动位置。下面是一个简单的示例代码: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;...

    jquery使用div实现滚动条效果

    本篇文章将详细讲解如何利用jQuery实现一个div元素的滚动条效果,以及涉及到的相关知识点。 首先,我们需要理解滚动条的基本概念。滚动条是当内容超出容器显示范围时出现的一种用户界面元素,允许用户查看或浏览不...

    移动div(jquery)

    使用jQuery进行div移动,首先需要引入jQuery库。这通常在HTML文件的`&lt;head&gt;`部分添加如下代码: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ``` 接下来,我们可以编写...

    Jquery跟随滚动条移动的div动画效果

    "Jquery跟随滚动条移动的div动画效果"就是一个典型的例子,它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效,而且这个div在移动过程中保持平滑,避免了闪烁现象,提升了用户体验。 首先,...

    jQuery网站新闻公告自动左右滚动切换代码

    这些函数可能使用jQuery的`.animate()`方法来创建平滑的滚动动画,改变容器的`left`或`right`属性,模拟内容的滚动。同时,可以设置定时器实现自动滚动效果,如每隔一段时间自动向左或向右滚动一个公告项。 为了使...

    jquery实现图片的左右滚动

    总的来说,这个项目展示了如何使用jQuery实现一个基础的图片左右滚动功能,通过HTML布局、CSS样式和jQuery动画相结合,为网页增添动态元素。这个简单的实例可以作为学习jQuery动画和DOM操作的起点,为进一步的前端...

    jQuery左右滚动。

    标题中的“jQuery左右滚动”指的是使用JavaScript库jQuery实现的一种页面元素水平滚动的特效。这种特效常见于新闻资讯网站、产品展示区域或者轮播图组件,可以让用户方便地浏览横向排列的多个项目。 在jQuery中,...

    jquery animate分页按钮.zip

    《jQuery Animate分页按钮详解及其应用》 在网页开发中,用户界面的交互性是提升用户体验的关键因素之一。jQuery Animate分页按钮是一种巧妙的交互设计,它通过动画效果增强了分页功能的视觉吸引力,使得用户在浏览...

    jquery使用animate方法实现控制元素移动

    本文实例讲述了jquery使用animate方法实现控制元素移动。分享给大家供大家参考。具体分析如下: 通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute! &lt;!DOCTYPE ...

    jquery特效DIV层跟随页面向下滚动

    标题中的"jquery特效DIV层跟随页面向下滚动"指的是在网页设计中使用jQuery库实现的一种交互效果。当用户滚动页面时,一个特定的div元素(通常包含重要的信息或导航)会固定在屏幕的一侧,保持可见,即使用户滚动页面...

    jQuery左右图片自动滚动特效.zip

    5. **实现动画**:通过`animate()`方法创建平滑的滚动动画,调整图片容器的`left`或`transform`属性,实现图片的左右移动。 6. **判断条件**:为了保证在图片数量不足时停止自动滚动,代码会检查图片的数量。如果...

    jQuery箭头控制图文左右滚动代码

    在本文中,我们将深入探讨如何使用jQuery和CSS来实现箭头控制的图文左右滚动效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。结合CSS,我们可以创建出动态且用户友好的网页...

    免费jquery animate小用例

    在这个"免费jquery animate小用例"中,我们将深入探讨`animate()`的使用方法及其背后的原理。 `animate()`函数允许开发者自定义元素的各种CSS属性(如宽度、高度、位置等)的变化过程,从而实现丰富的动态效果。...

    jquery图片左右滚动按钮控制图片左右滚动效果代码

    本主题聚焦于"jquery图片左右滚动按钮控制图片左右滚动效果代码",这是一种常见的网页交互设计,常见于产品展示或图片轮播场景。通过使用jQuery,我们可以实现用户点击左右按钮来平滑地滚动图片,提升用户体验。 ...

    jquery标签左右滚动内容

    接着,使用jQuery的`animate()`方法来改变容器的`scrollLeft`属性,实现内容的平滑滚动。 ```html &lt;div id="scrollContent"&gt; &lt;div class="contentItem"&gt;内容1&lt;/div&gt; &lt;div class="contentItem"&gt;内容2&lt;/div&gt; &lt;!-- ...

    jquery animate

    jquery中的动画,可产生div在页面中的移动动画,同时div内的文本也可以完成放大的效果

    jquery实现图片左右滚动

    本文将深入探讨如何使用 jQuery 实现图片左右连续滚动的效果,这对于创建动态展示图片的网站或应用非常实用。 一、jQuery 基础 在了解如何实现图片滚动之前,首先需要对 jQuery 有一定的基础认识。jQuery 是一个轻...

    jquery+div实现同时滑动切换的图文展示特效插件下载.rar

    4. **动画效果**:在事件触发时,调用jQuery的`.animate()`方法,为当前显示的div添加滑出动画,同时为下一个div添加滑入动画。这可以通过改变div的位置或透明度来实现。 5. **状态管理**:维护当前显示的div索引,...

Global site tag (gtag.js) - Google Analytics