网上找的代码太多,自己用JQuery写一个横向滑动切换效果,代码超少

redstarofsleep

浏览: 443998 次
性别:
来自: 苏州

最近访客更多访客>>

mulingya

pch272215690

z3996821

sanrenxing_1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

jQuery CSS JavaScript HTML

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>

分享到：

表格表头固定,内容多时滚动内容 | JQuery选择器总结(2) 基础过滤选择器

2011-04-05 18:14
浏览 17278
评论(22)
论坛回复 / 浏览 (22 / 15781)
分类:Web前端
查看更多

22 楼 redstarofsleep 2011-04-26

hjiuokpl1314 写道

貌似IE7下有问题

厄...我试过IE6和IE8
IE7下有问题吗?哪里不对

21 楼 hjiuokpl1314 2011-04-26

貌似IE7下有问题

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.....

这个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>

19 楼 redstarofsleep 2011-04-24

georgezeng 写道

redstarofsleep 写道

georgezeng 写道

这个direction 是指什么?

direction指的是滑动的方向

我试了,不行啊.....
除了JQuery核心库,是不是还要导什么JS?
官方文档上也没有找到找到这种用法啊

18 楼 georgezeng 2011-04-24

redstarofsleep 写道

georgezeng 写道

这个direction 是指什么?

direction指的是滑动的方向

17 楼 redstarofsleep 2011-04-23

georgezeng 写道

这个direction 是指什么?

16 楼 georgezeng 2011-04-22

15 楼 redstarofsleep 2011-04-10

yuqihui 写道

firefox 下不成啊

不可能啊,我在FireFox和IE8下都试过..

14 楼 yuqihui 2011-04-09

firefox 下不成啊

13 楼 hejinxiqq 2011-04-08

redstarofsleep 写道

stoneskin 写道

css 里的 *width:400px;
那个 "*"有什么忒别作用吗？

这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.

做出自动的也是很简单的啊

12 楼 redstarofsleep 2011-04-07

stoneskin 写道

css 里的 *width:400px;
那个 "*"有什么忒别作用吗？

这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.

11 楼 redstarofsleep 2011-04-07

happy175 写道

这是做成可自动切换的就好了

自动切换简单啊,setInterval里调slideleft就可以了啊

10 楼 yangguo 2011-04-07

思路很好啊，厉害！

9 楼 happy175 2011-04-07

这是做成可自动切换的就好了

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>

7 楼 redalx 2011-04-07

IE6下是不正确的

6 楼 taogejava 2011-04-07

很好！那个*是什么意思？

5 楼 huangheyuan1229 2011-04-07

hack手法

4 楼 287854442 2011-04-07

287854442 写道

stoneskin 写道

css 里的 *width:400px;
那个 "*"有什么忒别作用吗？

同感，楼主解释一下*width是什么意思？

网上搜索了一下，只有ie浏览器才能识别*号，应该是针对ie的hack。

3 楼 287854442 2011-04-07

stoneskin 写道

css 里的 *width:400px;
那个 "*"有什么忒别作用吗？

同感，楼主解释一下*width是什么意思？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论