JQuery 从右侧向左滑动

最新推荐文章于 2021-08-11 13:37:58 发布

原创最新推荐文章于 2021-08-11 13:37:58 发布 · 3w 阅读

1 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

13 篇文章

订阅专栏

JQuery

8 篇文章

订阅专栏

本文介绍了如何通过HTML元素的点击事件触发jQuery代码实现页面元素的滑动效果，具体展示了使用jQuery操作DOM节点来动态调整元素位置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html: 点击 id 为 bookmark 的 div 时触发事件

<div id="bookmarak" class="bookmarak"><hr><hr><hr></div>

css:

.bookmarak {
float: right;
width: 38px;
height: 38px;
border: 2px solid #445c10;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
}

JQ:

引入jq

 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-2.0.3.min.js"></script>

jq代码：

<script type="text/javascript">
	$(document).ready(function(){
		$("#bookmarak").click(function(){
			//alert($(document.body).outerHeight(true));
			$("#page-height").css({height:$(document.body).outerHeight(true)})    		
			$("#category").animate({"left":50},500);		
		});
	});	
	$(document).ready(function(){
		$("#bookmarak-two").click(function(){
			$("#category").animate({"left":480},500);    
		});
	});	
	
	</script>

要滑动的 div html 代码：

<div id="category" style="left: 480px;">
                
                	<div class="category-top">
                        <span class="category-top-left">Category</span>
                        <div id="bookmarak-two" class="category-top-right"> 
                            <div class="triangle-left"></div>
                        </div>
                        <div class="clear-both"></div>
                    </div>
                    
					<div class="menu-ems-navbar-container"><ul id="menu-ems-navbar" class="nav-category"><li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-183"><a target="_blank" href="http://localhost">EMS Tracking Forum</a></li>
</ul></div>                </div>

css:

#category{
	position:absolute;
	background:#cdd7b2;
	z-index:10;
	width:430px;
	left:480px;
	opacity: 0.95;
	height:100%;
}