可以浮动某个物体的jquery控件用法实例


Posted in Javascript onJuly 24, 2015

本文实例讲述了可以浮动某个物体的jquery控件。分享给大家供大家参考。具体如下:

js代码如下:

(function($){
  $.fn.scrolltip = function(){
    $(this).each( function() {
      var obj = $(this);
      var objtop = obj.position().top;
      $(window).scroll(function(){
        obj.css({
          top:$(window).scrollTop()+objtop,
          position:'absolute'
        });
      });
    });
  }
})(jQuery);

html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/tip.js"></script>
    </script>
    <title>JQuery</title>
  </head>
  <body><div style="height:300px;background:#eee"><span id="colspon"></span></div>
<br/>
<br/>
<br/>
<div id="float" style="width:744px;height:34px;border:1px solid #C0DBF8;"></div>
<div style="height:1000px;background:#eee"></div>
  </body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
javascript比较两个日期相差天数的方法
Jul 24 #Javascript
JAVA四种基本排序方法实例总结
Jul 24 #Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 #Javascript
node.js操作mysql(增删改查)
Jul 24 #Javascript
浅谈javascript获取元素transform参数
Jul 24 #Javascript
js实现汉字排序的方法
Jul 23 #Javascript
javascript实现全角半角检测的方法
Jul 23 #Javascript
You might like
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
2014新课程改革心得体会
2014/03/10 职场文书
售房委托书
2014/08/30 职场文书
对照检查剖析材料
2014/09/30 职场文书
红色影片观后感
2015/06/18 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL