首頁 web前端 js教程 DIV隨捲軸滾動而滾動的實現代碼【推薦】_jquery

DIV隨捲軸滾動而滾動的實現代碼【推薦】_jquery

May 16, 2016 pm 03:05 PM
div 捲動 捲軸

記得以前寫這樣的程式碼比較麻煩,現在有了JQuery簡單多了,就幾行程式碼搞定!

<script type="text/javascript" src="Js/jquery-1.7.2.min.js"></script> 
  <script type="text/javascript"> 
    $(function() { 
      $(window).scroll(function() { 
        var top = $(window).scrollTop()+200; 
        var left= $(window).scrollLeft()+320; 
        $("#editInfo").css({ left:left + "px", top: top + "px" }); 
      }); 
    }); 
  </script> 
 
  <div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;"> 
    <div>用户名:<input type="text" /></div> 
    <div>密码:<input type="text" /></div> 
    <div>年龄:<input type="text" /></div> 
    <div>备注:<input type="text" /></div> 
    <div><input type="button" value="保存" /></div> 
  </div> 
登入後複製

以上這篇DIV隨捲軸滾動而滾動的實現代碼【推薦】就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>掩蓋:探險33-如何獲得完美的色度催化劑
2 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1677
14
CakePHP 教程
1430
52
Laravel 教程
1333
25
PHP教程
1278
29
C# 教程
1257
24
微軟將 Windows 11 的 Fluent 捲軸引入 Google Chrome 微軟將 Windows 11 的 Fluent 捲軸引入 Google Chrome Apr 14, 2023 am 10:52 AM

與 Windows 10 不同,Windows 11 具有新的現代“流暢捲軸”,當使用者與之互動時會改變形狀。 Fluent 捲軸本質上是動態的,它們會在不同的外形尺寸或當您更改視窗大小時自動縮放,並且它目前在設定、媒體播放器等應用程式中使用。根據微軟的一項新提議,Google瀏覽器可能很快就會擁有流暢的捲軸功能。微軟在一份提案中表示,他們希望對 Chrome 中的舊捲軸進行現代化

JavaScript 如何實作捲動到指定元素位置的功能? JavaScript 如何實作捲動到指定元素位置的功能? Oct 22, 2023 am 08:12 AM

JavaScript如何實現捲動到指定元素位置的功能?在網頁中,當我們需要將使用者的視線聚焦到某個特定的元素位置時,我們可以使用JavaScript來實現滾動到指定元素位置的功能。本文將介紹如何透過JavaScript實現此功能,並提供對應的程式碼範例。首先,我們需要取得目標元素的位置資訊。可以使用Element.getBoundingClient

react怎麼隱藏捲軸滾動 react怎麼隱藏捲軸滾動 Dec 21, 2022 pm 03:38 PM

react隱藏滾動條滾動的方法:1、開啟對應的「react-native」檔案;2、透過horizo​​ntal設定水平滾動;3、透過設定「showsHorizo​​ntalScrollIndicator」的值為「false」來隱藏水平捲軸即可。

監控iframe的滾動行為 監控iframe的滾動行為 Feb 18, 2024 pm 08:40 PM

如何監聽一個iframe的滾動,需要具體程式碼範例當我們在網頁中使用iframe標籤嵌入其他網頁時,有時需要對iframe中的內容進行一些特定的操作。其中一個常見的需求是監聽iframe的捲動事件,以便在捲動發生時執行對應的程式碼。以下將介紹如何使用JavaScript來監聽一個iframe的捲動,並提供具體的程式碼範例供參考。在取得iframe元素首先,我們需要

Mac系統捲軸怎麼設定始終顯示-捲軸設定始終顯示的方法 Mac系統捲軸怎麼設定始終顯示-捲軸設定始終顯示的方法 Mar 18, 2024 pm 06:22 PM

近日有一些小夥伴諮詢小編Mac系統滾動條怎麼設定始終顯示?下面就為大家帶來了Mac系統滾動條設定始終顯示的方法,有需要的小伙伴可以來了解了解哦。第一步:在系統開始選單,選擇【系統偏好設定】選項。第三步:在系統偏好設定頁面,選擇【通用】選項。第三步:在通用頁面,選擇【始終】顯示捲軸。

HTML、CSS和jQuery:製作一個自動滾動的公告欄 HTML、CSS和jQuery:製作一個自動滾動的公告欄 Oct 27, 2023 pm 06:31 PM

HTML、CSS和jQuery:製作一個自動滾動的公告欄在現代網頁設計中,公告欄常常被用來重要的訊息傳達和吸引使用者註意。一個自動滾動的公告欄在網頁上受到了廣泛的應用,它能夠讓公告內容以動畫形式在頁面中滾動顯示,提高資訊的展示效果和用戶體驗。本文將介紹如何使用HTML、CSS和jQuery來製作一個自動捲動的公告欄,並提供具體的程式碼範例。首先,我們需要一個HT

css怎麼實作div缺一個角 css怎麼實作div缺一個角 Jan 30, 2023 am 09:23 AM

css實作div缺少一個角的方法:1、建立一個HTML範例文件,並定義一個div;2、給div設定寬高背景色;3、給需要刪除一角的div增加一個偽類,將偽類設定成跟背景色一樣的顏色,然後旋轉45度,再定位到需要去除的那個角落即可。

如何在Vue中實現全螢幕滾動效果 如何在Vue中實現全螢幕滾動效果 Nov 08, 2023 am 08:42 AM

如何在Vue中實現全螢幕滾動效果在網頁設計中,全螢幕滾動效果可以帶給使用者非常獨特且流暢的瀏覽體驗。本文將介紹如何在Vue.js中實現全螢幕滾動效果,以及具體的程式碼範例。為了實現全螢幕滾動效果,我們首先需要使用Vue.js框架來建立專案。在Vue.js中,我們可以使用vue-cli來快速建立一個專案骨架。接著我們需要引入一些第三方函式庫來實現滾動效果,例如fullpage

See all articles