可以浮动某个物体的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 树控件 比较好用
Jun 11 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 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
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Django跨域请求原理及实现代码
2020/11/14 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
生产经理的自我评价分享
2013/11/07 职场文书
网络管理专业求职信
2014/03/15 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技