JS实现图片居中悬浮效果

2019-11-19 14:39:19

字体：大中小

来源：转载

供稿：网友

这篇文章我们是用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.VeVB.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实现标签滚动切换效果

下一篇：JS+CSS实现滚动数字时钟效果