如何调整mootools 滑块中的水平线
我使用mootools创建了两个滑块，
基本上是两个
我的代码如下，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
h3.section {
margin-top: 1em;
}
#test{
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:66px;
height:66px;
float:left;
}
#testing{
background: #D88888;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:66px;
height:66px;
float:left;
}
</style>
<script type="text/javascript" src="mootools-core-1.4-full.js"> </script>
<script type="text/javascript" src="mootools-more-1.4-full.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function() {
var one = new Fx.Slide('test', {mode: 'horizontal'});
var two = new Fx.Slide('testing', {mode: 'horizontal'});
one.hide();
two.hide();
one.slideIn();
one.addEvent('complete', function() {
two.slideIn();
});
});
</script>
</head>
<body>
<div id="test">
</div>
<div id="testing">
</div>
</body>
</html>
任何人都可以帮助我，
I have created two slider using mootools,
basically it is two <div>, i am sliding it in one by one, but the problem is i am not able to set the position of , it comes one below the other, and what i want is both should come in one line, and the slider2 should start from the point were slider1 ends
my code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
h3.section {
margin-top: 1em;
}
#test{
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:66px;
height:66px;
float:left;
}
#testing{
background: #D88888;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width:66px;
height:66px;
float:left;
}
</style>
<script type="text/javascript" src="mootools-core-1.4-full.js"> </script>
<script type="text/javascript" src="mootools-more-1.4-full.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function() {
var one = new Fx.Slide('test', {mode: 'horizontal'});
var two = new Fx.Slide('testing', {mode: 'horizontal'});
one.hide();
two.hide();
one.slideIn();
one.addEvent('complete', function() {
two.slideIn();
});
});
</script>
</head>
<body>
<div id="test">
</div>
<div id="testing">
</div>
</body>
</html>
can anyone help me please,
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是 Fx.Slide 处理的每个 div 都会被一个 div 元素包裹。因此，要实现您想要的效果，您可以使用 css 进行一些操作，例如添加一条匹配测试/测试包装 div 的规则
演示： http://jsfiddle.net/steweb/hGSdN/
The problem is that each div processed by Fx.Slide will be wrapped by a div element. Therefore, to achieve what you want you could play a little with css, for example by adding a rule that will match test/testing wrapper divs
Demo: http://jsfiddle.net/steweb/hGSdN/