可以浮动某个物体的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 相关文章推荐
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
详解JavaScript函数
Dec 01 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
提问的智慧(2)
2006/10/09 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP中使用BigMap实例
2015/03/30 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python中除法使用的注意事项
2014/08/21 Python
详解Python自建logging模块
2018/01/29 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
tensorflow 实现数据类型转换
2020/02/17 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
结婚典礼证婚词
2014/01/11 职场文书
银行服务感言
2014/03/01 职场文书
人力资源主管职责范本
2014/03/05 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
社区护士演讲稿
2014/08/27 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Opencv实现二维直方图的计算及绘制
2021/07/21 Python