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

記得以前寫這樣的程式碼比較麻煩,現在有了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
微软将 Windows 11 的 Fluent 滚动条引入 Google Chrome微软将 Windows 11 的 Fluent 滚动条引入 Google ChromeApr 14, 2023 am 10:52 AM

与 Windows 10 不同,Windows 11 具有新的现代“流畅滚动条”,当用户与之交互时会改变形状。Fluent 滚动条本质上是动态的,它们会在不同的外形尺寸或当您更改窗口大小时自动缩放,并且它目前在设置、媒体播放器等应用程序中使用。根据微软的一项新提议,谷歌浏览器可能很快就会拥有流畅的滚动条功能。微软在一份提案中表示,他们希望对 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、通过horizontal设置水平滚动;3、通过设置“showsHorizontalScrollIndicator”的值为“false”来隐藏水平滚动条即可。

HTML、CSS和jQuery:制作一个自动滚动的公告栏HTML、CSS和jQuery:制作一个自动滚动的公告栏Oct 27, 2023 pm 06:31 PM

HTML、CSS和jQuery:制作一个自动滚动的公告栏在现代网页设计中,公告栏常常被用来重要的信息传达和引起用户注意。一个自动滚动的公告栏在网页上受到了广泛的应用,它能够让公告内容以动画形式在页面中滚动显示,提高信息的展示效果和用户体验。本文将介绍如何使用HTML、CSS和jQuery来制作一个自动滚动的公告栏,并提供具体的代码示例。首先,我们需要一个HT

Mac系统滚动条怎么设置始终显示-滚动条设置始终显示的方法Mac系统滚动条怎么设置始终显示-滚动条设置始终显示的方法Mar 18, 2024 pm 06:22 PM

近日有一些小伙伴咨询小编Mac系统滚动条怎么设置始终显示?下面就为大家带来了Mac系统滚动条设置始终显示的方法,有需要的小伙伴可以来了解了解哦。第一步:在系统开始菜单,选择【系统偏好设置】选项。第三步:在系统偏好设置页面,选择【通用】选项。第三步:在通用页面,选择【始终】显示滚动条。

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

基于 ChatGPT API 的划词翻译浏览器脚本实现基于 ChatGPT API 的划词翻译浏览器脚本实现May 01, 2023 pm 03:28 PM

前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本,openai-translator,短时间内star冲到了12k,功能上除了支持翻译外,还支持润色和总结功能,除了浏览器插件外,还使用了tauri打包了一个桌面客户端,那抛开tauri是使用rust部分,那浏览器部分实现还是比较简单的,今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码,在浏览器控制台中发起请求,就可以完成翻译//示例constOPENAI_API_KEY="s

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具