编程 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循环改变div颜色具体方法

Jun 25 Javascript

js实现checkbox全选和反选示例

May 01 Javascript

jQuery中after()方法用法实例

Dec 25 Javascript

js全选实现和判断是否有复选框选中的方法

Feb 17 Javascript

json+jQuery实现的无限级树形菜单效果代码

Aug 27 Javascript

jQuery超简单选项卡完整实例

Sep 26 Javascript

JS留言功能的简单实现案例(推荐)

Jun 23 Javascript

1秒50万字!js实现关键词匹配

Aug 01 Javascript

详谈for循环里面的break和continue语句

Jul 20 Javascript

vue修改vue项目运行端口号的方法

Aug 04 Javascript

js构建二叉树进行数值数组的去重与优化详解

Mar 26 Javascript

浅谈JS和jQuery的区别

Mar 27 jQuery

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

解析curl提交GET,POST,Cookie的简单方法

2013/06/29 PHP

php中文验证码实现示例分享

2014/01/12 PHP

PHP中使用asort进行中文排序失效的问题处理

2014/08/18 PHP

php自定义类fsocket模拟post或get请求的方法

2015/07/31 PHP

找到了一篇jQuery与Prototype并存的冲突的解决方法

2007/08/29 Javascript

[原创]js获取数组任意个不重复的随机数组元素

2010/03/15 Javascript

JavaScript中使用正则匹配多条，且获取每条中的分组数据

2010/11/30 Javascript

javascript基础知识大集锦(一) 推荐收藏

2011/01/13 Javascript

Function.prototype.bind用法示例

2013/09/16 Javascript

js获取和设置属性的方法

2014/02/20 Javascript

JSON 的正确用法探讨：Pyhong、MongoDB、JavaScript与Ajax

2016/05/15 Javascript

总结JavaScript的正则与其他语言的不同之处

2016/08/25 Javascript

js多个物体运动功能实例分析

2016/12/20 Javascript

React简单介绍

2017/05/24 Javascript

详解node child_process模块学习笔记

2018/01/24 Javascript

微信小程序Getuserinfo解决方案图解

2018/08/24 Javascript

在vue中利用v-html按分号将文本换行的例子

2019/11/14 Javascript

vue-cli设置publicPath小记

2020/04/14 Javascript

vantUI 获得piker选中值的自定义ID操作

2020/11/04 Javascript

Python的批量远程管理和部署工具Fabric用法实例

2015/01/23 Python

Python内置模块turtle绘图详解

2017/12/09 Python

Python获取CPU、内存使用率以及网络使用状态代码

2018/02/08 Python

python生成不重复随机数和对list乱序的解决方法

2018/04/09 Python

深入浅析python with语句简介

2018/04/11 Python

python实现登录密码重置简易操作代码

2019/08/14 Python

python3排序的实例方法

2020/10/20 Python

python 三种方法实现对Excel表格的读写

2020/11/19 Python

德国自然时尚和有机产品购物网站：Waschbär

2019/05/29 全球购物

地理科学专业毕业生求职信

2013/10/15 职场文书

业务主管岗位职责范本

2013/12/25 职场文书

妇产医师自荐信

2014/01/29 职场文书

广告词串烧

2014/03/19 职场文书

骨干教师事迹材料

2014/12/17 职场文书

2016幼儿园中班开学寄语

2015/12/03 职场文书

大型强子对撞机再次重启探索“第五种自然力”

2022/04/29 数码科技

MySQL数据库实验之触发器和存储过程

2022/06/21 MySQL