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

兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现

Jul 14 Javascript

jquery实现图片渐变切换兼容ie6/Chrome/Firefox

Aug 02 Javascript

js判读浏览器是否支持html5的canvas的代码

Nov 18 Javascript

js 日期比较相关天数代码

Apr 02 Javascript

JavaScript立即执行函数的三种不同写法

Sep 05 Javascript

node.js中使用q.js实现api的promise化

Sep 17 Javascript

jQuery实现仿Google首页拖动效果的方法

May 04 Javascript

星期几的不同脚本写法(推荐)

Jun 01 Javascript

jQuery实现的可编辑表格完整实例

Jun 20 Javascript

Vue.js 表单校验插件

Aug 14 Javascript

jQuery中的类名选择器（.class）用法简单示例

May 14 jQuery

前端路由&webpack基础配置详解

Jun 10 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设计模式 Chain Of Responsibility (职责链模式)

2011/06/26 PHP

一个基于PDO的数据库操作类(新) 一个PDO事务实例

2011/07/03 PHP

php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值

2011/10/31 PHP

php后退一页表单内容保存实现方法

2012/06/17 PHP

php中的四舍五入函数代码(floor函数、ceil函数、round与intval)

2014/07/14 PHP

通过ifame指向的页面高度调整iframe的高度

2006/10/05 Javascript

让getElementsByName适应IE和firefox的方法

2007/09/24 Javascript

判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明

2009/02/18 Javascript

JS面向对象、prototype、call()、apply()

2009/05/14 Javascript

为JavaScript添加重载函数的辅助方法

2010/07/04 Javascript

JQuery动态创建DOM、表单元素的实现代码

2011/08/09 Javascript

javascript中window.event事件用法详解

2012/12/11 Javascript

用jquery实现输入框获取焦点消失文字

2013/04/27 Javascript

javascript函数重载解决方案分享

2014/02/19 Javascript

Bootstrap前端开发案例一

2016/06/17 Javascript

Vue 中使用 typescript的方法详解

2020/02/17 Javascript

Python中MYSQLdb出现乱码的解决方法

2014/10/11 Python

python在windows和linux下获得本机本地ip地址方法小结

2015/03/20 Python

python生成词云的实现方法(推荐)

2017/06/13 Python

pip安装Python库时遇到的问题及解决方法

2017/11/23 Python

Odoo中如何生成唯一不重复的序列号详解

2018/02/10 Python

在python中实现对list求和及求积

2018/11/14 Python

python生成带有表格的图片实例

2019/02/03 Python

飞利浦法国官网：Philips法国

2019/07/10 全球购物

薇姿法国官网：Vichy法国

2021/01/28 全球购物

销售代表求职自荐信

2013/10/01 职场文书

金融专业毕业生推荐信

2013/11/26 职场文书

干部现实表现材料

2014/02/13 职场文书

关于元旦的广播稿

2014/02/16 职场文书

个人批评与自我批评材料

2014/10/17 职场文书

紧急通知

2015/04/17 职场文书

男方家长婚礼致辞

2015/07/27 职场文书

Nginx域名转发使用场景代码实例

2021/03/31 Servers

elementui的el-popover修改样式不生效的解决

2021/06/30 Javascript

JavaScript严格模式不支持八进制的问题讲解

2021/11/07 Javascript

Zabbix对Kafka topic积压数据监控的问题(bug优化)

2022/07/07 Servers