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

javascript函数库-集合框架

Apr 27 Javascript

JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享

Jul 05 Javascript

利用js制作html table分页示例(js实现分页)

Apr 25 Javascript

js如何打印object对象

Oct 16 Javascript

JS中多步骤多分步的StepJump组件实例详解

Apr 01 Javascript

浅谈js图片前端预览之filereader和window.URL.createObjectURL

Jun 30 Javascript

微信js-sdk界面操作接口用法示例

Oct 12 Javascript

JS简单验证上传文件类型的方法

Apr 17 Javascript

Scala解析Json字符串的实例详解

Oct 11 Javascript

Vue实现动态创建和删除数据的方法

Mar 17 Javascript

jQuery+ajax读取json数据并按照价格排序示例

Mar 28 jQuery

给localStorage设置一个过期时间的方法分享

Nov 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实现的注册，登录及查询用户资料功能API接口示例

2017/06/06 PHP

laravel5.5安装jwt-auth 生成token令牌的示例

2019/10/24 PHP

动态的创建一个元素createElement及删除一个元素

2014/01/24 Javascript

Javascript编写俄罗斯方块思路及实例

2015/07/07 Javascript

jQuery实现仿腾讯视频列表分页效果的方法

2015/08/07 Javascript

jquery.validate表单验证插件使用详解

2017/06/21 jQuery

关于TypeScript模块导入的那些事

2018/06/12 Javascript

PostgreSQL Node.js实现函数计算方法示例

2019/02/12 Javascript

微信小程序表单验证WxValidate的使用

2019/11/27 Javascript

微信小程序request请求封装，验签代码实例

2019/12/04 Javascript

在Webpack中用url-loader处理图片和字体的问题

2020/04/28 Javascript

Vue中使用JsonView来展示Json树的实例代码

2020/11/16 Javascript

JavaScript实现页面高亮操作提示和蒙板

2021/01/04 Javascript

使用IPython来操作Docker容器的入门指引

2015/04/08 Python

用python脚本24小时刷浏览器的访问量方法

2018/12/07 Python

django 实现编写控制登录和访问权限控制的中间件方法

2019/01/15 Python

PyCharm设置每行最大长度限制的方法

2019/01/16 Python

python3正则提取字符串里的中文实例

2019/01/31 Python

Python中单线程、多线程和多进程的效率对比实验实例

2019/05/14 Python

利用Python模拟登录pastebin.com的实现方法

2019/07/12 Python

pycharm配置git(图文教程)

2019/08/16 Python

python判断两个序列的成员是否一样的实例代码

2020/03/01 Python

pycharm激活码快速激活及使用步骤

2020/03/12 Python

Python 使用Opencv实现目标检测与识别的示例代码

2020/09/08 Python

python学习之使用Matplotlib画实时的动态折线图的示例代码

2021/02/25 Python

利用CSS3实现开门效果实例源码

2016/08/22 HTML / CSS

HTML5如何使用SVG的方法示例

2019/01/11 HTML / CSS

日语专业毕业生自荐信

2013/11/11 职场文书

数控专业大学生的自我鉴定

2013/11/13 职场文书

小学生检讨书大全

2014/02/06 职场文书

高三学生评语大全

2014/04/25 职场文书

2014年环保工作总结

2014/11/26 职场文书

搞笑欢迎词大全

2015/09/30 职场文书

pytorch实现线性回归以及多元回归

2021/04/11 Python

Vue的生命周期一起来看看

2022/02/24 Vue.js

Python中第三方库Faker的使用详解

2022/04/02 Python