js实现div整块向上移动的动画效果

最新推荐文章于 2023-11-15 16:20:45 发布
最新推荐文章于 2023-11-15 16:20:45 发布
阅读量1.2w 收藏 2
点赞数
分类专栏： js学习 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjt321658/article/details/17370855
版权 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		body{
			font: 14px/1.6 "Microsoft YaHei";
			}
			ul, ol {
			list-style: none;
			}
			p{
				padding: 0;
				margin: 0;
			}
			.mt10 {
			    margin-top: 10px;
			}
			.clearfix {
				zoom: 1;
			}
			.clearfix:after {
			content: "";
			height: 0;
			visibility: hidden;
			display: block;
			clear: both;
		}
			.tjshop ul {
					padding: 10px;
					overflow: hidden;
					color: #555;
					font-size: 12px;
					width: 1030px;
				}
				.tjshop ul li {
					width: 227px;
					float: left;
					margin-right: 25px;
				}
			.tjshop ul li .bg {
				background: #f1f7fb;
				padding: 5px 10px 8px 10px;
				overflow: hidden;
			}
		.scrollCon {
			width: 227px;
			height: 78px;
			overflow: hidden;
		}
		
		</style>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script>
			function AutoScroll(wrap){
				var interval=10000;
				var moving;
				wrap.hover(function(){
					clearInterval(moving);
				},function(){
					moving=setInterval(function(){
						var field=wrap.find('div:first');
						var h= field.height();
						field.animate({marginTop:'-'+h+'px'},600,function(){
							field.css('marginTop','10px').appendTo(wrap);
						})
					},interval)
				}).trigger('mouseleave');
			};
			$(document).ready(function(){
				$(".scrollCon").each(function(i){
					AutoScroll($(this));
					});
			});
		</script>
	</head>
	<body>
		<div class="tjshop mt10">
                          <ul>
                          			<li>
			                              <div class="clearfix scrollCon">
								                      <div class="clearfix mt10 bg">
		                                       	  <p>
		                                       	  		<span>
		                                       	  				<a target="_blank" title="" href="http://www.ename.com/auction/domain/18553433">jn0.com</a>
		                                       	  		</span>
		                                       	  	</p>
		                                      	     <p>一口价：3000</p>
		                                       	  <p>剩余时间：交易已结束</p>

