js实现百度登录窗口拖拽效果


Posted in Javascript onMarch 19, 2020

前言

在我们使用百度相关的功能网页的时候,我们要去登录账号。但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢?下面分享仿百度登录拖拽效果的源码

代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #box{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: red;
  }
 </style>
 </head>
 <body>
 <div id="box"></div>
 <script type="text/javascript">
  var oBox = document.getElementById("box")
  // 鼠标按下事件
  oBox.onmousedown = function(ev){
  var ev = ev || event
  var difX = ev.clientX - oBox.offsetLeft
  var difY = ev.clientY - oBox.offsetTop
  // 紧接着需要马上去移动鼠标
  oBox.onmousemove = function(ev){
   // 这里的ev和onmousedown里面的ev不一样
   var ev = ev || event
   var oBox_left = ev.clientX - difX
   var oBox_top = ev.clientY - difY
   oBox.style.left = oBox_left + "px"
   oBox.style.top = oBox_top + "px"
  }
  // 当鼠标抬起时不要移动
  oBox.onmouseup = function(){
   oBox.onmousemove = null
  }
  }
 </script>
 </body>
</html>

总结

上面的代码就是仿百度登录窗口效果的实现,小伙伴们把代码复制到编译器上面看效果。希望对学习前端开发的小伙们有帮助。

以上就是本文的全部内容,希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
js实现随机抽奖
Mar 19 #Javascript
js实现抽奖的两种方法
Mar 19 #Javascript
js实现九宫格抽奖
Mar 19 #Javascript
在Vue.js中使用TypeScript的方法
Mar 19 #Javascript
JS实现长图上下滚动效果
Mar 19 #Javascript
JavaScript实现简单计算器
Mar 19 #Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python实现两张图片的像素融合
2019/02/23 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
简单了解python中的与或非运算
2019/09/18 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
美术指导求职信
2014/03/17 职场文书
《假如》教学反思
2014/04/17 职场文书
学校施工安全责任书
2015/01/29 职场文书
学生会副主席竞选稿
2015/11/19 职场文书