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>

以上就是经过效果测试的原创代码,感谢你对三水点靠木的支持。

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