项目

（移动的广告牌）

要求：

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. Codeforces 645B Mischievous Mess Makers【逆序数】

    题目链接: http://codeforces.com/problemset/problem/645/B 题意: 给定步数和排列,每步可以交换两个数,问最后逆序数最多是多少对? 分析: 看例子就能看出 ...

  2. [bzoj2962]序列操作_线段树_区间卷积

    序列操作 bzoj-2962 题目大意:给定一个n个数的正整数序列,m次操作.支持:1.区间加:2.区间取相反数:3.区间求选c个数的乘积和. 注释:$1\le n,m\le 5\cdot 10^4$ ...

  3. lambda简单记录

    lambda表达式对集合的一些操作,持续记录一下新的用法 List<Integer> list = new ArrayList<>(); list.add(1); list.a ...

  4. Ubuntu 16.04升级4.7.0内核后导致Compiz奔溃，问题：compiz[4852]: segfault at 48 ip 00007f88cae087f0 sp 00007ffce354c268 error 4 in libscale.so

    由于硬件的驱动支持问题,升级4.7.0的内核主要是为了能使用Intel HD Graphics 630驱动,但是也出现了相关问题,比如Compiz的特效导致桌面上如果有多个相同程序启动,然后再次点击时 ...

  5. MongoDB小结02 - 配置、启动MongoDB

    下载MongoDB 第一步:登上MongoDB官网,找到自己的适合的版本下载 第二步:解压(免安装),改名mongodb(举例命名,可以任个人喜好),放在你喜欢的位置(任喜好) 第三步:通过命令行: ...

  6. Java线程：Callable和Future

    接着上一篇继续并发包的学习,本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一个拿到结果.        Callable接口类似于Runnable,从名字就可以看出来了,但 ...

  7. SAS编程基础 - 逻辑库和数据集

    1. SAS逻辑库 1.1 创建SAS逻辑库: libname lb 'F:\Data_Model'; libname是关键字,lb是创建的逻辑库的名称,引号内的内容是目录路径,最后一个分号结束程序语 ...

  8. poj 2318 TOYS &amp; poj 2398 Toy Storage (叉积)

    链接:poj 2318 题意:有一个矩形盒子,盒子里有一些木块线段.而且这些线段坐标是依照顺序给出的. 有n条线段,把盒子分层了n+1个区域,然后有m个玩具.这m个玩具的坐标是已知的,问最后每一个区域 ...

  9. 文本分类——NaiveBayes

    前面文章已经介绍了朴素贝叶斯算法的原理,这里基于NavieBayes算法对newsgroup文本进行分类測试. 文中代码參考:http://blog.csdn.net/jiangliqing1234/ ...

  10. EC2的维护更新-总结篇及有效经验分享

    2014年10月11日 号,我们对不到10%的EC2实例的完毕了重新启动.来预防不论什么与Xen安全通报(XSA-108)相关的安全风险. 日之前都有义务遵守相关问题的保密要求.直到它被向公众公布. ...