用javascript实现大背景图的居中

//获取原图的宽度
var yuantuwidth = 1920;
//获取当前的一个元素
var dom = document.querySelector(".banner");
//当窗口大小发生变化时调用的函数
window.onresize = function(){
//用当前的函数获取视口的宽度
var viewwidth = document.documentElement.clientWidth;
//如果视口宽度小于1000时,跳出这个循环
if (viewwidth < 1000) {
return;
}
//计算图片中心需要的偏移量
var panduanwidth = (1920-viewwidth)/2;
//图片x轴的样式偏移的大小
dom.style.backgroundPositionX = -panduanwidth + "px";
}

原文地址:https://www.cnblogs.com/huyaxue/p/9118015.html

时间: 2025-01-21 20:37:12

用javascript实现大背景图的居中的相关文章

JavaScript 作用域链图详解

<script type="text/javascript"> /** * 作用域链: */ var a = "a"; function hao947(){ var b = "b"; alert(a);// output a alert(b);// output b // alert(c);// output undefind function hao(){ var c = "c"; alert(a);// out

十张javascript思维导图

下面附上十张javascript思维导图,如果把里面的内容全部掌握,那就是高手了.思维导图提供给我们一个整体的知识体系,也可以说是一种工具,废话不多说,上图: 1.javascript数据类型 2.javascript数组 3.javascript运算符 4.javascript正则表达式 5.javascript字符串函数 6.window对象 7.DOM基本操作 8.javascript变量 9.javascript函数基础 10.javascript流程控制 图片地址在这里:(复制,在浏览

清除css、javascript及背景图在浏览器中的缓存

在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的下载次数,获得更好的用户体验. 然而在版本升级或做一些css.js等调整的时候,缓存导致用户无法显示更新后的样式,这是另人头头疼的问题.除非用户自行手动升级缓存,不过几乎所有用户不会为了正常访问这个网站而去手动清除缓存,因为用户根本不知道是不是缓存的问题,而归根结底,用户就是认为你的页面存在问题,不

原生javascript轮播图!

<style> .box { width: 500px; height: 275px; position: relative; margin: 100px auto; } a { text-decoration: none; font-size: 28px; text-align: center; line-height: 80px; display: inline-block; width: 40px; color:#fff; background:rgba(0,0,0,0.6); posi

javascript的 热点图怎么写

在gis中,你如果用js来写热点图 不借助后台怎么搞,as的话比较容易有相应的类库甚至官方都有.而且用js不借助arcgis发布rest服务,(注:热点图可以借助服务的形式发布,arcgis for javascript有相应的api支持的),这个时候就比较麻烦了,首先说明下热点图是啥 热点图是以点的形式展示,通过补全周边变化颜色也会相应的调整渐变,类似于足球某个人的运动范围那种,我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js 因为arcigs for

Arcgis for Javascript之featureLayer图和属性的互操作

说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果: 显示效果 如上图所示,本文章主要实现了以下几个功能:1.FeatureLayer属性表的分页加载与显示:2.属性表和地图的互操作,包括鼠标经过时在地图上显示名称并高亮显示.点击列表显示对象的信息框,如下图: 显示信息框 下面,说说具体的实现思路与代码. 1.FeatureLayer属性表的获取 获取FeatureLayer的属性表,首先得创建FeatureLayer对象,如下: ftch

Jquery插件使用 焦点图插件 MyFocus ,另外记录一款插件 KinMaxShow大背景图插件。

以前用flash做首页图片轮播.最近的网站里用到一个插件MyFocus插件焦点图插件 用法如下: <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script> <script type="text/javascript">                             //设置                       

SuperMap iClient for JavaScript image出图

SuperMap iClient for JavaScript 客户端基于openlayers 开发. 目前最高版本为811,9D产品后推荐客户使用leaflet.openlayers客户端开发. 问题说明: iClient for JavaScript(classic)在客户端做动态出图选择SuperMap.Layer.TiledDynamicRESTLayer,对接 SuperMap iServer 的 REST 地图服务的分块动态栅格图层.简单说就是加载iServer发布的地图服务在客户端

JavaScript思维导图

javascript变量 javascript运算符 javascript数组 javascript流程语句 javascript字符串函数 javascript函数基础 javascript基础DOM操作 javascript正则表达式