可以浮动某个物体的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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
Jquery api 速查表分享
Jan 12 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
一文了解Vue中的nextTick
May 06 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
React配置子路由的实现
Jun 03 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程序中防止盗链
2008/04/09 PHP
微信支付开发告警通知实例
2016/07/12 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python利用datetime模块计算时间差
2015/08/04 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python安装whl文件过程图解
2020/02/18 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
学年末自我鉴定
2014/01/21 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
四年级小学生评语
2014/12/26 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
五年级作文之成长
2019/09/16 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers