编程 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 相关文章推荐

jQuery 获取URL的GET参数值的小例子

Apr 18 Javascript

jQuery 事件的命名空间简单了解

Nov 22 Javascript

javascript点击按钮实现隐藏显示切换效果

Feb 03 Javascript

EasyUI布局高度自适应

Jun 04 Javascript

JavaScript简单实现弹出拖拽窗口（二）

Jun 17 Javascript

vue.js语法及常用指令

Oct 29 Javascript

JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

May 26 Javascript

vue项目引入Iconfont图标库的教程图解

Oct 24 Javascript

详解Vue路由自动注入实践

Apr 17 Javascript

JS实现贪吃蛇游戏

Nov 15 Javascript

Angular8 实现table表格表头固定效果

Jan 03 Javascript

Vue Elenent实现表格相同数据列合并

Nov 30 Vue.js

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

异世界新番又来了，同样是从零开始，男主的年龄降到5岁

2020/04/09 日漫

PHP递归算法的详细示例分析

2013/02/19 PHP

php计算多个集合的笛卡尔积实例详解

2017/02/16 PHP

Laravel使用RabbitMQ的方法示例

2019/06/18 PHP

JavaScript 常用函数

2009/12/30 Javascript

时间戳转换为时间年月日时间的JS函数

2013/08/19 Javascript

什么是 AngularJS？AngularJS简介

2014/12/06 Javascript

直接拿来用的15个jQuery代码片段

2015/09/23 Javascript

jQuery中的通配符选择器使用总结

2016/05/30 Javascript

js绘制购物车抛物线动画

2020/11/18 Javascript

ES6学习笔记之Set和Map数据结构详解

2017/04/07 Javascript

AngularJS中的路由使用及实现代码

2017/10/09 Javascript

JavaScript实现数组全排列、去重及求最大值算法示例

2018/07/30 Javascript

JavaScript设计模式之代理模式实例分析

2019/01/16 Javascript

JS中封装axios来管控api的2种方式

2019/09/11 Javascript

python开发的小球完全弹性碰撞游戏代码

2013/10/15 Python

用python登录Dr.com思路以及代码分享

2014/06/25 Python

Python入门_条件控制(详解)

2017/05/16 Python

使用tensorboard可视化loss和acc的实例

2020/01/21 Python

jupyter 导入csv文件方式

2020/04/21 Python

python的help函数如何使用

2020/06/11 Python

Tensorflow之MNIST CNN实现并保存、加载模型

2020/06/17 Python

Python web框架(django,flask)实现mysql数据库读写分离的示例

2020/11/18 Python

CSS3属性box-shadow使用详细教程

2012/01/21 HTML / CSS

css3强大的动画效果animate使用说明及浏览器兼容介绍

2013/01/09 HTML / CSS

Html5页面二次分享的实现

2018/07/30 HTML / CSS

时尚孕妇装：Ingrid & Isabel

2019/05/08 全球购物

简述网络文件系统NFS，并说明其作用

2016/10/19 面试题

弘扬职业精神演讲稿

2014/03/20 职场文书

小学生国旗下演讲稿

2014/04/25 职场文书

加强作风建设工作总结

2014/10/23 职场文书

门市房租房协议书

2014/12/04 职场文书

解放思想大讨论活动总结

2015/05/09 职场文书

餐厅服务员管理制度

2015/08/05 职场文书

JS 4个超级实用的小技巧提升开发效率

2021/10/05 Javascript

Nginx设置HTTPS的方法步骤 443证书配置方法

2022/03/21 Servers