jQuery插件 -- 图片随页面滚动fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body style="margin:0;padding:0;height:2000px;">
<div style="height: 500px;background: #ccc;">this is div</div>
<img src="baloons.jpg" width="500">
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$.fn.extend({
fixedPos : function(param){
var $offTop = Number(param)>=0 ? param : 0;
this.each(function(){
var $obj = $(this);
var offTop = $obj.offset().top - $offTop;
var offLeft = $obj.offset().left;
$(window).on("scroll",function(){
var scrollTop = $(window).scrollTop();
if(scrollTop >= offTop){
$obj.css({'position':'fixed','left':offLeft,'top':$offTop});
}else{
$obj.css('position','static');
}
})
})
}
})
$("img").fixedPos(40);
</script>
</html>
jQuery插件 -- 图片随页面滚动fixed的更多相关文章
- 用jquery实现平滑的页面滚动效果
通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...
- jQuery插件实现的页面功能介绍引导页效果
新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为"TEXT"）
数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 网页引导：jQuery插件实现的页面功能介绍引导页效果
现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...
- Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
- JQuery插件：ScrollTo平滑滚动到页面指定位置
1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...
- jQuery插件--图片文字向上向左循环滚动
需要引用jquery 调用非常简单: 一. 向上滚动 $(".scroll_two").jScroll({vertical: true}); <div class=" ...
随机推荐
- 快速认识HTML及一般标签
HTML(Hype Text Language,超文本标记语言) <html >--开始标签 <head> 网页控制信息 <title>网页标题</title ...
- jquery虎牙TV3D轮播特效
css部分: *{ margin: 0px; padding: 0px; } body{ margin: 0px; padding: 0px; text-align: center; } #banne ...
- webService基础知识--认识WebService
之前在找工作的时候,有面试官问到WebService,当时没有接触过,正好现在做的项目中有用到WebService,所以就趁着业余时间来学习了. 一.简介 先来看看百度百科对WebService的解释 ...
- 基础并查集poj2236
An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated Medical team) have set up a wi ...
- 十分钟彻底理解javascript 的 this指向，不懂请砸店
函数的this指向谁,和函数在哪里被定义的,函数在哪里被执行的没有半毛钱关系,只遵守下面的规律: 在非严格模式中: 1.自执行函数里面,this永远指向window; <script> v ...
- 关于jstl.jar引用问题及解决方法
在前文SSM说到因为从MyEclipse换成了Eclipse.有些架包自动缺失. 造成:"org.apache.jasper.JasperException: This absolute u ...
- MongoDB Java Driver 3.4操作
导入jar包 <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java-dr ...
- angularjs 路由模块
1. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title& ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- 使用java API操作HDFS-相关环境的设置
用于装在编译类,即为hadoop的类路径 退出后重新登录,再使用env检查. jps可以直接使用了,表示已经设置成功. 在myclass之中创建类文件,这个myclass目录是自己创建的.