编程 Javascript

JS实现图片居中悬浮效果

Posted in Javascript onDecember 25, 2017

这篇文章我们是用JS实现一个图片悬浮的效果，在我们用鼠标下拉滚动的时候图片居中悬浮，不跟随滚动，我们先来看下效果图：

JS实现图片居中悬浮效果

下面我们来看下所有测试过的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.logo {
 width: 650px;
 height: 383px;
 position:fixed;
 background: url(https://3water.com/images/logo.gif) no-repeat;
 margin:auto;
 left:0;
 right:0;
 top:0;
 bottom:0;
}
</style>
<title>图片垂直居中不随滚动条滚动的JS代码</title>
</head>
<body style="height:3000px">
<div class="logo"> </div>
<p>三水点靠木JS图片悬浮图片效果</p>
</body>
</html>

以上就是经过效果测试的原创代码，感谢你对三水点靠木的支持。

JS实现图片居中悬浮效果

- Author -

laozhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS中引用百度地图并将百度地图的logo和信息去掉

Sep 29 Javascript

js模拟C#中List的简单实例

Mar 06 Javascript

JavaScript使用二分查找算法在数组中查找数据的方法

Apr 07 Javascript

JavaScript获得指定对象大小的方法

Jul 01 Javascript

JavaScript DOM 学习总结(五)

Nov 24 Javascript

利用node.js如何搭建一个简易的即时响应服务器

May 28 Javascript

vue中Axios的封装与API接口的管理详解

Aug 09 Javascript

JS+canvas画布实现炫酷的旋转星空效果示例

Feb 13 Javascript

jQuery实现手风琴效果（蒙版）

Jan 11 jQuery

JS函数进阶之继承用法实例分析

Jan 15 Javascript

基于ajax及jQuery实现局部刷新过程解析

Sep 12 jQuery

vue通过接口直接下载java生成好的Excel表格案例

Oct 26 Javascript

JS+CSS实现滚动数字时钟效果

Dec 25 #Javascript

Vue.js通用应用框架-Nuxt.js的上手教程

Dec 25 #Javascript

微信小程序录音与播放录音功能

Dec 25 #Javascript

利用vue + element实现表格分页和前端搜索的方法

Dec 25 #Javascript

VueRouter导航守卫用法详解

Dec 25 #Javascript

基于zTree树形菜单的使用实例

Dec 25 #Javascript

利用jQuery+localStorage实现一个简易的计时器示例代码

Dec 25 #jQuery

You might like

php 转换字符串编码 iconv与mb_convert_encoding的区别说明

2011/11/10 PHP

php中通过数组进行高效随机抽取指定条记录的算法

2013/09/09 PHP

thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)

2016/05/20 PHP

php 在字符串指定位置插入新字符的简单实现

2016/06/28 PHP

通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法

2020/04/02 PHP

node.js中的fs.readSync方法使用说明

2014/12/17 Javascript

JavaScript动态改变div属性的实现方法

2015/07/22 Javascript

Angular2中Bootstrap界面库ng-bootstrap详解

2016/10/18 Javascript

vue组件实例解析

2017/01/10 Javascript

js的OOP继承实现(必看篇)

2017/02/18 Javascript

详解angular ui-grid之过滤器设置

2017/06/07 Javascript

js实现数组内数据的上移和下移的实例

2017/11/14 Javascript

360doc网站不登录就无法复制内容的解决方法

2018/01/27 Javascript

[04:10]DOTA2英雄梦之声_第11期_圣堂刺客

2014/06/21 DOTA

[49:35]2018DOTA2亚洲邀请赛3月30日小组赛A组 KG VS TNC

2018/03/31 DOTA

PYTHON基础-时间日期处理小结

2018/05/05 Python

对Python3 解析html的几种操作方式小结

2019/02/16 Python

python射线法判断检测点是否位于区域外接矩形内

2019/06/28 Python

python实现微信小程序用户登录、模板推送

2019/08/28 Python

Python实现图片添加文字

2019/11/26 Python

基于Tensorflow批量数据的输入实现方式

2020/02/05 Python

Python Numpy,mask图像的生成详解

2020/02/19 Python

pyecharts调整图例与各板块的位置间距实例

2020/05/16 Python

keras绘制acc和loss曲线图实例

2020/06/15 Python

python matplotlib绘制三维图的示例

2020/09/24 Python

Python urlopen()参数代码示例解析

2020/12/10 Python

Funko官方商店：源自美国，畅销全球搪胶收藏玩偶

2018/09/15 全球购物

乌克兰移动电子产品和相关配件的在线商店：iTMag

2020/03/16 全球购物

土木工程专业大学毕业生求职信

2013/10/13 职场文书

《特殊的葬礼》教学反思

2014/04/27 职场文书

公司爱心捐款倡议书

2014/05/14 职场文书

股东合作协议书

2014/09/12 职场文书

2015年小学二年级班主任工作总结

2015/05/21 职场文书

大学同学聚会感言

2015/07/30 职场文书

《学会看病》教学反思

2016/02/17 职场文书

2016年六一儿童节开幕词

2016/03/04 职场文书