首页 行业资讯 宠物日常 宠物养护 宠物健康 宠物故事

...轮换效果用Jquery制作原理各是怎么样的?谢谢

发布网友 发布时间:2024-10-14 14:06

我来回答

2个回答

热心网友 时间:2024-10-14 14:08

  看到的那个背景图片其实是一个div(bgIn)里面嵌套了两个子div(bg-1和bg-2),两个子div只是设置了宽,背景图片,它们横向左对齐排列。然后控制父div(bgIn)的left属性,让这个div(bgIn)相对于它的父div(bg)中左右移动而已。你用chrome的审查元素就能看到的。

  最外边那个div(bg)则主要是控制z轴,让它显示在页面下面

  而这些设置好之后,用jquery的toggle()函数和animate()函数简单的控制一下bgIn的left属性和过渡时间就能实现了。

<div class="bg-list p-a" id="bg">
<div class="bg-in p-a" id="bgIn" style="left: -1349px;">
    <div class="bg-1" style="width: 1349px;"></div>
    <div class="bg-2" style="width: 1349px;"></div>
</div>
</div>
.bg-list{ top:0; left:0; overflow:hidden; width:100%; height:100%; z-index:10;}
.bg-in{height:100%;top:0; left:0; width:20000px;}
.bg-in div{ height:826px; float:left;background-repeat:no-repeat; background-position:center top;}
.bg-1{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_1.jpg);}
.bg-2{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_2.jpg);}

热心网友 时间:2024-10-14 14:14

这个有挺多的表现形式,好理解的就是

例如5张图的:

你的窗口大小:

5张图片大小:
口 口 口 口 口

默认看,是一张图,其他4张在右边没显示出来,用jquery把第一张的margin-left修改为宽度的负值,例如图片宽度是960px,那么用 $('img1').animate({'margin-left': '-960px'}, 500),500毫秒的过度动画将图片过度到左侧-960px位置,那么第二张图就出来了,这就成了动画。

其他方式有更多表现形式,例如覆盖型:
窗口:

图片形式:






一张盖一张,第一张有消失的动画,并放到序列最后,则第二张展现。

再有就更复杂了,你可以找现成的插件直接用。

热心网友 时间:2024-10-14 14:11

  看到的那个背景图片其实是一个div(bgIn)里面嵌套了两个子div(bg-1和bg-2),两个子div只是设置了宽,背景图片,它们横向左对齐排列。然后控制父div(bgIn)的left属性,让这个div(bgIn)相对于它的父div(bg)中左右移动而已。你用chrome的审查元素就能看到的。

  最外边那个div(bg)则主要是控制z轴,让它显示在页面下面

  而这些设置好之后,用jquery的toggle()函数和animate()函数简单的控制一下bgIn的left属性和过渡时间就能实现了。

<div class="bg-list p-a" id="bg">
<div class="bg-in p-a" id="bgIn" style="left: -1349px;">
    <div class="bg-1" style="width: 1349px;"></div>
    <div class="bg-2" style="width: 1349px;"></div>
</div>
</div>
.bg-list{ top:0; left:0; overflow:hidden; width:100%; height:100%; z-index:10;}
.bg-in{height:100%;top:0; left:0; width:20000px;}
.bg-in div{ height:826px; float:left;background-repeat:no-repeat; background-position:center top;}
.bg-1{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_1.jpg);}
.bg-2{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_2.jpg);}

热心网友 时间:2024-10-14 14:06

这个有挺多的表现形式,好理解的就是

例如5张图的:

你的窗口大小:

5张图片大小:
口 口 口 口 口

默认看,是一张图,其他4张在右边没显示出来,用jquery把第一张的margin-left修改为宽度的负值,例如图片宽度是960px,那么用 $('img1').animate({'margin-left': '-960px'}, 500),500毫秒的过度动画将图片过度到左侧-960px位置,那么第二张图就出来了,这就成了动画。

其他方式有更多表现形式,例如覆盖型:
窗口:

图片形式:






一张盖一张,第一张有消失的动画,并放到序列最后,则第二张展现。

再有就更复杂了,你可以找现成的插件直接用。

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com