`
redstarofsleep
  • 浏览: 443878 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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

阅读更多

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>
分享到:
评论
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 写道
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
  direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time

see, so easy.....

这个direction 是指什么?



direction指的是滑动的方向

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

这个direction 是指什么?



direction指的是滑动的方向
17 楼 redstarofsleep 2011-04-23  
georgezeng 写道
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
  direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time

see, so easy.....

这个direction 是指什么?
16 楼 georgezeng 2011-04-22  
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
  direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time

see, so easy.....
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&gt;div:first').animate({width:'0px'},2000,callback);
}
function callback() {
$('#parent&gt;div:last').after($('#parent&gt;div:first'));
$('#parent&gt;div:last').css('width', '398px');
}</pre>
<p> HTML代码:</p>
<pre name="code" class="html"> &lt;div class="main"&gt;
&lt;div id="parent" class="parent"&gt;
&lt;div id="sub1" class="sub" style="background:#00FF00;"&gt;&lt;/div&gt;
&lt;div id="sub2" class="sub" style="background:#0000FF;"&gt;&lt;/div&gt;
&lt;div id="sub3" class="sub" style="background:#00FFFF;"&gt;&lt;/div&gt;
&lt;div id="sub3" class="sub" style="background:#FF0000;"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;input type="button" onclick="slideleft();" value="slide"&gt;&lt;/input&gt;</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是什么意思?

相关推荐

    jQuery鼠标经过图片背景滑动切换效果.zip

    总的来说,jQuery鼠标经过图片背景滑动切换效果是一个结合了jQuery事件处理和CSS3过渡效果的实用技巧。它不仅可以增强网页的视觉体验,而且代码实现也相对简单,适合初学者学习和实践。通过熟练掌握这些基础知识,...

    jQuery实现按钮滑动切换

    在本文中,我们将深入探讨如何使用jQuery库来实现按钮的滑动切换效果。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务,使得开发者能够更高效地创建交互式的网页应用。 ...

    基于JQuery横向切换效果

    综上所述,基于JQuery的Banner大图片横向切换效果涉及到的选择、操作、动画、事件处理和响应式设计等多个方面,是Web前端开发中一个典型的实践案例,有助于提升网页的互动性和美观度。通过学习和实践这个案例,...

    jQuery左侧图片右侧文字滑动切换代码.zip

    在本项目中,"jQuery左侧图片右侧文字滑动切换代码.zip" 提供了一个实用的JavaScript效果,用于创建一种交互式的图片展示方式。这种效果常见于网站的相册或产品展示部分,可以提升用户体验,使内容更生动吸引人。...

    jquery层叠图片横向平滑移动轮播切换效果

    通过以上介绍,我们可以看出"jquery层叠图片横向平滑移动轮播切换效果"是一个结合了jQuery动画技术、用户交互和页面响应性的高级网页设计实践。这个项目的源代码(texiao7896_1560681074)包含了实现这一功能的具体...

    jQuery列表图片控制图片滑动切换代码

    在本文中,我们将深入探讨如何使用jQuery实现列表图片的滑动切换效果,这是一种常见的网页动态交互功能,可以提升用户体验,使网站更具吸引力。jQuery库以其简洁的API和强大的功能,使得这种效果的实现变得相对简单...

    94、jQuery左右滑动切换图片代码

    【标题】"94、jQuery左右滑动切换图片代码"涉及到的是使用JavaScript库jQuery实现的一种交互效果,即图片轮播或幻灯片展示。在网页设计中,这种功能经常用于展示一组图片,允许用户通过左右滑动来切换不同的图片。...

    基于JQuery的大图片横向切换效果

    这种效果通常是通过JQuery库,一个轻量级、高性能的JavaScript库,来实现图片的无缝滑动和自动切换,同时提供用户交互功能,如手动左右切换。 JQuery 提供了丰富的DOM操作、事件处理和动画效果,使得开发者可以轻松...

    jQuery点击右侧按钮图片滑动切换代码.zip

    总的来说,这个代码示例展示了如何结合HTML、CSS和jQuery实现一个基本的图片滑动切换功能。通过学习和理解这段代码,开发者可以进一步扩展其功能,如增加自动轮播、添加指示器、支持触屏滑动等,从而为网站或应用...

    基于JQuery的Banner大图片横向切换效果

    JQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,而`jquery.cycle.all.min.js`插件是jQuery的一个扩展,专门用于实现各种类型的轮播(Banner)切换效果。本文将深入探讨如何利用...

    jQuery带遮罩高亮图片滑动切换代码.zip

    "jQuery带遮罩高亮图片滑动切换代码"就是一种实现这种效果的技术,它巧妙地结合了jQuery库与CSS3动画,为用户呈现出一个具有遮罩高亮效果的图片轮播组件。本文将深入探讨这一技术的实现原理和关键代码,帮助读者理解...

    jQuery+HTML5页面整屏滑动切换代码.zip

    这个"jQuery+HTML5页面整屏滑动切换代码"的压缩包提供了一个实现这种效果的示例。以下是关于这个主题的核心知识点: 1. **jQuery**:jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、...

    jquery横向动态滑动导航菜单插件

    总的来说,“jQuery横向动态滑动导航菜单插件”是一个强大且灵活的工具,能够帮助开发者创建引人入胜的网页导航体验。通过理解和应用这个插件,你可以提升网站的专业性,同时增强用户与网站的互动。无论你是新手还是...

    jQuery选项卡标签滑动切换效果.zip

    本项目“jQuery选项卡标签滑动切换效果”旨在实现一个常见的用户界面功能,即选项卡式导航,其中各个标签页内容可以平滑地进行滑动切换。这种效果能提升用户体验,使得大量信息组织得更加有序且易于浏览。 首先,...

    【Jquery经典特效26】jQuery动画背景滑动切换效果

    【jQuery经典特效26】:jQuery动画背景滑动切换效果是一...文件列表中的`Jquery特效资源分享.txt`可能包含更多相关资源和代码示例,而`201`可能是另一个相关文件,如CSS或JavaScript文件,用于实现这个特效的具体细节。

    jQuery带箭头的图片滑动切换代码.zip

    本教程将深入探讨如何使用jQuery实现一个带箭头的图片滑动切换代码,帮助开发者创建出具有左右箭头和索引按钮切换功能的幻灯片特效。 首先,我们需要理解jQuery的基本结构和核心概念。jQuery是一个轻量级的...

    jQuery+css3手机触屏滑动切换图片列表代码

    在本项目中,"jQuery+css3手机触屏滑动切换图片列表代码"是一个利用jQuery和CSS3技术实现的响应式图像展示方案,特别适用于移动设备。以下是该项目涉及的主要知识点和详细说明: 1. **jQuery**:jQuery是一个快速、...

    jquery横向平滑移动轮播切换效果.zip

    总的来说,这个"jquery横向平滑移动轮播切换效果"涵盖了jQuery动画、CSS定位、事件监听、浏览器兼容性等多个方面的知识点,是学习网页动态效果和交互设计的一个很好的实践案例。通过研究这个项目,开发者可以提升...

    jQuery手机移动端图片横向滚动效果

    5. 动画优化:为了提供更好的用户体验,可以使用jQuery的动画函数`animate()`来平滑地过渡到下一个图片,而不是立即改变图片的位置。此外,还可以添加箭头按钮来手动切换图片,或者自动播放功能。 四、进一步优化 1...

    jquery宽屏图片滑动切换效果代码.zip

    总的来说,“jquery宽屏图片滑动切换效果代码”是一个实用的网页组件,它结合了jQuery的便捷性和CSS3的动画效果,提供了美观且响应式的图片切换体验。对于网页设计师和开发者来说,理解和应用此类代码可以帮助他们...

Global site tag (gtag.js) - Google Analytics