码迷,mamicode.com
首页 > 移动开发 > 详细

横向移动-广告图(web)

时间:2016-10-30 16:38:05      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:背景   定时器   思路   text   个人   javascrip   use   部分   int   

项目

(移动的广告牌)

要求:

1,实现图片一次以移动的方式出现,到最后一张完全出现时,回弹到第一张

2,鼠标放在图片上面图片移动,鼠标离开,图片停止移动

HTML结构 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>回弹效果</title>
        <link rel="stylesheet" href="css/index.css"/>
    </head>
    <body>
        
        <!--创建一个外盒子-->
        <div id="box">
            
            <!--外盒子里面在放一个盒子,用来存放图片-->
            <div id="imgs">
                <img src="img/quan1.jpg" />
                <img src="img/quan2.jpg" />
                <img src="img/quan3.jpg" />
                <img src="img/quan4.jpg" />
                <img src="img/quan5.jpg" />
                <img src="img/quan6.jpg" />
            </div>

        </div>
    </body>
</html>

<script type="text/javascript" src="js/index.js"></script>
CSS布局


*{
    padding: 0;
    margin: 0;
}
/*添加背景图片,个人爱好*/
body{
    background: url(../img/quan4.jpg);
}

/*注意给外盒子设置边款,并隐藏超出部分*/
#box{
    position: relative;
    margin: 10px auto;
    width: 500px;
    height: 250px;
    border: 5px solid red;
    overflow: hidden;
    /*background-color: chocolate;*/
}

/*放图片的盒子设为绝对定位;宽度为所有图片的宽度和,

这样可以使得图片横向排列;隐藏超出部分*/
#imgs{
    position: absolute;
    margin: 10px;
    width: 2400px;
    height: 230px;
    overflow: hidden;
}

/*给所有图片设置统一的高度和宽度;向左浮动;相对定位*/
#imgs img{
    position: relative;
    float: left;
    width: 400px;
    height: 230px;
    
}

JS动画


//使用$()函数
function $(id){
    return document.getElementById(id);
}

//当鼠标悬浮在大盒子内时(获取焦点),开起定时器
$("box").onmouseover = function(){
    clearInterval(timer);
    timer = setInterval(runTimes,3);

}

//当鼠标离开在大盒子内时(失去焦点),停止定时器
$("box").onmouseout = function(){
      clearInterval(timer);
}

var poit = 10;//创建一个变量来接收我们要改变的目标值
var leader = 0;//创建一个变量,设置动画效果
var timer = null;//定时器变量,开启和停止定时器需要


//创建一个函数,实现目标值的改变
function runTimes(){
    poit --;
    
    //设置动画的方式,使得leader的值为0
    leader = leader + (poit - leader)/10;
    
    $("imgs").style.marginLeft =  leader + "px";
   

   //实现回弹效果(所需要的值根据具体情况设置)

   //如果最后一张图片完全显示出来了,就重新给目标值赋予初始值
    if (poit < -1900) {
        poit = 10;
    }
}

思路

1,一个大盒子里面放一个小盒子,小盒子里放图片

2,大盒子与小盒子的高度相当,小盒子的宽度为所有图片的宽度之和

3,图片的宽高相等,图片的高度与小盒子相同,并向左浮动

4,设置小盒子的外边距的初始值为0,超出部分隐藏

5,调用定时器改变小盒子的外边距,达到图片向左移的效果(达到一定值在重新赋予初始的值)

横向移动-广告图(web)

标签:背景   定时器   思路   text   个人   javascrip   use   部分   int   

原文地址:http://www.cnblogs.com/bigerf/p/6013267.html

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