项目

（移动的广告牌）

要求：

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. cogs——1215. [Tyvj Aug11] 冗余电网

    1215. [Tyvj Aug11] 冗余电网 ★   输入文件:ugrid.in   输出文件:ugrid.out   简单对比 时间限制:1 s   内存限制:128 MB TYVJ八月月赛提高组 ...

  2. Ubuntu 16.04安装TeamViewer

    安装i386库: sudo apt-get install libc6:i386 libgcc1:i386 libasound2:i386 libexpat1:i386 libfontconfig1: ...

  3. linux 实现VLAN

    本文将在一台linux机器上,利用linuxbridge 等技术模拟创建VLAN 环境. 首先,创建vlan interface ip link add link ens33 name ens33.8 ...

  4. VC,VB程序button、图标样式美化

    此处的"美化"指的不是通过代码进行美化你的程序.关于想进一步优化自己的程序界面的,最好还是去了解下SkinSharp吧.本文提及的是利用第三方资源编辑软件在不更改程序不论什么框架和 ...

  5. 【Record】ART：Android RunTime

    资料来自url=9xdxrhR45Uj3p450JQvTUO-dmzcWswNmABVgYAaFS0AXYDi8Q2JOzvu7y33GIOAI_8Lz7JmLrl0x6DoRW8e5oa" ...

  6. keepalived + lvs 网站高可用集群

    一 ,四台服务器 master 端 : 192.168.1.3 backup 端: 192.168.1.4 REserver1 端 : 192.168.1.5 REserver2 端: 192.168 ...

  7. VC++6.0不能显示MSDN解决的方法

    1.搜索看系统是否有Vshelp.dll文件.没有则去站点下载一个 位操作系统直接将下载的文件放在C:\Windows\System32 位操作系统则放在C:\Windows\SysWOW64 3.点 ...

  8. 三元表达式之理解/jquery源代码分析之$.inArray实现

    每次看到三元表达式就会惶惶然分不清怎样读,正如语文中的断句一样,jquery源代码中的三元表达式更是不知怎样断句. 附jquery中的inArray实现. 大家熟悉jquery的应该都不陌生inArr ...

  9. opencv对图像进行边缘及角点检測

    opencv对图像进行边缘及角点检測 先看结果: 代码: // ConsoleApplication1_812.cpp : Defines the entry point for the consol ...

  10. c#基于事件模型的UDP通讯框架(适用于网络包编解码)

    之前写过一篇关于c#udp分包发送的文章 这篇文章里面介绍的方法是一种实现,可是存在一个缺点就是一个对象序列化后会增大非常多.不利于在网络中的传输. 我们在网络中的传输是须要尽可能的减小传送的数据包的 ...