可以浮动某个物体的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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
vue实现表格过滤功能
Sep 27 Javascript
vue自定义树状结构图的实现方法
Oct 18 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
文明礼仪标语
2014/06/13 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server