编程 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实现iframe动态调整高度的代码

Jan 06 Javascript

在JavaScript中监听IME键盘输入事件

May 29 Javascript

js判断浏览器类型的方法

Aug 07 Javascript

jquery实现图片灯箱明暗的遮罩效果

Nov 15 Javascript

JavaScript strike方法入门实例（给字符串加上删除线）

Oct 17 Javascript

jsMind通过鼠标拖拽的方式调整节点位置

Apr 13 Javascript

jQuery使用中可能被XSS攻击的一些危险环节提醒

May 24 Javascript

浅谈JavaScript 中有关时间对象的方法

Aug 15 Javascript

详解vue 中使用 AJAX获取数据的方法

Jan 18 Javascript

javascript验证form表单数据的案例详解

Mar 25 Javascript

jquery实现动态创建form并提交的方法示例

May 27 jQuery

Ant Design的Table组件去除

Oct 24 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

探讨PHP JSON中文乱码的解决方法详解

2013/06/06 PHP

详解PHP数据压缩、加解密(pack, unpack)

2016/12/17 PHP

PHP验证终端类型是否为手机的简单实例

2017/02/07 PHP

PHP多线程模拟实现秒杀抢单

2018/02/07 PHP

js 跨域和ajax 跨域问题小结

2009/07/01 Javascript

javascript 实现秒杀,团购倒计时展示的记录分享

2013/07/12 Javascript

jquery设置text的值示例(设置文本框 DIV 表单值)

2014/01/06 Javascript

原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

2016/06/21 Javascript

js弹性势能动画之抛物线运动实例详解

2017/07/27 Javascript

利用jquery如何从json中读取数据追加到html中

2017/12/01 jQuery

基于Vue的ajax公共方法(详解)

2018/01/20 Javascript

解决vue字符串换行问题(绝对管用)

2020/08/06 Javascript

vue 将多个过滤器封装到一个文件中的代码详解

2020/09/05 Javascript

JQuery+drag.js上传图片并且实现图片拖曳

2020/11/18 jQuery

[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard

2020/04/28 DOTA

python获得两个数组交集、并集、差集的方法

2015/03/27 Python

python字符串的常用操作方法小结

2016/05/21 Python

Python脚本获取操作系统版本信息

2016/12/17 Python

python多维数组切片方法

2018/04/13 Python

Python2和3字符编码的区别知识点整理

2019/08/08 Python

python同时替换多个字符串方法示例

2019/09/17 Python

python 一维二维插值实例

2020/04/22 Python

python实现四人制扑克牌游戏

2020/04/22 Python

Python爬虫入门有哪些基础知识点

2020/06/02 Python

pandas DataFrame运算的实现

2020/06/14 Python

Virtualenv 搭建 Py项目运行环境的教程详解

2020/06/22 Python

Python3爬虫中Ajax的用法

2020/07/10 Python

农民致富事迹材料

2014/01/23 职场文书

关于运动会的广播稿50字

2014/10/17 职场文书

项目技术负责人岗位职责

2015/04/13 职场文书

2015年财务经理工作总结

2015/05/13 职场文书

火锅店的开业营销方案范本！

2019/07/05 职场文书

golang 如何用反射reflect操作结构体

2021/04/28 Golang

SQL Server携程核心系统无感迁移到MySQL实战

2022/06/01 SQL Server

nginx访问报403错误的几种情况详解

2022/07/23 Servers