DIV随滚动条滚动而滚动的实现代码【推荐】


Posted in Javascript onApril 12, 2016

记得以前写这样的代码比较麻烦,现在有了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随滚动条滚动而滚动的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.cookie用法详细解析
Dec 18 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue-swiper的使用教程
Aug 30 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 #Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 #Javascript
jquery中实现时间戳与日期相互转换
Apr 12 #Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 #Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 #Javascript
zTree插件下拉树使用入门教程
Apr 11 #Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 #Javascript
You might like
zf框架db类的分页示例分享
2014/03/14 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
smarty内置函数section的用法
2015/01/22 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
js运动事件函数详解
2016/10/21 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
人力资源专业推荐信
2013/11/29 职场文书
星级党支部申报材料
2014/05/31 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2014年党员整改措施
2014/10/24 职场文书
刮痧观后感
2015/06/05 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis