可以浮动某个物体的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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
jquery 选择器部分整理
Oct 28 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 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
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Python实现两个list对应元素相减操作示例
2017/06/09 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python获取linux系统信息的三种方法
2020/10/14 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
品质口号大全
2014/06/17 职场文书
学生实习证明范文
2014/09/28 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
高一军训感想
2015/08/07 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
讲解Python实例练习逆序输出字符串
2022/05/06 Python
HttpClient实现文件上传功能
2022/08/14 Java/Android