可以浮动某个物体的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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
childNodes.length与children.length的区别
May 14 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
微信小程序上传图片到php服务器的方法
May 23 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php+mysql分页代码详解
2008/03/27 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Django Celery异步任务队列的实现
2019/07/24 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python list和str互转的实现示例
2020/11/16 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
国贸专业求职信
2014/06/28 职场文书
国庆宣传标语
2014/06/30 职场文书
学校联谊协议书
2014/09/16 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python