项目

（移动的广告牌）

要求：

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. JDBC的结果集

    以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/result-sets.html: SQL语句从数据库查询中获取数据,并将数据返回到结果集中.SELEC ...

  2. jquery校验框架

    http://www.validform.club/ http://craftpip.github.io/jquery-confirm/

  3. Rust 1.7.0 macro宏的复用 #[macro_use]的使用方法

    Rust 1.7.0 中的宏使用范围包含三种情况: 第一种情况是宏定义在当前文件里.这个文件可能是 crate 默认的 module,也可能是随意的 module 模块. 另外一种情况是宏定义在当前 ...

  4. CentOS 7 开启VNC Service

    由於是透過 GUI 管理, 所以需要圖形桌面環境, 如果沒有安裝, 可以用以下指令安裝 GNOME: # yum groupinstall “GNOME Desktop” Centos 7安裝 VNC ...

  5. MYSQL入库常用PHP函数

    addslashes   addslashes() 函数在指定的预定义字符前添加反斜杠.这些字符是单引号(').双引号(").反斜线(\)与NUL(NULL字符).   stripslash ...

  6. 1062. Talent and Virtue (25)【排序】——PAT (Advanced Level) Practise

    题目信息 1062. Talent and Virtue (25) 时间限制200 ms 内存限制65536 kB 代码长度限制16000 B About 900 years ago, a Chine ...

  7. hdu 5253 连接的管道(kruskal)(2015年百度之星程序设计大赛 - 初赛(2))

    连接的管道 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  8. Java集合类汇总记录--JDK篇

    接口类图 Java Collection由两套并行的接口组成,一套是Collection接口,一套是Map接口.例如以下图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

  9. 洛谷P1328==codevs3716 生活大爆炸版石头剪刀布[NOIP 2014 day1 T1]

    P1328 生活大爆炸版石头剪刀布 1.8K通过 2.6K提交 题目提供者2014白永忻 标签模拟NOIp提高组2014 难度普及- 提交该题 讨论 题解 记录 最新讨论 Who can help m ...

  10. initial ram disk

    1 什么是initial ram disk 它就是一个做好了的文件系统,其存储空间是ram.在kernel启动的第一个阶段,会被mount成根文件系统. 2 为什么需要initial ram disk ...