首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
移动端翻页插件dropload.js（支持Zepto和jQuery）
Jul 27 Javascript
微信小程序删除处理详解
Aug 16 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 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
ECharts(3) postcss-px2rem(1) 游标(1) GTID(1) mixin(1) ip连接(1) props(1) 临时表(1) ref(1) 表变量(1)
You might like
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
Nodejs进阶：express+session实现简易登录身份认证
2017/04/24 NodeJs
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
python实现随机梯度下降（SGD）
2020/03/24 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
python障碍式期权定价公式
2019/07/19 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
详解Python设计模式之策略模式
2020/06/15 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Python 实现一个简单的web服务器
2021/01/03 Python
世界上最悠久的自行车制造商：Ribble Cycles
2017/03/18 全球购物
三星新西兰官网：Samsung新西兰
2019/03/05 全球购物
关于是否需要写商业计划书
2014/02/07 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
卖房协议书
2014/04/11 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
法制工作总结2015
2015/07/23 职场文书
2016新年致辞
2015/08/01 职场文书
Python基础之数据结构详解
2021/04/28 Python