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

解析瀑布流布局:JS+绝对定位的实现

May 08 Javascript

基于jquery异步传输json数据格式实例代码

Nov 23 Javascript

使用jQuery实现的掷色子游戏动画效果

Mar 14 Javascript

js 动态修改css文件用到了cssRule

Aug 20 Javascript

Bootstrap项目实战之子栏目资讯内容

Apr 25 Javascript

自制微信公众号一键排版工具

Sep 22 Javascript

Javascript计算二维数组重复值示例代码

Dec 18 Javascript

jQuery实现的背景颜色渐变动画效果示例

Mar 24 jQuery

Node.js+ES6+dropload.js实现移动端下拉加载实例

Jun 01 Javascript

js实现关闭网页出现是否离开提示

Dec 07 Javascript

JavaScript中Dom操作实例详解

Jul 08 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 ci框架验证码实例分析

2013/06/26 PHP

分享下PHP register_globals 值为on与off的理解

2013/09/26 PHP

PHP实现二叉树的深度优先与广度优先遍历方法

2015/09/28 PHP

php图像验证码生成代码

2017/06/08 PHP

js本身的局限性别让javascript做太多事

2010/03/23 Javascript

jquery中子元素和后代元素的区别示例介绍

2014/04/02 Javascript

javascript实现阻止iOS APP中的链接打开Safari浏览器

2014/06/12 Javascript

JavaScript实现自动对页面上敏感词进行屏蔽的方法

2015/07/27 Javascript

基于jquery实现ajax无刷新评论

2020/08/19 Javascript

用JS实现轮播图效果（二）

2016/06/26 Javascript

BootStrap+Angularjs+NgDialog实现模式对话框

2016/08/24 Javascript

JS控制HTML元素的显示和隐藏的两种方法

2016/09/27 Javascript

bootstrap table分页模板和获取表中的ID方法

2017/01/10 Javascript

vue双向绑定简要分析

2017/03/23 Javascript

js编写简单的计时器功能

2017/07/15 Javascript

原生JS实现逼真的图片3D旋转效果详解

2019/02/16 Javascript

vue中使用mxgraph的方法实例代码详解

2019/05/17 Javascript

js实现踩五彩块游戏

2020/02/08 Javascript

vue使用echarts画组织结构图

2021/02/06 Vue.js

详解Python中类的定义与使用

2017/04/11 Python

Tensorflow之构建自己的图片数据集TFrecords的方法

2018/02/07 Python

Python文本处理之按行处理大文件的方法

2018/04/09 Python

python实现括号匹配的思路详解

2018/08/23 Python

详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击

2018/10/09 Python

用Python编写一个简单的CS架构后门的方法

2018/11/20 Python

在tensorflow中实现屏蔽输出的log信息

2020/02/04 Python

Python基于gevent实现高并发代码实例

2020/05/15 Python

苹果香港官方商城：Apple香港

2016/09/14 全球购物

临床医学大学生求职信

2013/09/28 职场文书

党课学习思想汇报

2014/01/02 职场文书

会计工作决心书

2014/03/11 职场文书

乡镇信息公开实施方案

2014/03/23 职场文书

公务员诚信承诺书

2014/05/26 职场文书

小学教师工作总结2015

2015/04/07 职场文书

2015年社区妇联工作总结

2015/04/21 职场文书

七年级思品教学反思

2016/02/20 职场文书