欢迎来到代码驿站！

jquery

当前位置：首页 > 网页前端 > jquery

jQuery slider Content(左右控制移动)

时间：2021-06-10 08:23:13|栏目：jquery|点击：次

不错的效果。好多文字广告可以这样控制。

<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> function animate(dir, step) { var position; position = parseInt($("#content").css("margin-left")); var contentwidth; var sliderwidth; contentwidth = parseInt($("#content").css("width")); sliderwidth = parseInt($("#slider").css("width")); //alert(position); switch (dir) { case "right": position = ((position - step) < (sliderwidth - contentwidth)) ? (sliderwidth - contentwidth) : (position - step); break; case "left": position = ((position + step) > 0) ? 0 : (position + step); break; default: break; }; //alert(position); $("#content").animate( { marginLeft: position + "px" }, 800 ); } $(document).ready(function() { $("#slider").css("width", ($("body").attr("clientWidth") - 80) + "px"); $("#leftA").click(function() { animate("left", 400); }); $("#rightA").click(function() { animate("right", 400); }); }); </script> <style type="text/css"> ul,li{ display:block; } li{ width:150px; float:left; } #content { width: 2030px; margin-left: 0px; } #slider { margin-left: 40px; overflow: hidden; } #leftA { display: block; float: left; left: 10px; top: 5px; position: absolute; background-image: url(); } #rightA { display: block; float: right; right: 10px; top: 5px; position: absolute; background-image: url(); } </style> <body> <div class="title_bar"> <a id="leftA" href="javascript:void(0);" > left </a> <div id="slider"> <div id="content"> <ul id="Ul1" class="tab_nav" style="margin-left: 0px; margin-right: 0px;"> <li id="gaom1" class="menuon" > 基本信息</li> <li id="gaom2" class="menuoff" > 基本信息</li> <li id="gaom3" class="menuoff" > 基本信息</li> <li id="gaom4" class="menuoff" > 基本信息</li> <li id="gaom5" class="menuoff" > 基本信息</li> <li id="gaom6" class="menuoff" > 基本信息</li> <li id="gaom7" class="menuoff" > 基本信息</li> <li id="gaom8" class="menuoff" > 基本信息</li> <li id="gaom9" class="menuoff" > 基本信息</li> <li id="gaom10" class="menuoff" > 基本信息</li> <li id="gaom11" class="menuoff" > 基本信息</li> </ul> </div> </div> <a id="rightA" href="javascript:void(0);" > right</a> </div> </body>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

运行以后，需要刷新下，因为是外部js.

上一篇：jquery 最简单的属性菜单

栏目：jquery

下一篇：jQuery实现购物车计算价格功能的方法

本文标题：jQuery slider Content(左右控制移动)

本文地址：http://www.codeinn.net/misctech/139015.html

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站版权所有