项目

（移动的广告牌）

要求：

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/1.jpg" alt="" />
                <img src="img/2.jpg" alt="" />
                <img src="img/3.jpg" alt="" />
                <img src="img/4.jpg" alt="" />
                <img src="img/5.jpg" alt="" />
                <img src="img/6.jpg" alt="" />
            </div>

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

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

*{
    padding: 0;
    margin: 0;
}
/*添加背景图片，个人爱好*/
body{
    background: url(img/4.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）的更多相关文章

  1. iOS启动图和开屏广告图，类似网易

    iOS启动图和开屏广告图,类似网易 启动图是在iOS开发过程中必不可少的一个部分,很多app在启动图之后会有一张自定义的开屏广告图,点击该广告图可以跳转到广告图对应的页面.今天呢,和大家分享一下如何添 ...

  2. IOS-启动图和开屏广告图，类似网易

    作者:若锦 原文链接:http://www.jianshu.com/p/e52806516139 启动图是在iOS开发过程中必不可少的一个部分,很多app在启动图之后会有一张自定义的开屏广告图,点击该 ...

  3. 美图WEB开放平台环境配置

    平台环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下,比如: htt ...

  4. CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap

    背景 DWG图是AutoCAD是私有格式,只能在CAD软件上编辑查看,如何发布至Web上做数据展示,GIS分析应用开发,一直是业内头疼的事情. 传统的办法采用的解析AutoCAD图形绘制,并封装成Ac ...

  5. CAD/DWG图Web网页可视化技术之栅格和矢量瓦片

    背景 在上一篇博文中CAD图DWG解析WebGIS可视化技术分析总结提到,实现CAD/DWG图形Web展示的思路一般为解析AutoCAD图形格式,然后转成html5所能绘制的格式如svg,geojso ...

  6. iOS游戏截图或广告图尺寸要求

    统一的标准:72 dpi,RGB,扁平化,非透明,高质量的JPEG或者PNG文件格式 ====================================================== 3. ...

  7. 小白系列-免费广告路由器web认证设置(2)

    要设置认证页面图片.须要到后台注冊一个帐号,绑定路由器. 路由器管理后台网址 http://115.29.12.130/router 第一步:自己主动获取一个路由器ID(上一篇文章中的路由器ID也要改 ...

  8. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

随机推荐

  1. POJ 1061 青蛙的约会【扩欧】

    题意: 两只青蛙在地球同一纬度不同位置x,y向同一方向跳,每只青蛙跳的长度不同m,n,纬线总长度l,问两只青蛙是否能相遇,跳几次才相遇. 分析: 可知,问题可转化为求(m−n)∗a≡(y−x)(mod ...

  2. NOIP 2010 关押罪犯

    P1525 关押罪犯 题目描述 SS 城现有两座监狱,一共关押着 NN 名罪犯,编号分别为 1-N1−N .他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突. ...

  3. IE11 文档模式空白

    环境描述: win7 64位系统 安装了 更新 IE11-Windows6.1-KB2929437-x64.IE11-Windows6.1-KB3008923-x64 解决方案: 卸载 IE11-Wi ...

  4. ETL增量单表同步简述_根据dateTime增量

    ETL增量单表同步简述 1. 实现需求 当原数据库的表有新增.更新.删除操作时,将改动数据同步到目标库对应的数据表. 2. 设计思路 设计总体流程图如下: 步骤简单说明: 1.设置job的执行属性,如 ...

  5. 谈论javascript闭包

    闭包看似很简单,其实牵扯了很多东西,例如:上下文作用域(事件处理程序).内存占用.局部以及全局变量.回调函数以及编程模式等 首先我们谈论一个问题,为什么需要闭包? 1.var全局定义(全局污染)- 指 ...

  6. web网站架构演变过程

    我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 阶段一. ...

  7. 2016/2/19 position： fixed absolute relative z-index float 半透明效果

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口.      显示效果  无论滚动条怎么移动  都固定在显示页面的一个位置不动 二.position:a ...

  8. Python获取CPU、内存使用率以及网络使用状态代码

    Python获取CPU.内存使用率以及网络使用状态代码_python_脚本之家 http://www.jb51.net/article/134714.htm

  9. java中间变量缓存机制

    public class Demo { public static void main(String[] args){ method_1(); method_2(); } private static ...

  10. SIM卡APDU指令【转】

    本文转载自:http://blog.csdn.net/hlx156/article/details/54136756 一个APDU可以是一个命令,也可以是命令的响应. 命令APDU的一般格式: CLA ...