码迷,mamicode.com
首页 > 其他好文 > 详细

图片滚动

时间:2015-10-25 17:58:27      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

  不知道多久没和她说话了,分手之后,除了时不时还能在群上看看她冒冒泡,我们已没有正面交流,打开聊天窗口都会感到尴尬。突然有一天,她发微信给我,她说她要学前端开发。关于前端开发,我们之间还有段故事。那时候我们还没开始交往,但我平时总会有意无意流露出一些喜欢她的暗示,她也领会到了,只是我从不表白,她也从不说破。有次期末,她找到我,让我帮她做网页设计课的课程设计。网页设计算我半个专业,而她是学文学的,网页设计只是选修课;且不说这是我擅长的,就凭她是我喜欢的女孩,我不会也得会,那次我发挥了我几乎所有的创造力,此后我再也没做出超过它的作品。她叫点,而我名字的拼音首字母是LD,所以我的网页的主题索性就叫Love Dian;专门查阅网页背景设计的一些资料,精心挑选的唯美背景,深色背景配上银白色分割线;特地用jquery动画做出全屏飘雪效果,每片雪花都用photoshop精心雕琢,把握效果还要把握图片大小;从来只崇尚代码的我,那次也用到了切片,用photoshop将武大一封著名的三行情诗做成动画;精选的背景音乐,还有滚动歌词;荧光笔鼠标;图片遮罩效果;留言板模块……我所学几乎毫无保留全部用在了这次课设上,作品里也倾注了对她的爱慕之情,作品发给她的时候,我都没注意到这有多大胆,心里只有圆满完成女神交付的任务的成就感。那天晚上,点给我发QQ消息,说她很感动,但前不久她前男友主动提出复合,她答应了。我知道,我在作品里的流露有点过了,到了她不得不和我说破的时候了。我并没有多惊讶,可能圆满完成任务的成就感已经抵消了原本应该有的失落,心里很平静(现在想想觉得自己的行为好贱),但还是傲娇地说了句“我喜欢你是我的事,与你无关”。到真正追到她,是一年后的事情了,至于后来分手,也是诸多无奈。我毕业后做了一名会计,没有从事IT方面的工作,这里面也有许多曲折,大概就是我败给了自己,也败给了生活。

  两周前她突然又发消息给我了,说要学网页设计,我便自告奋勇地提出来教她,然而就讲了一个下午,她便再没找过我了。她说想学图片轮播的做法,我当时没做出来。后来我各种不甘心,专门花时间把图片轮播给撸出来了。

  用javascript做动画,无非是将坐标一次移动n个像素,再用setInteral()做个循环将移动的动作连续起来,我的印象中这种动画在动作的衔接点肯定会有卡顿,显得不平滑,要做平滑连续的动画,非要jquery的animate不可,于是我打算用jquery来做图片滚动,当然我是在后来才发现这种想法不对的。

  首先仍然是内容,一个div做容器,容器里面放几张图片,代码就像下面这个样子:

<div id="contianer">
    <img class="_item" src="..." />
    <img class="_item" src="..." />
    <img class="_item" src="..." />
</div>

  设定好容器container的宽度,溢出部分隐藏(overflow:hidden),图片浮动属性设置成靠左浮动(float:left),做到这里我就碰到了我的第一个问题:container宽度多处的部分不足一个图片的宽度,那container可见部分最右边的图片就会被隐藏而导致右边有一片空白,就是下面这副死样子:

 技术分享

  为便于区别,容器是红色边框,图片虚线边框,上面应该显示3张图片,右边应该显示第3张图片的一部分的,但是这样做显示不出来,显然不能这样,我就把容器的overflow:hidden去掉,成了下面这副样子:

技术分享

  可以看到第三张图片因空间不够换到下一行了,浮动效果最初就是这么设定的,我要怎么才能做成下面这种效果呢?

技术分享

  我纠结了好久(简直愚蠢)才想出这么个办法,在容器里面再加一个子容器div,子容器宽度设置得比父容器款,图片放在子容器里面,滑动的时候,让子容器滑动,图片也就跟着动了,就是这样:

<style>
#container {
    width:320px;
    border:solid 1px red;
    overflow:hidden;
}

#items {
    width:500%;
    position:relative;
}

._item {
    border:dashed 1px;
    float:left;
}
</style>
<div id="container">
    <div id="items">
        <img class="_item" src="images/1.ico" />
        <img class="_item" src="images/2.ico" />
        <img class="_item" src="images/3.ico" />
    </div>
</div>

   子容器items的宽度设置成父容器的5倍(width:500%,其实也不用这么丧心病狂,只要比父容器宽就好了),这样一来 ,第一个问题就解决了,接下来,要做动画了。先不管别的,首先得让子容器items左移动一个图片宽度(我用的图片是128px宽)的距离,在1秒内:

