scroll运用、图片悬浮
scroll 滚动条 长话短说进入正题:
scrollTOP==0 内容置于顶部;
scrollTOP()>=$(document).height-$(window).height 内容置于底部
之后我写了一个效果,在鼠标滚动120像素时,content层显示,小于120像素,content层隐藏
<!--html-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>对联广告</title>
</head>
<body style="height:1000px;">
<div class="content">
</div>
</body>
</html>
<!--css-->
*{margin:0;padding:0;}
.content{width:200px;height:400px;background:#fff;display:none;position:fixed;left:0;top:30px;_position:absolute;_top:expression((offsetParent.srollTop)+0);_left:expression((offsetParent.scrollLeft)+0);z-index:999;}
<!--js-->
window.onscroll=function(){
var t=document.documentElement.scrollTop||document.body.scrollTop
if(t>120){
$(".content").fadeIn();
}else{
$(".content").fadeOut();
}
}
scroll运用、图片悬浮的更多相关文章
- JS-特效 ~ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎
ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为 ...
- css-transition和transform实现图片悬浮移动动画
今天在京东首页上看到一个效果,鼠标悬浮在图片上时,图片发生移动,鼠标移走时再移回,并且有一个过渡效果. 貌似很简单,自己做做试试吧 我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类,这个类 ...
- Dynamics CRM 自定义上传附件的图片悬浮层显示
CRM中的附件是以流的形式保存在了数据库中,这样做的一个坏处是一旦系统运行时间久,附件上传的多了势必会导致数据库极速扩大,即影响系统的运行效率也对后期的迁移维护带来了不必要的麻烦.所以很多的客户都会要 ...
- CSS3 图片悬浮缩放效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 自定义jq插件,鼠标悬浮展示图片或者视频放大图,可自定义展示内容
网站项目经常会遇到一些视频或者图片素材的展示功能,那么就需要自己写一个功能,就是在一些列表页面你想要是这个数据的详细内容,弹框在页面某个位置 例如这是视频悬浮展示效果,可自定义自动播放等属性标签 又例 ...
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...
- CSS background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- css简单的一些基础知识
css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...
随机推荐
- 循环-10. 求序列前N项和*
/* * Main.c * C10-循环-10. 求序列前N项和 * Created on: 2014年7月30日 * Author: Boomkeeper *******部分通过******* */ ...
- Azure File SMB3.0文件共享服务(2)
使用Powershell创建文件共享 Azure的文件存储结构如下所示,最基本的文件存储包含存储账号,文件共享,在文件共享下面你可以建立文件目录,上传文件: 在开始使用Powershell创建文件共享 ...
- Git学习04 --分支管理
每次commit,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而是指向master ...
- Sql Server专题:SQL 经典实例
SQL 经典实例 1.实例表: Student(S#,Sname,Sage,Ssex) 学生表 S#:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别 Course(C#,Cname ...
- 为TL-WR720N编译带mentohust和njit-client的openwrt固件
openwrt的trunk版已经支持720N了.简单好多. 首先下载openwrt源码,我下的是trunk版 svn co svn://svn.openwrt.org/openwrt/trunk/ 然 ...
- LINUX USB MASS STORAGE DRIVER流程图
- KeybMap 键盘映射工具更新至 V1.5(修订)
KeybMap 更新至 V1.5,主要是增加了对一些多媒体键定义修改功能,也可以将任意一键定义为打开指定的程序. 3月9日略做修订. http://www.mympc.org/down/1/2005- ...
- VS2010启动奔溃
最近由于项目需要,装了git,需要用bitbucket管理源代码.没想到装了git得插件后 vs2010不能启动,卸载重新安装也行,修复也不行. 解决方案: 删除 目录C:\Users\用户名\App ...
- c语言_常见图片格式判断
c语言_常见图片格式判断 我想尽各种思路.今天,终于把图片判断搞定了. 在此,我写一下我的思路.希望对那些不想看代码的朋友们有帮助. 常风的的图片格式有:bmp,png,jpg,gif等图片格式. 我 ...
- 2.2.2 胸腰差和胸臀差的应用_米人NOONE_新浪博客
2.2.2 胸腰差和胸臀差的应用_米人NOONE_新浪博客 腰差和胸臀差的应用(2009-06-16 19:24:57)转载▼标签:校园 前面已经对这两个概念作了简单的讲解.这两个概 ...