可以浮动某个物体的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 相关文章推荐
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
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 each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
AngularJS快速入门
2015/04/02 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
某公司Java工程师面试题笔试题
2016/03/27 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
继承权公证书
2014/04/09 职场文书
学生自我评语大全
2014/04/18 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
党员三严三实心得体会
2014/10/13 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers