可以浮动某个物体的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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
初步了解javascript面向对象
Nov 09 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
深入解析nodejs HTTP服务
2017/07/25 NodeJs
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python计算三维矢量幅度的方法
2015/06/15 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python文件写入write()的操作
2019/05/14 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
商务专员岗位职责
2013/11/23 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
党员领导干部承诺书
2014/05/28 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
运动会班级前导词
2015/07/20 职场文书
女方家长婚礼致辞
2015/07/27 职场文书