编程 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 相关文章推荐

jquery attr方法获取input的checked属性问题

May 26 Javascript

图片放大镜jquery.jqzoom.js使用实例附放大镜图标

Jun 19 Javascript

jQuery之DOM对象和jQuery对象的转换与区别分析

Jan 08 Javascript

JQuery中Text方法用法实例分析

May 18 Javascript

jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法

Dec 12 Javascript

jQuery简单实现tab选项卡切换效果

Jun 20 Javascript

vue-cli如何添加less 以及sass

Jul 06 Javascript

jquery-file-upload 文件上传带进度条效果

Nov 21 jQuery

Node.js 使用AngularJS的方法示例

May 11 Javascript

js中的数组对象排序分析

Dec 11 Javascript

VScode格式化ESlint方法(最全最好用方法)

Sep 10 Javascript

JS实现盒子拖拽效果

Feb 06 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 多维数组排序实现代码

2009/08/05 PHP

PHP pathinfo()获得文件的路径、名称等信息说明

2011/09/13 PHP

php中json_encode中文编码问题分析

2011/09/13 PHP

PHP生成plist数据的方法

2015/06/16 PHP

Thinkphp5框架简单实现钩子(Hook)行为的方法示例

2019/09/03 PHP

Chrome中JSON.parse的特殊实现

2011/01/12 Javascript

js charAt的使用示例

2014/02/18 Javascript

javascript自定义函数参数传递为字符串格式

2014/07/29 Javascript

javascript中Function类型详解

2015/04/28 Javascript

jQuery通用的全局遍历方法$.each()用法实例

2016/07/04 Javascript

简单理解vue中实例属性vm.$els

2016/12/01 Javascript

利用JQuery实现datatables插件的增加和删除行功能

2017/01/06 Javascript

angularJS+requireJS实现controller及directive的按需加载示例

2017/02/20 Javascript

Node.js+ES6+dropload.js实现移动端下拉加载实例

2017/06/01 Javascript

jQuery取得元素标签名称小结（附代码）

2017/08/16 jQuery

JS笛卡尔积算法与多重数组笛卡尔积实现方法示例

2017/12/01 Javascript

vue+Element-ui实现分页效果实例代码详解

2018/12/10 Javascript

简单学习5种处理Vue.js异常的方法

2019/06/17 Javascript

layui固定下拉框的显示条数(有滚动条)的方法

2019/09/10 Javascript

[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场

2018/04/06 DOTA

[56:56]VG vs LGD 2019国际邀请赛淘汰赛胜者组 BO3 第一场 8.22

2019/09/05 DOTA

python基础教程之获取本机ip数据包示例

2014/02/10 Python

Django中的“惰性翻译”方法的相关使用

2015/07/27 Python

python基础知识小结之集合

2015/11/25 Python

Python实现的多项式拟合功能示例【基于matplotlib】

2018/05/15 Python

python tkinter canvas使用实例

2019/11/04 Python

python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例

2020/02/27 Python

Python递归函数特点及原理解析

2020/03/04 Python

LODI女鞋在线商店：阿利坎特的鞋类品牌

2019/02/15 全球购物

Timberland俄罗斯官方网上商店：全球领先的户外品牌

2020/03/15 全球购物

Cecil Mode法国在线商店：女性时尚

2021/01/08 全球购物

异步传递消息系统的作用

2016/05/01 面试题

业务部门经理岗位职责

2014/02/23 职场文书

机关职员工作检讨书

2014/10/23 职场文书

python3 删除所有自定义变量的操作

2021/04/08 Python

mysq启动失败问题及场景分析

2021/07/15 MySQL