jquery实现一些小动画二
jquery实现一些小动画二
jquery实现拖拽功能
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./reset.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
html,body{
width:100%;
height:100%;
}
.dialogmark{
position:fixed;
top:0;
left:0;
z-index:1000;
width:100%;
height:100%;
background: rgba(0,0,0,0.3);
}
.dialogbox{
position:fixed;
width:300px;
height:400px;
z-index: 1001;
background:#fff;
overflow:hidden;
}
.dialogbox h3.title{
height:35px;
line-height:35px;
padding: 0 10px;
background: #DDD;
cursor: move;
position: relative;
user-select: none;
}
.dialogbox h3 i {
position: absolute;
top:50%;
right: 10px;
margin-top: -10px;
width: 20px;
height: 20px;
font-size: 16px;
line-height: 20px;
text-align: center;
font-style: normal;
cursor: pointer;
}
</style>
</head>
<body>
<div class="dialogmark"></div>
<div class="dialogbox">
<h3 class="title">
标题
<i>X</i>
</h3>
<div class="content">
</div>
</div>
<script>
$(function(){ /*
拖拽的js实现
*/
var $dialogmark = $(".dialogmark"),
$dialogbox = $(".dialogbox"),
$h1 = $dialogbox.children('.title'),
$i = $h1.children('i'),
HW = $("body").innerWidth(),
HH = $("body").innerHeight(),
boxW = $dialogbox.outerWidth(),
boxH = $dialogbox.outerHeight(); $i.click(function(){
$dialogbox.hide(300)
}) //计算盒子位置
var calPosition = function(){
//获取当前窗口的大小
$dialogbox.css({
top:(HH - boxH)/2,
left:(HW - boxW)/2
})
}
calPosition()
var dragstart = function(event){
var mX = event.clientX, //获取原始鼠标位置X位置
mY = event.clientY, //获取原始鼠标位置Y位置
boxSX = $dialogbox.position().left,
boxSY =$dialogbox.position().top;
//这里可以利用传递参数，也可以给元素赋值自定义属性保存变量值
$(document).on("mousemove",{mX,mY,boxSX,boxSY},dragmove)
}
var dragmove = function(event){
var {mX,mY,boxSX,boxSY}= event.data,
mMX = event.clientX, //移动鼠标的当前X位置
mMY = event.clientY, //移动鼠标的当前Y位置
mcX = mMX - mX, //鼠标改变X位置
mcY = mMY - mY, //鼠标改变Y位置
boxcX = boxSX + mcX, //盒子需要改变的X位置
boxcY = boxSY + mcY, //盒子需要改变的Y位置
minL = 0, //盒子最小移动X距离
minT = 0, //盒子最小移动Y距离
maxL = HW - boxW,//盒子最大移动X距离
maxT = HH - boxH;//盒子最大移动Y距离 boxcX = boxcX < minL?minL:(boxcX>maxL?maxL:boxcX) //X边界判断
boxcY = boxcY < minT?minT:(boxcY>maxT?maxT:boxcY) //Y边界判断
$dialogbox.css({
left:boxcX,
top:boxcY
})
}
var dragend = function(){
//快速拖拽存在鼠标丢失焦点问题
$(document).off("mousemove",dragmove)
}
$h1.mousedown(dragstart)
$(document).mouseup(dragend)
})
效果图：
注意：
拖拽中存在的问题：
在拖拽中存在一个问题，就是如果鼠标拖拽过快，盒子是需要计算罪行位置的，但是
计算速度跟不上鼠标的移动速度，导致鼠标离开了盒子，那么此时鼠标的任何事件都与盒子
无关了，即鼠标抬起不会触发接触绑定事件，鼠标移动也不会触发定义在盒子的鼠标移动事件
解决思路：
1、使用setCapture与releaseCapture方法。注意google浏览器不支持这两个方法
将鼠标与当前元素绑在一起，无论你移动多快，我都绑定在一起
this.setCapture()
将鼠标与当前元素解绑。与setCapture相反
this.releaseCapture()
2、鼠标移动在快也脱离不了document即当前文档，因此，
我们可以给document绑定mousemove方法，那么鼠标在文档中移动都会触发mosemove绑定的事件
注意：重新绑定document时，存在this指向（如果原本用了this）问题（解决思路：使用bind方法）
jquery实现一些小动画二的更多相关文章
- jquery实现一些小动画一
jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- WPF之小动画二
上一篇文章简单介绍了动画的定义方法和一些控制动画的方法,并没有涉及复杂属性的动画处理方式,本文将继续动画的其它方面的使用. 写在前面(对于一些动画操作时候的建议): 1.如果希望某个元素从显示到消失, ...
- 利用jQuery实现用户名片小动画
我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- 关于JQuery（最后一点动画效果*）
1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...
- Jquery自定义扩展方法（二）--HTML日历控件
一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...
- 如何制作网页小动画？——gif or png
一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...
- jquery IE6 下animate 动画的opacity无效
jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~
- js、jQuery实现2048小游戏
2048小游戏 一.游戏简介: 2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...
随机推荐
- CodeForces - 1248D1 （思维+暴力）
题意 有一个括号序列,你可以选择两个位置i,j(i可以等于j),进行交换.使得最后的循环位置(i的数目)最大. 循环位置:i(0<=i<len),将前i个字符移到最后,得到的新序列是合法的 ...
- C# 内存管理（一）
引用地址:https://blog.csdn.net/libohuiyuan/article/details/81030010 一.变量类型 C#的变量类型分为值类型,引用类型.指针类型和指令类型.所 ...
- 历届试题 青蛙跳杯子-(bfs)
题目:http://lx.lanqiao.cn/problem.page?gpid=T448 题意:有两个字符串例如*WWBB和WWBB*,*每次能往左或右跳1-3步,与原位置的字符交换,问最少步数跳 ...
- 重构与模式 (Joshua Kerievsky 著)
第1章 本书的写作缘由 第2章 重构 第3章 模式 第4章 代码坏味 第5章 模式导向的重构目录 第6章 创建 第7章 简化 第8章 泛化 第9章 保护 第10章 聚集操作 第11章 实用重构 参考文 ...
- git pull --rebase的理解
在使用git的过程中经常需要使用到git pull命令,在更新远端代码的同时如果与本地代码产生冲突了, 那么冲突的文件中就出现了需要手动合并的部分,而git pull --rebase不同的地方则是当 ...
- WIFI Portal登录
开头 关于 ANDROID 5.0-7.1.2 网络图标上的感叹号及其解决办法-狐狸的小小窝 HTTP状态码之204 No Content 原理 访问generate_204地址,如果得到状态码是20 ...
- QListWidget QListView QListWidgetItem样式设置
两种方式都可以,一个通用,一个具体 //具体 QListWidget#listWidget_param::Item:hover, QListWidget#listWidget_param::Item: ...
- ASP.NET Core快速入门（第2章：配置管理）- 学习笔记(转载)
原文地址:https://mp.weixin.qq.com/s?__biz=MjM5NjMzMzE2MA==&mid=2451733443&idx=2&sn=6d01721c5 ...
- c#DateTime与unix时间戳互相转换
public class UnixTimeUtil { /// <summary> /// 将dateTime格式转换为Unix时间戳 /// </summary> /// & ...
- 03Shell条件测试
条件测试 Shell 条件测试 格式 1: test 条件表达式 格式 2: [ 条件表达式 ] 格式 3: [[ 条件表达式 ]] 具体参数说明可以通过 man test 进行查看 文件测试 [ 操 ...