编程 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扩展漂亮的CheckBox(自己编写)

Nov 19 Javascript

jQuery使用元素属性attr赋值详解

Feb 27 Javascript

javascript制作2048游戏

Mar 30 Javascript

使用jquery插件qrcode生成二维码

Oct 22 Javascript

js HTML5 Ajax实现文件上传进度条功能

Feb 13 Javascript

JQuery 的跨域方法推荐_可跨任何网站

May 18 Javascript

微信小程序本作用域下调用全局JS详解及实例

Feb 22 Javascript

微信小程序两种为对象属性赋值的方式详解

Feb 23 Javascript

js实现数字从零慢慢增加到指定数字示例

Nov 07 Javascript

JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转

Nov 25 Javascript

JS数组进阶示例【数组的几种函数用法】

Jan 16 Javascript

vue中this.$http.post()跨域和请求参数丢失的解决

Apr 08 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

浅谈PHP语法(1)

2006/10/09 PHP

构建简单的Webmail系统

2006/10/09 PHP

PHP容易被忽略而出错陷阱数字与字符串比较

2011/11/10 PHP

PHP数组无限分级数据的层级化处理代码

2012/12/29 PHP

Yii2单元测试用法示例

2016/11/12 PHP

php框架CodeIgniter主从数据库配置方法分析

2018/05/25 PHP

实例解析php的数据类型

2018/10/24 PHP

Linux下安装Memcached服务器和客户端与PHP使用示例

2019/04/15 PHP

将jQuery应用于login页面的问题及解决

2009/10/17 Javascript

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

2012/03/14 Javascript

jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

2013/01/23 Javascript

javascrip关于继承的小例子

2013/05/10 Javascript

javascript实现自动输出文本（打字特效）

2015/08/27 Javascript

Jquery 全选反选实例代码

2015/11/19 Javascript

基于jquery实现即时检查格式是否正确的表单

2016/05/06 Javascript

前端微信支付js代码

2016/07/25 Javascript

JS+CSS3制作炫酷的弹窗效果

2016/11/08 Javascript

Angular 2使用路由自定义弹出组件toast操作示例

2019/05/10 Javascript

如何从头实现一个node.js的koa框架

2019/06/17 Javascript

原生javascript单例模式的应用实例分析

2020/02/23 Javascript

微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

2020/06/24 Javascript

[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG

2014/05/25 DOTA

Python如何实现文本转语音

2016/08/08 Python

python机器学习实战之树回归详解

2017/12/20 Python

python RabbitMQ 使用详细介绍(小结)

2018/11/08 Python

python pygame实现球球大作战

2019/11/25 Python

使用Python实现牛顿法求极值

2020/02/10 Python

利用 PyCharm 实现本地代码和远端的实时同步功能

2020/03/23 Python

pandas分组聚合详解

2020/04/10 Python

python 代码实现k-means聚类分析的思路(不使用现成聚类库)

2020/06/01 Python

小学生安全保证书

2014/02/01 职场文书

婚礼答谢宴主持词

2014/03/14 职场文书

文明城市标语

2014/06/16 职场文书

代理人委托书

2014/09/16 职场文书

2016年公司新年寄语

2015/08/17 职场文书

python实现腾讯滑块验证码识别

2021/04/27 Python