横向移动-广告图(web)
项目 (移动的广告牌) |
要求: 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> <script type="text/javascript" src="js/index.js"></script> |
CSS布局 |
*{ /*注意给外盒子设置边款,并隐藏超出部分*/ /*放图片的盒子设为绝对定位;宽度为所有图片的宽度和, 这样可以使得图片横向排列;隐藏超出部分*/ /*给所有图片设置统一的高度和宽度;向左浮动;相对定位*/ |
JS动画 |
//使用$()函数 //当鼠标悬浮在大盒子内时(获取焦点),开起定时器 } //当鼠标离开在大盒子内时(失去焦点),停止定时器 var poit = 10;//创建一个变量来接收我们要改变的目标值 //创建一个函数,实现目标值的改变 //实现回弹效果(所需要的值根据具体情况设置) //如果最后一张图片完全显示出来了,就重新给目标值赋予初始值 |
思路 |
1,一个大盒子里面放一个小盒子,小盒子里放图片 2,大盒子与小盒子的高度相当,小盒子的宽度为所有图片的宽度之和 3,图片的宽高相等,图片的高度与小盒子相同,并向左浮动 4,设置小盒子的外边距的初始值为0,超出部分隐藏 5,调用定时器改变小盒子的外边距,达到图片向左移的效果(达到一定值在重新赋予初始的值) |
横向移动-广告图(web)的更多相关文章
- iOS启动图和开屏广告图,类似网易
iOS启动图和开屏广告图,类似网易 启动图是在iOS开发过程中必不可少的一个部分,很多app在启动图之后会有一张自定义的开屏广告图,点击该广告图可以跳转到广告图对应的页面.今天呢,和大家分享一下如何添 ...
- IOS-启动图和开屏广告图,类似网易
作者:若锦 原文链接:http://www.jianshu.com/p/e52806516139 启动图是在iOS开发过程中必不可少的一个部分,很多app在启动图之后会有一张自定义的开屏广告图,点击该 ...
- 美图WEB开放平台环境配置
平台环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下,比如: htt ...
- CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap
背景 DWG图是AutoCAD是私有格式,只能在CAD软件上编辑查看,如何发布至Web上做数据展示,GIS分析应用开发,一直是业内头疼的事情. 传统的办法采用的解析AutoCAD图形绘制,并封装成Ac ...
- CAD/DWG图Web网页可视化技术之栅格和矢量瓦片
背景 在上一篇博文中CAD图DWG解析WebGIS可视化技术分析总结提到,实现CAD/DWG图形Web展示的思路一般为解析AutoCAD图形格式,然后转成html5所能绘制的格式如svg,geojso ...
- iOS游戏截图或广告图尺寸要求
统一的标准:72 dpi,RGB,扁平化,非透明,高质量的JPEG或者PNG文件格式 ====================================================== 3. ...
- 小白系列-免费广告路由器web认证设置(2)
要设置认证页面图片.须要到后台注冊一个帐号,绑定路由器. 路由器管理后台网址 http://115.29.12.130/router 第一步:自己主动获取一个路由器ID(上一篇文章中的路由器ID也要改 ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
随机推荐
- [bzoj3630][JLOI2014]镜面通道_计算几何_网络流_最小割
镜面通道 bzoj-3630 JLOI-2014 题目大意:题目链接. 注释:略. 想法: 我们发现,只要上下界没有被完全封死,我们就一定有一条合法的光路. 所以只需要将上界和下界拆开即可. 拆点,把 ...
- hdu——2586 How far away ?
How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- Oracle生成多表触发器sql
--将所有HY开头的表都生成一个更新触发器的脚本('/'是为了连续创建多个触发器而不报错)select 'CREATE OR REPLACE TRIGGER '||table_name||' BEFO ...
- Mysql的timestamp类型,自动记录数据的更新时间
datetime也可以设置自动更新的
- 使用go语言实现简单的反向代理工具激活IntelliJ和PyCharm,持续更新
最近Jetbrians系列IDE更新至2017.3版本,激活检测机制也变成了动态封禁域名,导致大部分域名激活被屏蔽了,所以找了下资料,根据ilanyu的代码,改了下地址,实现了本地反向代理激活服务器. ...
- 手把手教你开发Chrome扩展三:关于本地存储数据
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...
- PowerDesinger15设置字体大小
使用PowerDesigner时,它默认table的字体大小颜色等很难看: 假设通过 Symbol ---> Format进行设置.仅仅能对选中的最改动,新建的Table无效. 能够通过例如以下 ...
- antd 的 Table 遇到的 bug
1.报错情况 /* autoprefixer: off */ filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, Mak ...
- Python全栈
Python基础 Python基础01 Hello World! Python基础02 基本数据类型 Python基础03 序列 Python基础04 运算 Python基础05 缩进和选择 Pyth ...
- 在Linux上安装zsh
简单介绍: 相对于绝大多数linux发行版默认的shell--bash,zsh绝对是一个优秀的替代品.zsh是交互型shell,同一时候它也是一个强大的编程语言,很多bash,ksh,tcsh优秀的地 ...