JS实现图片居中悬浮效果

更新时间：2017年12月25日 10:24:11 投稿：laozhang

这篇文章给大家分享的是通过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://www.jb51.net/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>

以上就是经过效果测试的原创代码，感谢你对脚本之家的支持。

JavaScript定时器设置、使用与倒计时案例详解
这篇文章主要介绍了JavaScript定时器设置、使用与倒计时案例,详细分析了javascript定时器的设置、取消、循环调用并附带一个倒计时功能应用案例,需要的朋友可以参考下
2019-07-07
根据出生日期自动取得星座的js代码
最近这个项目需要注册时用户填写出生日期，然后自动取得星座，想想好像用后台代码太麻烦只好转而使用JavaScript。
2010-07-07
表单验证正则表达式实例代码详解
这篇文章主要介绍了表单验证正则表达式实例代码详解的相关资料,需要的朋友可以参考下
2015-11-11
JS优化冗余代码的技巧分享
这篇文章主要为大家整理了18个JavaScript优化冗余代码的技巧，文中的示例代码简洁易懂，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下
2023-08-08
php读取sqlite数据库入门实例代码
本文介绍了php读取sqlite数据库的简单例子，php编程中操作sqlite入门实例，有需要的朋友可以参考下
2014-06-06
浅谈setTimeout 与 setInterval
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的
2015-06-06
一行JavaScript代码如何实现瀑布流布局
这篇文章主要给大家介绍了如何通过一行JavaScript代码实现瀑布流布局的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
聊一聊JS中this的指向问题
这篇文章主要为大家详细介绍了聊一聊JS中this的指向问题，帮助大家轻松了解JS中this的指向，感兴趣的小伙伴们可以参考一下
2016-06-06
JS组件Bootstrap Table表格多行拖拽效果实现代码
这篇文章主要介绍了JS组件Bootstrap Table表格多行拖拽效果实现代码，需要的朋友可以参考下
2015-12-12
js实现图片轮播效果
这篇文章主要介绍了js实现图片轮播效果的相关资料,需要的朋友可以参考下
2015-12-12