object_jqueryをfloatできるjqueryコントロールの使用例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

object_jqueryをfloatできるjqueryコントロールの使用例

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

浮く

この記事の例では、オブジェクトをフローティングできる 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 プログラミング設計に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS和jQuery：制作一个带有浮动效果的按钮Oct 24, 2023 pm 12:09 PM

HTML、CSS和jQuery：制作一个带有浮动效果的按钮，需要具体代码示例引言：如今，网页设计已成为一种艺术形式，通过使用HTML、CSS和JavaScript等技术，我们能够为页面增加各种各样的特效和交互效果。本文将简要介绍如何用HTML、CSS和jQuery制作一个带有浮动效果的按钮，并提供具体的代码示例。一、HTML结构首先，我们需要在HTML文件中

清除浮动有什么方法Feb 22, 2024 pm 04:00 PM

清除浮动有什么方法，需要具体代码示例在网页布局中，浮动是一种常用的布局方法，可以让元素脱离文档流，并相对其他元素进行定位。然而，使用浮动布局时常常会遇到一个问题，就是父元素无法正确地包裹浮动元素，导致页面产生布局错乱的情况。所以，我们需要采取措施来清除浮动，使得父元素能够正确地包裹浮动元素。清除浮动的方法有多种，下面将介绍常用的几种方法，并给出具体的代码示例

HTML布局技巧：如何使用position属性进行浮动元素控制Oct 21, 2023 am 09:22 AM

HTML布局技巧：如何使用position属性进行浮动元素控制在网页设计中，布局是非常重要的一环。通过合理的布局可以使网页更加美观、易读，提升用户体验。而在实现布局过程中，浮动元素的控制是其中一个关键点。HTML提供了position属性，通过这个属性我们可以实现对浮动元素的控制。本文将介绍如何使用position属性进行浮动元素的布局，并提供一些具体的代码

CSS 图像属性指南：outline 和 displayOct 25, 2023 am 08:57 AM

CSS图像属性指南：outline和displayCSS是前端开发中不可或缺的一部分，其中图像属性也是必不可少的。在这篇文章中，我们将重点介绍两个关于图像属性的重要概念：outline和display。本文将详细说明它们的定义、用法以及具体的代码示例。outline属性概述：outline属性用于在元素周围创建一个轮廓线，不占据布局空间。它是

CSS浮动和清除浮动：掌握浮动和清除浮动的技巧Nov 18, 2023 am 10:56 AM

CSS浮动和清除浮动：掌握浮动和清除浮动的技巧，需要具体代码示例在网页设计和开发中，CSS浮动（float）是常见的布局技术之一。使用浮动可以将元素向左或者向右移动，从而实现元素在页面中的位置调整和排列。然而，浮动元素也会给页面造成一些问题，比如父元素高度塌陷等。因此，掌握浮动的使用和清除浮动的技巧非常重要。本文将重点介绍CSS浮动和清除浮动的技巧，并提供具

CSS 布局属性大全：display，position 和 floatOct 20, 2023 pm 05:36 PM

CSS布局属性大全：display，position和floatCSS是用于控制网页样式的一种标记语言。在设计网页布局时，布局属性是非常重要的。CSS提供了多种布局属性，其中最常用的是display，position和float。在本篇文章中，我们将详细介绍这三种布局属性，并提供具体代码示例。display属性display属性用于指定元

探讨HTML中固定定位无法使用的原因Jan 20, 2024 am 10:15 AM

HTML中无法使用固定定位的问题探讨随着互联网的快速发展，网页设计也变得越来越复杂多样化。在网页设计中，经常需要使用固定定位（position:fixed）来控制元素的位置，使得页面可以实现一些特殊的效果。然而，在一些情况下，HTML中却无法使用固定定位，导致设计师们头疼不已。本文将探讨在HTML中无法使用固定定位的问题，并提供具体的代码示例。一、浮动元素

CSS 下拉菜单属性优化技巧：position 和 z-indexOct 20, 2023 pm 12:02 PM

CSS下拉菜单属性优化技巧：position和z-index在网页设计中，下拉菜单是常见的交互元素之一。通过下拉菜单，用户可以方便地选择所需的选项，提升用户体验。然而，当页面中存在多个下拉菜单时，它们的位置和层叠关系可能会产生问题。为了解决这些问题，我们可以通过使用CSS中的position属性和z-index属性来优化下拉菜单的展示效果。

See all articles