Rumah > Artikel > hujung hadapan web > 在JS中如何实现图片居中悬浮效果

在JS中如何实现图片居中悬浮效果

亚连asal: 2018-06-15 16:05:322373semak imbas

这篇文章给大家分享的是通过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(//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">
<p class="logo"> </p>
<p>脚本之家JS图片悬浮图片效果</p>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

在微信小程序中如何实现列表下拉刷新上拉加载效果？

在vue+webpack中如何实现异步组件加载？

在vue.js中使用Nginx来解决跨域

在JavaScript中如何实现求最大公共子串

Atas ialah kandungan terperinci 在JS中如何实现图片居中悬浮效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript nginx vue.js webpack JS bom 异步微信小程序

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在JS中如何实现标签滚动切换Artikel seterusnya：gulp模块的方法

Artikel berkaitan

Lihat lagi