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(http://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"> <div class="logo"> </div> <p>我们JS图片悬浮图片效果</p> </body> </html>
以上就是经过效果测试的原创代码,感谢你对我们的支持。
相关推荐
-
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
-
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.w
-
原生JS实现图片翻书效果
下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS实现图片翻书效果-懒人图库</title> <META
-
js实现图片轮播效果
本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati
-
hammer.js实现图片手势放大效果
本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下 //图片手势放大 var reqAnimationFrame = (function() { return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var el = $('img');
-
JS实现图片翻书效果示例代码
picture.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS实现图片翻书效果</title> <META http-equiv=imag
-
JS实现当前页居中分页效果的方法
本文实例讲述了JS实现当前页居中分页效果的方法.分享给大家供大家参考.具体实现方法如下: function show_page(cur_pc) { var cp=cur_pc; //curent page count var tp=this.p; //total page count var sp=this.pc; //show page count var bp; //begin page count var ep; //end page count if(sp%2==0) sp=sp+1;
-
js实现图片轮播效果学习笔记
本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过
-
JS实现图片旋转动画效果封装与使用示例
本文实例讲述了JS实现图片旋转动画效果封装与使用.分享给大家供大家参考,具体如下: 核心封装代码如下: //图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined) { opts[i] = SearchAnim.DEFAULTS[i]; } } this.opts = opts; this.timer = null; this.elem = document.
-
JS实现图片轮播效果实例详解【可自动和手动】
本文实例讲述了JS实现图片轮播效果.分享给大家供大家参考,具体如下: 本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 以下为实现代码: 首先是html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title&g
随机推荐
- seaJs使用心得之exports与module.exports的区别实例分析
- 为SWFUpload增加ASP版本的上传处理程序
- java生成彩色附logo二维码
- js在客户端验证密码强度,兼容FireFox和IE
- php结合redis高并发下发帖、发微博的实现方法
- 保存到桌面、设为桌面且带图标的PHP代码
- PHP中获取时间的下一周下个月的方法
- 浅谈C语言共用体和与结构体的区别
- windows下安装php的memcache模块的方法
- FileSystemObject 对象
- asp中Byval与Byref的区别
- 64位windows系统下安装Memcache缓存
- Dedecms模板常用调用标签代码整理
- 解析PHP强制转换类型及远程管理插件的安全隐患
- Android开发自学笔记(三):APP布局上
- Android 轻松实现语音识别详解及实例代码
- 如何使用Android实现接口实信息在留言板显示
- Android实战教程第三篇之简单实现拨打电话功能
- 用QFunction-0.txt实现传奇世界回城石脚本
- 人机交互程序 python实现人机对话