可以浮动某个物体的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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
js本地图片预览实现代码
Oct 09 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
基于vue--key值的特殊用处详解
Jul 31 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
初三化学教学反思
2014/01/23 职场文书
先进事迹报告会感言
2014/01/24 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
法院答辩状格式
2015/05/22 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书