网站Bannr适应大小屏幕,图片始终居中不被压缩
网站banner一般都是2000px以上的宽度,为了让在小的屏幕上图片不被压缩并且是居中表现:
方法是让包裹图片全部的那个大容器始终正居中
<!-- banner -->
<div id="sy_top">
<div class="sy_bigbox">
<div id="sy_picbox" class="sy_picbox">
<a href="#" target="_blank">
<img src="${ctx }/static/img/banner_1209a.jpg"/>
</a>
<a href="#" target="_blank">
<img src="${ctx }/static/img/banner_1209b.jpg"/>
</a>
<a href="#" target="_blank">
<img src="${ctx }/static/img/banner_1209c.jpg"/>
</a>
</div>
</div>
<!-- 都点 -->
<div id="sy_bigpicbtn" class="sy_bigpicbtn"></div>
</div>
css写法
/*------------------------ banner ------------------------*/
.sy_bigbox {
position: relative;
width: 100%;
height: 600px;
background-color: #f1f1f1;
overflow: hidden;
}
.sy_picbox {
position: absolute;
white-space: nowrap;
font-size: 0;
width: 100%;
left: 50%;
margin-left: -1000px;
top: 0px;
}
.sy_bigpicbtn {
position: absolute;
width: 100px;
height: 25px;
top: 690px;
left: 0px;
width: 100%;
text-align: center;
}
.sy_bigpicbtn a {
display: inline-block;
width: 50px;
height: 2px;
background-color: #b2c7cd;
margin-right: 10px;
}
.sy_bigpicbtn a.active {
background-color: #687477;
-webkit-animation: dh2 0.7s linear infinite;
}
js 实现轮播动画
var sindex = 0;
var prewindex = 0;
var timeindex = setInterval(doscroll, 3000);
var num = $(".sy_picbox a").length;
var html = "";
for(var i = 0;i<num;i++){
html+= '<a id="a'+i+'" href="#" class=""></a>';
}
$('.sy_bigpicbtn').append(html);
function doscroll() {
prewindex = sindex;
if (sindex != $(".sy_picbox a").length - 1)
sindex++
else
sindex = 0;
$(".sy_bigpicbtn a").removeClass("active")
$(".sy_bigpicbtn a").eq(sindex).addClass("active");
$(".sy_picbox a").hide();
$(".sy_picbox a").eq(sindex).fadeIn(500);
}
网站Bannr适应大小屏幕,图片始终居中不被压缩的更多相关文章
- bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
- css未知大小的图片居中
未知大小的图片在指定大小的div盒子中垂直水平居中: 无需要JS <style> .box { /*垂直居中*/ display: table-cell; vertical-align:m ...
- CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- Android 截取屏幕图片并保存
Android市场上有很多屏幕截图软件,把当前屏幕截取出来并保存,这一节我们就来看看屏幕截图的具体实现. 操作步骤: 1.创建一片屏幕大小的缓冲区,用于存放屏幕大小的图片 Bitmap bitmap ...
- css全局定位内容图片自动居中
最近在做一个资讯站点时候,因为采集的数据,图片不居中,导致界面很不美观,所以需要全局定义下图片输出时候进行居中. .content img { max-width:800px;_width:expre ...
- html/css系列-图片上下居中
本文详情:http://www.zymseo.com/276.html图片上下居中的问题常用的几种方法:图片已知大小和未知大小,自行理解 .main{ width: 400px;height: 400 ...
- Qt自适应大小显示图片,添加菜单
由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
- Wordpress文章图片不居中与开头缩进问题
//段落开头缩进 .Mid2L_con p {text-indent:2em;} //文章内图片不居中(设置居中后) .Mid2L_con .aligncenter { display: block; ...
随机推荐
- 搭建http服务
一.本地测试 访问的地址为:localhost或者127.0.0.1
- 在本地调试移动设备上的页面——神器weinre介绍
平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有dev ...
- Wrong list
1.背包dp[i][j]无论当前物品是否不大于j都可以转移dp[i-1][j] 2.循环从0开始还是1开始的问题 3.无向图边集数组开两倍 4.(3*987654321) > maxint 4. ...
- js构造函数的方法与原型prototype
把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法 函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们 ...
- linux 下串口独占方式打开
参考文章: http://blog.csdn.net/rl529014/article/details/51336161 http://blog.csdn.net/lin_fs/article/de ...
- SubMenu的setHeaderView使用时发现的问题
SubMenu android.view.SubMenu.setHeaderView(View view) 上面是这个方法的完整签名,作用就是自定义子菜单的菜单头,但是在OptionsMenu里面设置 ...
- web自动化工具-Browsersync
web自动化工具-Browsersync browser-sync才是神器中的神器,和livereload一样支持监听所有文件.可是和livereload简单粗暴的F5刷新相比,browsersync ...
- BZOJ4318——OSU!
1.题意:一个序列,连续的一段1对得分具有贡献,那么问期望得分 2.分析:一道裸的期望dp,那么新加入一个1,对答案的贡献为 直接暴力算出期望的平方和期望,每次dp的时候更新一下就好了 #includ ...
- infoq 微信后台存储架构
infoq 上微信后台存储架构 视频很是值得认真一听,大概内容摘要如下: 主要内容:同城分布式强一致,园区级容灾KV存储系统 - sync 序列号发生器 移动互联网场景下,频繁掉线重连,使用 ...
- javascript for循环
2016年12月28日 20:01:54 星期三 html: <a href="aaaa">AAAA</a> <a href="bbbb&q ...