$("#items").animate({
            left:"-=128px"
            },
            1000
        );

   注意,items的position必须设置成relative,属性left才能生效,上述动画才能生效。

  OK,图片能动了,要能实现轮播,需要在第一张图片刚好完全向左移出可视区域的时候,马上把该图片移动到最右边接到第3张图片的后面,逻辑上是这样的,但真正实现时,却要借助其它逻辑:因为我们实际移动的是图片的父容器items,不是直接移动的图片。items已经左移128px,它可以继续左移以让图片左移,但总有一个时间点要让它回到最初的位置,不能让它无限左移下去,我选择在第一个图片移出视野的时候让items回归原位;然后第一位置的图片换成第二个位置的图片,第二个位置的图片换成第三个位置的图片,原来第一个位置的图片放到第三个位置,就是所有图片换到它前面的一个位置上,然后第一张图片换到最后一个位置上;这些动作在极短的时间内完成,看上去就像原来第一个图片瞬间移动到了最后。然后,用setInterval让上述所有动作按次序无线循环发生下去,就实现了图片的轮播效果。

setInterval(_scroll,1000);
    function _scroll(){
        $("#items").animate({
            left:"-=128px"
            },
            1000,
            function(){
                if(parseInt($(this).css("left")) <= -128){
                    $(this).css("left","0px");
                    var num = $("._item").length;
                    var temp = $("._item").eq(0).attr("src");
                    for(var i = 0; i < (num - 1); i++)
                    {
                        $("._item").eq(i).attr("src",$("._item").eq(i+1).attr("src"));
                    }
                    $("._item").eq(num - 1).attr("src",temp);
                }
            }
        );
    }

 

  但,一秒卡顿一次,并不能连续平滑,写到这里我基本放弃了。后来就查资料,发现,原来是我动画单位时间设置成1000太长了,于是改成10,就是每10us移动130px,图片就哗哗哗差点闪花眼,再调,每10us移动5像素,就基本正常了,而且肉眼已经看不出有卡顿了!!!然后再把用变量speed将5px替换出来,以便于滚动速度,大功告成!!!

但是我已经基本没可能挽回女神了!

附上代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#container {
    width: 500px;
    border: solid 1px;
    overflow: hidden;
}
#items {
    width: 1000px;
    position: relative;
}
._item {
    float: left;
}
</style>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(e) {
    var speed = 1;//数字越大速度越快
    setInterval(_scroll,10);//延时设置一个比较小的数字十分重要,太高会出现卡顿
    function _scroll(){
        $("#items").animate({
            left:"-=" + speed +"px"
            },
            10,
            function(){
                var imgWidth = $("._item").eq(0).width(); //获取单张图片宽度
                /*当某张图片已经向左移出视野的时候*/
                if(parseInt($(this).css("left")) + imgWidth <= 0){
                    $(this).css("left","0px");
                    var num = $("._item").length;
                    console.log("元素个数:" + num);
                    var temp = $("._item").eq(0).attr("src");
                    console.log("首个元素的src值:" + temp);
                    for(var i = 0; i < (num - 1); i++)
                    {
                        $("._item").eq(i).attr("src",$("._item").eq(i+1).attr("src"));
                    }
                    $("._item").eq(num - 1).attr("src",temp);
                }
            }
        );
    }
    
});
</script>
</head>

<body>
<div id="container">
  <div id="items"> <img class="_item" src="images/1.ico" /> <img class="_item" src="images/2.ico" /> <img class="_item" src="images/3.ico" /> <img class="_item" src="images/4.ico" /> <img class="_item" src="images/5.ico" /> <img class="_item" src="images/6.ico" /> </div>
</div>
</body>
</html>

  我写的这个并不是比较好的方案哦,比较好的方案,我是从网上找到的,也附在这里:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
 <!--
#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 500px;
 }
 #demo img {
 border: 3px solid #F2F2F2;
 }
 #indemo {
 float: left;
 width: 800%;
 }
 #demo1 {
 float: left;
 }
 #demo2 {
 float: left;
 }
 -->
 </style>
向左滚动
<div id="demo">
  <div id="indemo">
    <div id="demo1"> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div>
    <div id="demo2"></div>
  </div>
</div>
<script>
 <!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
 var tab1=document.getElementById("demo1");
 var tab2=document.getElementById("demo2");
 tab2.innerHTML=tab1.innerHTML;
 function Marquee(){
 if(tab2.offsetWidth-tab.scrollLeft<=0)
 tab.scrollLeft-=tab1.offsetWidth
 else{
 tab.scrollLeft++;
 }
 }
 var MyMar=setInterval(Marquee,speed);
 tab.onmouseover=function() {clearInterval(MyMar)};
 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
 -->
 </script>
</body>
</html>

 

图片滚动

标签:

原文地址:http://www.cnblogs.com/dige1993/p/4909094.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!