编程 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代码

Jan 01 Javascript

一个JQuery写的点击上下滚动的小例子

Aug 27 Javascript

JS特权方法定义作用以及与公有方法的区别

Mar 18 Javascript

JQuery for与each性能比较分析

May 14 Javascript

JS+CSS实现的经典圆角下拉菜单效果代码

Oct 21 Javascript

javascript数据类型验证方法

Dec 31 Javascript

JavaScript实现移动端滑动选择日期功能

Jun 21 Javascript

Vue中父子组件通讯之todolist组件功能开发

May 21 Javascript

vue输入节流,避免实时请求接口的实例代码

Oct 30 Javascript

微信小程序select下拉框实现源码

Nov 08 Javascript

解决iView Table组件宽度只变大不变小的问题

Nov 13 Javascript

vue postcss-px2rem 自适应布局

May 15 Vue.js

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+xml编程之SimpleXML的应用实例

2015/01/24 PHP

PHP网络操作函数汇总

2015/05/18 PHP

JS判断数组中是否有重复值得三种实用方法

2013/08/16 Javascript

在浏览器中打开或关闭JavaScript的方法

2015/06/03 Javascript

JS实现弹性漂浮效果的广告代码

2015/09/02 Javascript

基于JavaScript实现百叶窗动画效果不只单纯flas可以实现

2016/02/29 Javascript

修复jQuery tablesorter无法正确排序的bug(加千分位数字后)

2016/03/30 Javascript

CSS3 3D 技术手把手教你玩转

2016/09/02 Javascript

使用bootstrap validator的remote验证代码经验分享(推荐)

2016/09/21 Javascript

原生js实现类似fullpage的单页/全屏滚动

2017/01/22 Javascript

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

2017/05/28 Javascript

微信小程序实现跟随菜单效果和循环嵌套加载数据

2017/11/21 Javascript

vue2.0.js的多级联动选择器实现方法

2018/02/09 Javascript

jquery.param()实现数组或对象的序列化方法

2018/10/08 jQuery

layer关闭当前窗口页面以及确认取消按钮的方法

2019/09/09 Javascript

[57:31]DOTA2-DPC中国联赛正赛 SAG vs CDEC BO3 第一场 2月1日

2021/03/11 DOTA

python3爬虫之设计签名小程序

2018/06/19 Python

python 读取目录下csv文件并绘制曲线v111的方法

2018/07/06 Python

Python学习笔记基本数据结构之序列类型list tuple range用法分析

2019/06/08 Python

Python在Matplotlib图中显示中文字体的操作方法

2019/07/29 Python

Python数据分析模块pandas用法详解

2019/09/04 Python

Python如何自动获取目标网站最新通知

2020/06/18 Python

基于Python采集爬取微信公众号历史数据

2020/11/27 Python

全网最细 Python 格式化输出用法讲解(推荐)

2021/01/18 Python

selenium+python实现基本自动化测试的示例代码

2021/01/27 Python

尼克松手表官网：Nixon手表

2019/03/17 全球购物

趣天网日本站：Qoo10 JP

2019/09/18 全球购物

物业门卫岗位职责

2013/12/28 职场文书

家长对孩子的感言

2014/03/10 职场文书

护理专业毕业生自我鉴定总结

2014/03/24 职场文书

省级优秀毕业生主要事迹

2014/05/29 职场文书

2014年商场国庆节活动策划方案

2014/09/16 职场文书

干货分享：推荐信写作技巧！

2019/06/21 职场文书

导游词之山西祁县乔家大院

2019/10/14 职场文书

CSS实现多个元素在盒子内两端对齐效果

2021/03/30 HTML / CSS

MongoDB支持的数据类型

2022/04/11 MongoDB