可以浮动某个物体的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 相关文章推荐
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
JS跨域问题详解
Nov 25 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
浅析Vue下的components模板使用及应用
Nov 27 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
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php简单统计在线人数的方法
2016/05/10 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
AngularJS内置指令
2015/02/04 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python 递归函数详解及实例
2016/12/27 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
化工专业大学生职业生涯规划书
2014/01/14 职场文书
高二生物教学反思
2014/01/27 职场文书
学生通报表扬范文
2015/05/04 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
JS 基本概念详细介绍
2021/10/16 Javascript