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

基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼

Dec 06 Javascript

csdn 博客中实现运行代码功能实现

Aug 29 Javascript

JQuery小知识

Oct 15 Javascript

单击按钮显示隐藏子菜单经典案例

Jan 04 Javascript

JavaScript实现多个重叠层点击切换效果的方法

Apr 24 Javascript

js闭包所用的场合以及优缺点分析

Jun 22 Javascript

Bootstrap每天必学之前端开发框架

Nov 19 Javascript

在vue中使用css modules替代scroped的方法

Mar 10 Javascript

Bootstrap标签页（Tab）插件切换echarts不显示问题的解决

Jul 13 Javascript

Vue自定义指令写法与个人理解

Feb 09 Javascript

开发中常用的25个JavaScript单行代码(小结)

Jun 28 Javascript

vue项目中播放rtmp视频文件流的方法

Sep 17 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

桌面中心(一)创建数据库

2006/10/09 PHP

phplock(php进程锁) v1.0 beta1

2009/11/24 PHP

php5.2 Json不能正确处理中文、GB编码的解决方法

2014/03/28 PHP

ThinkPHP3.2.2的插件控制器功能

2015/03/05 PHP

PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】

2017/06/21 PHP

用javascript实现的激活输入框后隐藏初始内容

2007/06/29 Javascript

JS验证身份证有效性示例

2013/10/11 Javascript

利用jquery.qrcode在页面上生成二维码且支持中文

2014/02/12 Javascript

关闭页面时window.location事件未执行的原因分析及解决方案

2014/09/01 Javascript

用js读、写、删除Cookie代码续篇

2014/12/03 Javascript

JS+CSS实现大气清新的滑动菜单效果代码

2015/10/22 Javascript

Vue.js第二天学习笔记（vue-router）

2016/12/01 Javascript

JavaScript中this的用法及this在不同应用场景的作用解析

2017/04/13 Javascript

js实现盒子拖拽动画效果

2020/08/09 Javascript

Python/Django后端使用PIL Image生成头像缩略图

2019/04/30 Python

python实现大文件分割与合并

2019/07/22 Python

Pandas 缺失数据处理的实现

2019/11/04 Python

python/Matplotlib绘制复变函数图像教程

2019/11/21 Python

flask框架配置mysql数据库操作详解

2019/11/29 Python

python 求10个数的平均数实例

2019/12/16 Python

.dcm格式文件软件读取及python处理详解

2020/01/16 Python

Python中的全局变量如何理解

2020/06/04 Python

PyCharm配置anaconda环境的步骤详解

2020/07/31 Python

python将数据插入数据库的代码分享

2020/08/16 Python

Pandas对每个分组应用apply函数的实现

2020/12/13 Python

农民致富事迹材料

2014/01/23 职场文书

开会迟到检讨书

2014/02/03 职场文书

乡镇领导班子四风对照检查材料

2014/09/27 职场文书

劳动争议和解协议书范本

2014/11/20 职场文书

孕妇离婚协议书范本

2014/11/20 职场文书

高一军训口号

2015/12/25 职场文书

节水宣传标语口号

2015/12/26 职场文书

nginx proxy_cache 缓存配置详解

2021/03/31 Servers

浅谈JS和Nodejs中的事件驱动

2021/05/05 NodeJs

python画条形图的具体代码

2022/04/20 Python

Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法

2023/01/09 数码科技