最低0.47元/天 解锁文章
飞翔的荷兰人
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery实现DIV其他动画效果的简单实例
10-21
下面小编就为大家带来一篇JQuery实现DIV其他动画效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3如何向上_CSS3 实现div元素向上移动的效果
weixin_42510604的博客
12-23 6888
今天应一个用户的要求，要做一个html页面，而页面中的部份div元素，在鼠标移入时向上移动，鼠标移出时恢复到原来的位置。效果是用纯css3代码来实现的，不使用任合的JS代码。css3实现div向上移动的效果代码html代码：html>/*鼠标移入，向上移动8个像素*/.div:hover{transform:translateY(-8px);}.div{width:100px;heig...
js如何实现列表数据的上移和下移？以及置顶、置底功能
weixin_52099241的博客
06-21 3319
首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
js实现移动的div
老余的博客
09-22 1155
/ 获取div box。// 获取 btn按钮。
js 实现图片向上滚动的平滑动画效果
forever__fish的博客
11-15 689
requestAnimationFrame()：这个方法用于请求浏览器在下一帧渲染之前执行指定的回调函数，可以实现平滑的动画效果。
前端 使用CSS属性，使Div上下左右移动指定像素
吕氏春秋i
08-10 4109
深入理解CSS定位中的偏移
js实现div拖动动画运行轨迹效果代码分享
11-25
这是一款基于js实现的div拖动动画运行轨迹效果源码，是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码。可以选择【记住轨迹】与【不记住轨迹】两种拖动显示模式，从而显示出不同的拖动效果。 运行效果...
JS实现的DIV块来回滚动效果示例
10-20
标题中的“JS实现的DIV块来回滚动效果示例”指的是使用JavaScript编程语言来创建一个HTML元素（通常是`<div>`标签）的动态效果，让这个元素在页面上左右来回滚动。这种效果通常用于吸引用户的注意力或者展示滚动信息...
JS div匀速移动动画与变速移动动画代码实例
10-17
在这个实例中，我们将深入理解如何使用JS实现div的匀速移动动画和变速移动动画。 1. 匀速移动动画 匀速移动动画的实现基于一个基本思想：通过设定一个固定的步长（如`step`），在每次迭代中让元素移动这个固定距离...
JS 实现 Div 向上浮动
weixin_30607659的博客
08-10 1347
Html 及 JS 代码如下： <div id="newsOne" onmouseover="CleartTimeInterVal();" onmouseout="resetInterVal();" style="position: absolute; width: 100px;"> <a href="http://www.baidu.com"...
DIV上下移动
03-19
源码 博文链接：https://helly2115.iteye.com/blog/734165
DIV层上下移动
06-21
DIV层上下移动
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
09-18
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
jquery 在指定位置弹出div框并实现DIV由下向上展开的效果
mituan1234567的专栏
02-25 6674
http://blog.csdn.net/zdw_wym/article/details/11643229 1、功能要求：页面上一个div，默认是隐藏起来的，当点击页面中的a标签后，让这个div在a标签位置显示该div。 2、实现代码：$("#aChooseNumber").click(function () {                 $("#divChooseNumber").cs
JavaScript案例之按钮控制div移动
再中二也会被现实打败
10-09 321
JavaScript案例之按钮控制div移动
（四）jQuery实现元素向上向下滑动效果
北斗星的爱886的博客
06-30 2359
1、slideDown（）方法 slideDown() 方法用于向下滑动元素。 $("button").click(function(){ $("#div").slideDown(); }); 2、slideUp（）方法 slideUp() 方法用于向上滑动元素。 $("button").click(function(){ $("#div").slideUp(); }); 3、slideToggle（）方法 slideToggle() 方法可以在 slideDown() 与 slide
html代码div向上移动,Jquery实现Div上下移动示例
weixin_34749048的博客
06-03 1334
$(this).ready(function() {$(".up").each(function() {$(this).click(function() {var $tr = $(this).parents("li");if ($tr.index() != 0) {$tr.prev().before($tr);}});});var trLength = $(".down").length;$("....
js实现动画，右移、左移，上移，下移，左上角移动等
热门推荐
渐行渐远
06-30 3万+
js实现动画，右移、左移，上移，下移，左上角移动等
css和js两种方式实现div右移1000px动画
MCCLS的博客
02-07 787
css和js两种方式实现div右移1000px动画
点击按钮实现div移动动画
最新发布
02-22
要实现点击按钮实现div移动动画，可以使用JavaScript和CSS来实现。下面是一种实现方式： 1. 首先，在HTML中创建一个按钮和一个需要移动的div元素，并给它们分别设置id属性，例如： ```html <button id="moveButton">Move</button> <div id="movingDiv"></div> ``` 2. 接下来，在CSS中定义移动的动画效果。可以使用CSS的`@keyframes`规则来定义动画的关键帧，然后通过`animation`属性将动画应用到div元素上。例如： ```css @keyframes moveAnimation { 0% { left: 0; } 100% { left: 200px; } } #movingDiv { position: relative; width: 100px; height: 100px; background-color: red; animation: moveAnimation 1s ease-in-out infinite; } ``` 上述代码定义了一个名为`moveAnimation`的动画，从左边距离为0开始，到左边距离为200px结束。然后将该动画应用到id为`movingDiv`的div元素上，设置动画持续时间为1秒，使用ease-in-out缓动函数，并设置动画无限循环。 3. 最后，在JavaScript中添加事件监听器，当按钮被点击时触发移动动画。可以使用`addEventListener`方法来监听按钮的点击事件，并在事件处理函数中修改div元素的样式。例如： ```javascript var moveButton = document.getElementById("moveButton"); var movingDiv = document.getElementById("movingDiv"); moveButton.addEventListener("click", function() { movingDiv.style.animationPlayState = "running"; }); ``` 上述代码获取id为`moveButton`和`movingDiv`的元素，并为按钮添加点击事件监听器。当按钮被点击时，将div元素的`animationPlayState`属性设置为"running"，即开始播放动画。 这样，当点击按钮时，div元素就会开始移动动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值