jQuery slider Content(左右控制移动)- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery slider Content(左右控制移动)

Javascript: JGrid中拖动改变列宽的脚本原型; javascript 兼容FF的onmouseenter和onmouseleave的代码; js树形控件脚本代码; javascript+xml技术实现分页浏览; js可拖动的后台界面; javascript 单选框，多选框美化代码; javascript之可拖动的iframe效果代码; js 文本框里粘贴一个图片url并显示; JavaScript国旗变换效果代码; jquery之Document元素选择器篇; 开发跨浏览器的JavaScript方法说明; javascript过滤危险脚本方法; JQUERY THICKBOX弹出层插件; IE浏览器PNG图片透明效果代码; 多浏览器兼容的动态加载 JavaScript 与 CSS; javascript实现的仿腾讯QQ窗口抖动效果代码; SyntaxHighlighter代码加色使用方法; 用JavaScrpt实现文件夹简单轻松加密的实现方法图文; 利用Ext Js生成动态树实例代码; javascript批量检查当图片不存在时则显示默认图片的代码

No. « ‹ 210 211 212 213 › »

技术文章搜索

关键字

Javascript 中的 jQuery slider Content(左右控制移动)

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 227 ::

收藏到网摘: n/a

[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面] JQuery的ajax基础上的超强GridView展示

jQuery slider Content(左右控制移动)实现代码，大家可以参考下。

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

点击运行可以看到效果:

<script type="text/javascript" src="/upload/tech/20091012/20091012100716_6ea9ab1baa0efb9e19094440c317e21b.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.

[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面] JQuery的ajax基础上的超强GridView展示

评论 (0) All