Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

无论窗口如何变化,图片的中间部分一直位于浏览器中

Posted on 2017年4月26日 by king2088

由于开发需要,为了能够在各个设备中都能保持一个不错的效果,而设计师给的slider图片大部分仅中间有图片,而图片的长度都是2500px,二两边基本都是纯色。在手机设备上浏览时你就会发现,如果我们将图片的宽度设置为100%,那么图片就是缩放得非常小,以致于无法看清中间部分的图片。因此,就需要在窗口变化的过程中,让图片的中间部分一直处于浏览器可见范围内。
刚开始我使用了@media来进行实现,也就是说直接设置图片的宽度为固定的,而图片外面有一个容器,此容器宽度为100%,并且将图片超出部分所隐藏。这样一来,那么我就可以通过margin-left属性设置为负值,即可移动图片中心部位到相应的地方。但是这个方法确实不行,因为你得写很多不同px的设备。很麻烦,而且经常有各种bug,难以解决。最终我选择了jQuery。

1、需求分析

首先监听窗口的宽度,当宽度小于多少的时候,我们再去设置margin-left的值。
而margin-left的值又要该如何计算?
因为我们需要当窗口宽度小于我们所设置的图片宽度时才进行执行margin-left,因此,假如你设置了image的宽度为1200px,那么我们需要使用下面的计算方式:
1200-当前窗口的宽度=被窗口隐藏的图片宽度
这个仅仅是得到了呗窗口隐藏的右边部分图片的宽度,我们再将其除以2之后也就是,被窗口隐藏的图片宽度的一半,这就得到了我们该向左边margin多少。最终得到的计算方式应该如下:
margin-left:-(image_width – window_width)/2
image_width图片的宽度,window_width即当前窗口的宽度
由于需要向左边移动,所以margin-left的值应该是负值。

2、代码示例






Document






发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme