网下找的代码太多,自己用JQuery写一个横向滑动切换效果,代码超少
网上找的代码太多,自己用JQuery写一个横向滑动切换效果,代码超少
同感，楼主解释一下*width是什么意思？
同感，楼主解释一下*width是什么意思？
网上搜索了一下，只有ie浏览器才能识别*号，应该是针对ie的hack。
自动切换简单啊,setInterval里调slideleft就可以了啊
这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.
这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.
做出自动的也是很简单的啊
不可能啊,我在FireFox和IE8下都试过..
这个direction 是指什么?
这个direction 是指什么?
direction指的是滑动的方向
这个direction 是指什么?
direction指的是滑动的方向
我试了,不行啊.....
除了JQuery核心库,是不是还要导什么JS?
官方文档上也没有找到找到这种用法啊
这个direction 是指什么?
direction指的是滑动的方向
我试了,不行啊.....
除了JQuery核心库,是不是还要导什么JS?
官方文档上也没有找到找到这种用法啊
sorry,我忘记说了，这个是需要使用ui的js的，以下是例子
厄...我试过IE6和IE8
IE7下有问题吗?哪里不对
CSS代码:
回帖的问的比较多,解释一下,CSS中的两个Width,*width是针对IE的,因为IE的width是包括边框border的,而其它浏览器是不包括的,所以IE的width比其它的多2个像素.
.main {
width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden;
}
.parent {
height:300px;width:1600px;position:relative;
}
.sub {
width:398px;
*width:400px;
height:298px;border:1px solid #00FFFF;float:left;
}
Javascript代码:
function slideleft() {
$('#parent>div:first').animate({width:'0px'},2000,callback);
}
function callback() {
$('#parent>div:last').after($('#parent>div:first'));
$('#parent>div:last').css('width', '398px');
}
HTML代码:
<div class="main"> <div id="parent" class="parent"> <div id="sub1" class="sub" style="background:#00FF00;"></div> <div id="sub2" class="sub" style="background:#0000FF;"></div> <div id="sub3" class="sub" style="background:#00FFFF;"></div> <div id="sub3" class="sub" style="background:#FF0000;"></div> </div> </div> <input type="button" onclick="slideleft();" value="slide"></input>
3 楼
287854442
2011-04-07
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗？
那个 "*"有什么忒别作用吗？
同感，楼主解释一下*width是什么意思？
4 楼
287854442
2011-04-07
287854442 写道
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗？
那个 "*"有什么忒别作用吗？
同感，楼主解释一下*width是什么意思？
网上搜索了一下，只有ie浏览器才能识别*号，应该是针对ie的hack。
5 楼
huangheyuan1229
2011-04-07
hack手法
6 楼
taogejava
2011-04-07
很好！那个*是什么意思？
7 楼
redalx
2011-04-07
IE6下是不正确的
8 楼
kill_all
2011-04-07
<div class="quote_title">redstarofsleep 写道</div>
<div class="quote_div">
<p>CSS代码:</p>
<pre name="code" class="CSS">.main {
width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden;
}
.parent {
height:300px;width:1600px;position:relative;
}
.sub {
width:398px;
*width:400px;
height:298px;border:1px solid #00FFFF;float:left;
}</pre>
<p> Javascript代码:</p>
<pre name="code" class="js">function slideleft() {
$('#parent>div:first').animate({width:'0px'},2000,callback);
}
function callback() {
$('#parent>div:last').after($('#parent>div:first'));
$('#parent>div:last').css('width', '398px');
}</pre>
<p> HTML代码:</p>
<pre name="code" class="html"> <div class="main">
<div id="parent" class="parent">
<div id="sub1" class="sub" style="background:#00FF00;"></div>
<div id="sub2" class="sub" style="background:#0000FF;"></div>
<div id="sub3" class="sub" style="background:#00FFFF;"></div>
<div id="sub3" class="sub" style="background:#FF0000;"></div>
</div>
</div>
<input type="button" onclick="slideleft();" value="slide"></input></pre>
</div>
<p> </p>
<div class="quote_div">
<p>CSS代码:</p>
<pre name="code" class="CSS">.main {
width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden;
}
.parent {
height:300px;width:1600px;position:relative;
}
.sub {
width:398px;
*width:400px;
height:298px;border:1px solid #00FFFF;float:left;
}</pre>
<p> Javascript代码:</p>
<pre name="code" class="js">function slideleft() {
$('#parent>div:first').animate({width:'0px'},2000,callback);
}
function callback() {
$('#parent>div:last').after($('#parent>div:first'));
$('#parent>div:last').css('width', '398px');
}</pre>
<p> HTML代码:</p>
<pre name="code" class="html"> <div class="main">
<div id="parent" class="parent">
<div id="sub1" class="sub" style="background:#00FF00;"></div>
<div id="sub2" class="sub" style="background:#0000FF;"></div>
<div id="sub3" class="sub" style="background:#00FFFF;"></div>
<div id="sub3" class="sub" style="background:#FF0000;"></div>
</div>
</div>
<input type="button" onclick="slideleft();" value="slide"></input></pre>
</div>
<p> </p>
9 楼
happy175
2011-04-07
这是做成可自动切换的就好了
10 楼
yangguo
2011-04-07
思路很好啊，厉害！
11 楼
redstarofsleep
2011-04-07
happy175 写道
这是做成可自动切换的就好了
自动切换简单啊,setInterval里调slideleft就可以了啊
12 楼
redstarofsleep
2011-04-07
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗？
那个 "*"有什么忒别作用吗？
这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.
13 楼
hejinxiqq
2011-04-08
redstarofsleep 写道
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗？
那个 "*"有什么忒别作用吗？
这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.
做出自动的也是很简单的啊
14 楼
yuqihui
2011-04-09
firefox 下不成啊
15 楼
redstarofsleep
2011-04-10
yuqihui 写道
firefox 下不成啊
不可能啊,我在FireFox和IE8下都试过..
16 楼
georgezeng
2011-04-22
JQuery 本身就提供了slide左右的代码，就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
17 楼
redstarofsleep
2011-04-23
georgezeng 写道
JQuery 本身就提供了slide左右的代码，就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
18 楼
georgezeng
2011-04-24
redstarofsleep 写道
georgezeng 写道
JQuery 本身就提供了slide左右的代码，就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
direction指的是滑动的方向
19 楼
redstarofsleep
2011-04-24
georgezeng 写道
redstarofsleep 写道
georgezeng 写道
JQuery 本身就提供了slide左右的代码，就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
direction指的是滑动的方向
我试了,不行啊.....
除了JQuery核心库,是不是还要导什么JS?
官方文档上也没有找到找到这种用法啊
20 楼
georgezeng
2011-04-25
redstarofsleep 写道
georgezeng 写道
redstarofsleep 写道
georgezeng 写道
JQuery 本身就提供了slide左右的代码，就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
direction指的是滑动的方向
我试了,不行啊.....
除了JQuery核心库,是不是还要导什么JS?
官方文档上也没有找到找到这种用法啊
sorry,我忘记说了，这个是需要使用ui的js的，以下是例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery-ui-1.8.9.min.js"></script>
</HEAD>
<BODY>
<div id="test" style="width: 500px; background-color: red; height: 500px;"></div>
<script>
$("#test").show(
"slide",
{
direction: "left"
}
);
</script>
</BODY>
</HTML>
21 楼
hjiuokpl1314
2011-04-26
貌似IE7下有问题
22 楼
redstarofsleep
2011-04-26
hjiuokpl1314 写道
貌似IE7下有问题
厄...我试过IE6和IE8
IE7下有问题吗?哪里不对