Frontend | LongSheng

CSS 奇思妙想边框动画

今天逛博客网站 — shoptalkshow，看到这样一个界面，非常有意思：觉得它的风格很独特，尤其是其中一些边框。嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 border 属性谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。除了最常见的 solid，dashed，CSS border 还支持 none，hidden， dotted， double， groove， ridge， inset， outset 等样式。除去 none，hidden，看看所有原生支持的 border 的样式：基础的就这些，如果希望实现一个其他样式的边框，或者给边框加上动画，那就需要配合一些其他属性，或是脑洞大开。OK，一起来看看一些额外的有意思的边框。边框长度变化先来个比较简单的，实现一个类似这样的边框效果：这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框，下、右边框，通过 hover 时改变两个伪元素的高宽即可。非常好理解。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

div {

position: relative;

border: 1px solid #03A9F3;

&::before,

&::after {

content: "";

position: absolute;

width: 20px;

height: 20px;

}

&::before {

top: -5px;

left: -5px;

border-top: 1px solid var(--borderColor);

border-left: 1px solid var(--borderColor);

}

&::after {

right: -5px;

bottom: -5px;

border-bottom: 1px solid var(--borderColor);

border-right: 1px solid var(--borderColor);

}

&:hover::before,

&:hover::after {

width: calc(100% + 9px);

height: calc(100% + 9px);

}

复制代码

CodePen Demo — width border animation 接下来，会开始加深一些难度。虚线边框动画使用 dashed 关键字，可以方便的创建虚线边框。

1

2

3

4

5

div {

border: 1px dashed #333;

}

复制代码

当然，我们的目的是让边框能够动起来。使用 dashed 关键字是没有办法的。但是实现虚线的方式在 CSS 中有很多种，譬如渐变就是一种很好的方式：

1

2

3

4

5

6

div {

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;

background-size: 4px 1px;

background-position: 0 0;

}

复制代码

看看，使用渐变模拟的虚线如下：好，渐变支持多重渐变，我们把容器的 4 个边都用渐变表示即可：

1

2

3

4

5

6

7

8

9

10

div {

background:

linear-gradient(90deg, #333 50%, transparent 0) repeat-x,

linear-gradient(0deg, #333 50%, transparent 0) repeat-y,

linear-gradient(0deg, #333 50%, transparent 0) repeat-y;

background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;

background-position: 0 0, 0 100%, 0 0, 100% 0;

}

复制代码

效果如下： OK，至此，我们的虚线边框动画其实算是完成了一大半了。虽然 border-style: dashed 不支持动画，但是渐变支持呀。我们给上述 div 再加上一个 hover 效果，hover 的时候新增一个 animation 动画，改变元素的 background-position 即可。

1

2

3

4

5

6

7

8

9

10

div:hover {

animation: linearGradientMove .3s infinite linear;

}

@keyframes linearGradientMove {

100% {

background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;

}

复制代码

OK，看看效果，hover 上去的时候，边框就能动起来，因为整个动画是首尾相连的，无限循环的动画看起来就像是虚线边框在一直运动，这算是一个小小的障眼法或者小技巧：这里还有另外一个小技巧，如果我们希望虚线边框动画是从其他边框，过渡到虚线边框，再行进动画。完全由渐变来模拟也是可以的，如果想节省一些代码，使用 border 会更快一些，譬如这样：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

div {

border: 1px solid #333;

&:hover {

border: none;

background:

linear-gradient(90deg, #333 50%, transparent 0) repeat-x,

linear-gradient(0deg, #333 50%, transparent 0) repeat-y,

linear-gradient(0deg, #333 50%, transparent 0) repeat-y;

background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;

background-position: 0 0, 0 100%, 0 0, 100% 0;

}

复制代码

由于 border 和 background 在盒子模型上位置的差异，视觉上会有一个很明显的错位的感觉：要想解决这个问题，我们可以把 border 替换成 outline，因为 outline […]

龙生 25 Jan 2021

View Details

js实现保存文件到本地

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function fake_click(obj) {

var ev = document.createEvent("MouseEvents");

ev.initMouseEvent(

"click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null

);

obj.dispatchEvent(ev);

}

function download(name, data) {

var urlObject = window.URL || window.webkitURL || window;

var downloadData = new Blob([data]);

var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")

save_link.href = urlObject.createObjectURL(downloadData);

save_link.download = name;

fake_click(save_link);

}

//调用方法

download("save.txt","内容");

from:https://www.cnblogs.com/frost-yen/p/10226705.html

龙生 19 Jan 2021

View Details

js解析websocket二进制数据包

js解释数据包做一个项目,服务器要给我发一个数据包,格式为,前面16位short,后32位int,后面就全是string,我用javascript怎么去把这个数据包解读出来? 用WebSocket,接收到的就是一个Blob对象.而我要给服务器返回的也是这种格式,我又怎么把我的数据封装成这样的数据包? ——解决方案——————--

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

var reader = {

readAs: function(type,blob,cb){

var r = new FileReader();

r.onloadend = function(){

if(typeof(cb) === 'function') {

cb.call(r,r.result);

}

try{

r['readAs'+type](blob);

}catch(e){}

}

function parseBlob(blob){

var shortVar, intVar, stringVar;

reader.readAs('ArrayBuffer',blob.slice(0,2),function(arr){

shortVar = (new Int16Array(arr))[0];

console.log(shortVar);

});

reader.readAs('ArrayBuffer',blob.slice(2,6),function(arr){

intVar = (new Int32Array(arr))[0];

console.log(intVar);

});

reader.readAs('Text',blob.slice(6,blob.size,'text/plain;charset=UTF-8'),function(result){

stringVar = result;

console.log(stringVar);

});

}

var buffer = new ArrayBuffer(6);//建立6个字节的缓冲，前两个字节是short，后四个是int

var bufferView = new Int16Array(buffer); //建立16位的视图,那么视图的长度应该是3

bufferView[0] = 32767;

bufferView[1] = 0;

bufferView[2] = 1;

//现在buffer中的内容由低位到高位应该是

//11111111 11111110 00000000 00000000 100000000 00000000

var blob = new Blob([bufferView,"words words 文本文本文本文本"]);

//构造这个blob类型

//测试一下parseBlob函数是否正确

parseBlob(blob);

//32767

//65536

//words words 文本文本文本文本

//第一个short是32767

//第二个int，前16位为0，第17位为1，所以结果是65536

//第三个字符串，和我们构造blob的时候一样

from:https://blog.csdn.net/woxingwosu0100/article/details/51273523/

龙生 16 Jan 2021

View Details

JS字符串与二进制的相互转化

1

2

3

4

5

//字符串转ascii码，用charCodeAt();

//ascii码转字符串，用fromCharCode();

var str = "A";

var code = str.charCodeAt();

var str2 = String.fromCharCode(code);

十进制转二进制

1

2

3

var a = "i";

console.log(a.charCodeAt()); //105

console.log(a.charCodeAt().toString(2)); //1101001

1

2

3

var a = "我";

console.log(a.charCodeAt()); //25105

console.log(a.charCodeAt().toString(2)); //110001000010001

1

2

3

4

var a = "我们";

console.log(a.length); //2

var list = a.split("");

console.log(list.length); //2 console.log(a.charCodeAt().toString(2)); //110001000010001 100111011101100

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//将字符串转换成二进制形式，中间用空格隔开

function strToBinary(str){

var result = [];

var list = str.split("");

for(var i=0;i<list.length;i++){

if(i != 0){

result.push(" ");

}

var item = list[i];

var binaryStr = item.charCodeAt().toString(2);

result.push(binartStr);

}

return result.join("");

}

console.log(strToBinary("我们")); //110001000010001 100111011101100

console.log(strToBinary("@%$+")); //1000000 100101 100100 101011

//将二进制字符串转换成Unicode字符串

function binaryToStr(str){

var result = [];

var list = str.split(" ");

for(var i=0;i<list.length;i++){

var item = list[i];

var asciiCode = parseInt(item,2);

var charValue = String.fromCharCode(asciiCode);

result.push(charValue);

}

return result.join("");

}

console.log(binaryToStr("110001000010001 100111011101100")); //我们

console.log(binaryToStr("1000000 100101 100100 101011")); //@%$+

转载请注明出处：http://www.cnblogs.com/it-deepinmind/ from:https://www.cnblogs.com/it-deepinmind/p/7430025.html

龙生 16 Jan 2021

View Details

axios全局设置url公共请求头

需求由来：公司项目外链到别公司项目或者网页（通俗的说就是通过别的随意网页跳转至你项目网页），这时公司项目就要区分是从哪个公司或者哪个网页跳转过来的，从而进行不同的接口请求（公司所有接口都要带上请求头）。大部分做法都是设置请求头来区分。做法如下：废话不多说直接上代码通俗易懂：新建一个配置文件requst.js 内容如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

import axios from 'axios';

// 设置公共请求头

const init = function () {

let url = window.location.search.toString() // 获取外链过来的连接参数部分

let arr = []

let obj = {} // 预封装集合

arr = url.split('&') // 对参数切割处理在封装

arr.forEach(l => {

l = l.split('=')

obj[l[0]] = l[1]

})

// 具体有哪些参数看你们后台定义了哪些下面的参数有 osType、deviceId、deviceChannel、language .....

axios.defaults.headers.common['deviceChannel'] = 'gclife_bmp_pc';

axios.defaults.headers.common['language'] = window.localStorage.defaultLanguage;

// 有则赋值

obj.osType ? axios.defaults.headers.common['osType'] = obj.osType : axios.defaults.headers.common['osType'] = '';

obj.deviceId ? axios.defaults.headers.common['deviceId'] = obj.deviceId : axios.defaults.headers.common['deviceId'] = '';

　　　　　　　　　　.

}

export default {

init

}

接下来就是在main.js引入就行了如下：

1

2

3

// 引入请求头文件

import request from './request'

request.init() // 请求头初始化

上诉内容就是设置公共请求头的内容了。 from:https://www.cnblogs.com/ljx20180807/p/9766699.html

龙生 08 Jan 2021

View Details

Vue 子组件与父组件之间的双向数据绑定

方法一（常规）父组件传递数据到子组件；子组件将数据转成本地数据

1

2

3

4

5

6

props: ['name'],

data() {

return {

iName: this.name

}

},

但是此时，父组件如果更新了name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；

1

2

3

4

5

6

watch: {

// 监听父组件传入的数据，更新到本地

name(newVal, oldVal){

this.iName = newVal;

}

},

此时，父组件更新 name ，子组件展示出来的数据（iName）会随之变化，但是子组件修改数据，父组件不会变化，所以需要监听子组件数据（iName）的变化，通知父组件进行更新

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// 子组件中的监听

watch: {

// 监听父组件传入的数据，更新到本地

name(newVal, oldVal){

this.iName = newVal;

},

// 监听本地数据的变化，通知父组件更新

iName(newVal, oldVal) {

this.$emit('update', newVal);

}

},

// 父组件中的更新

methods: {

update(str) {

this.name = str;

}

},

方法二（自定义 v-model 双向数据绑定）自定义组件中使用 v-model 进行双向数据绑定，相当于；

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

相当于

<test :value="selected" @input="data=> selected=data"/>

所以子组件需要做的事情就是

1. 接收 value 数据

props: ['value'],

2. 将value 转成本地数据

data() {

return {

checked: this.value

}

},

3. 监听 value 的变化，更新到本地数据，

监听本地数据的变化，使用 input 事件通知父组件更新

watch: {

value(newVal){

this.checked = newVal;

},

checked(newVal){

this.$emit('input', newVal)

}

},

方法三（.sync 修饰符）

1	<input :title.sync="xx"/>

拆开后

1	<input @update:title="data => xx=data" :title="xx"/>

from:https://blog.csdn.net/qq_39125684/article/details/90380268

龙生 08 Jan 2021

View Details

ES5 数组方法map

概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。语法 array.map(callback[, thisArg]) 参数 callback 原数组中的元素经过该方法后返回一个新的元素。 currentValue callback 的第一个参数，数组中当前被传递的元素。 index callback 的第二个参数，数组中当前被传递的元素的索引。 array callback 的第三个参数，调用 map 方法的数组。 thisArg 执行 callback 函数时 this 指向的对象。例子：将数组中的单词转换成对应的复数形式. 下面的代码将一个数组中的所有单词转换成对应的复数形式.

1

2

3

4

5

6

7

8

9

10

11

12

function fuzzyPlural(single) {

var result = single.replace(/o/g, 'e');

if( single === 'kangaroo'){

result += 'se';

}

return result;

}

var words = ["foot", "goose", "moose", "kangaroo"];

console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangareese"]

例子：求数组中每个元素的平方根下面的代码创建了一个新数组，值为原数组中对应数字的平方根。

1

2

3

var numbers = [1, 4, 9];

var roots = numbers.map(Math.sqrt);

/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

例子：在字符串上使用 map 方法下面的例子演示如在在一个 String 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组：

1

2

3

var map = Array.prototype.map

var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })

// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

使用技巧案例通常情况下，map 方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// 下面的语句返回什么呢:

["1", "2", "3"].map(parseInt);

// 你可能觉的会是[1, 2, 3]

// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.

// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.

// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

/*

//应该使用如下的用户函数returnInt

function returnInt(element){

return parseInt(element,10);

}

["1", "2", "3"].map(returnInt);

// 返回[1,2,3]

*/

兼容旧环境（Polyfill） map 是在最近的 ECMA-262 标准中新添加的方法；所以一些旧版本的浏览器可能没有实现该方法。在那些没有原生支持 map 方法的浏览器中，你可以使用下面的 Javascript 代码来实现它。所使用的算法正是 ECMA-262，第 5 版规定的。假定Object, TypeError, 和 Array 有他们的原始值。而且 callback.call 的原始值也是 Function.prototype.call

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

// 实现 ECMA-262, Edition 5, 15.4.4.19

// 参考: http://es5.github.com/#x15.4.4.19

if (!Array.prototype.map) {

Array.prototype.map = function(callback, thisArg) {

var T, A, k;

if (this == null) {

throw new TypeError(" this is null or not defined");

}

// 1. 将O赋值为调用map方法的数组.

var O = Object(this);

// 2.将len赋值为数组O的长度.

var len = O.length >>> 0;

// 3.如果callback不是函数,则抛出TypeError异常.

if (Object.prototype.toString.call(callback) != "[object Function]") {

throw new TypeError(callback + " is not a function");

}

// 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.

if (thisArg) {

T = thisArg;

}

// 5. 创建新数组A,长度为原数组O长度len

A = new Array(len);

// 6. 将k赋值为0

k = 0;

// 7. 当 k < len 时,执行循环.

while(k < len) {

var kValue, mappedValue;

//遍历O,k为原数组索引

if (k in O) {

//kValue为索引k对应的值.

kValue = O[ k ];

// 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.

mappedValue = callback.call(T, kValue, k, O);

// 返回值添加到新数组A中.

A[ k ] = mappedValue;

}

// k自增1

k++;

}

// 8. 返回新数组A

return A;

};

}

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map from:https://www.cnblogs.com/leejersey/p/5462427.html

龙生 31 Dec 2020

View Details

elementUI中el-table 如何动态生成列

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<el-table :data="tableData" style="width: 100%">

<el-table-column

v-for="col in cols"

:prop="col.prop" :label="col.label" >

</el-table-column>

</el-table>

<el-button raw-type="button" @click="addCol">

添加一列

</el-button>

data() {

return {

tableData: [{

date: '2016-05-02',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

address: '上海市普陀区金沙江路 1517 弄'

}, {

date: '2016-05-01',

address: '上海市普陀区金沙江路 1519 弄'

}, {

date: '2016-05-03',

address: '上海市普陀区金沙江路 1516 弄'

}],

cols: [

{prop: 'date', label: '日期'},

{prop: 'name', label: '姓名'},

]

}

},

methods: {

addCol(){

this.cols.push({prop: 'address', label: '地址'})

}

from:https://blog.csdn.net/baidu_34692401/article/details/83348130

龙生 22 Dec 2020

View Details

vue 进入页面与离开页面触发事件

1.切换进入当前路由之前的钩子函数 beforeRouteEnter

1

2

3

4

5

6

7

export default {

beforeRouteEnter(to, form, next) {

next()

}

</script>

2.离开当前路由之前的钩子函数 beforeRouteLeave

1

2

3

4

5

6

7

export default {

beforeRouteLeave(to, form, next) {

next()

}

</script>

from:https://www.cnblogs.com/gqx-html/p/11233014.html

龙生 08 Dec 2020

View Details

移动端：div在手机页面上随意拖动/拖拽

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<!doctype html>

<html>

<head>

<style>

body{margin:0;padding:0;}

.barrage{position:fixed;display:block;top:0;}

.barrage_name{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#f00), to(#0f0));border-radius:50%;}

.barrage_name_hover{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#ff0), to(#00f));border-radius:50%;}

.col1{color:#fff;display: block;padding: 17px;text-align: center;}

</style>

</head>

<body>

打开弹幕

</div>

<div>

我是来打酱油的

</div>

</body>

$(function(){

var cont=$("#barrage");

var contW=$("#barrage").width();

var contH=$("#barrage").height();

var startX,startY,sX,sY,moveX,moveY;

var winW=$(window).width();

var winH=$(window).height();

var barrage_name=$("#barrage_name");

var barrage_frame=$("#barrage_frame");

var body=$("body");

cont.on({//绑定事件

touchstart:function(e){

startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标

startY = e.originalEvent.targetTouches[0].pageY; //获取点击点的Y坐标

//console.log("startX="+startX+"************startY="+startY);

sX=$(this).offset().left;//相对于当前窗口X轴的偏移量

sY=$(this).offset().top;//相对于当前窗口Y轴的偏移量

//console.log("sX="+sX+"***************sY="+sY);

leftX=startX-sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置

rightX=winW-contW+leftX;//鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置

topY=startY-sY;//鼠标所能移动最上端是当前鼠标距div上边距的位置

bottomY=winH-contH+topY;//鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置

},

touchmove:function(e){

e.preventDefault();

moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标

moveY=e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标

//console.log("moveX="+moveX+"************moveY="+moveY);

if(moveX<leftX){moveX=leftX;}

if(moveX>rightX){moveX=rightX;}

if(moveY<topY){moveY=topY;}

if(moveY>bottomY){moveY=bottomY;}

$(this).css({

"left":moveX+sX-startX,

"top":moveY+sY-startY,

})

},

})

</script>

</html>

为了兼容PC和移动端，想出了以下办法：拖动时候用到的三个事件： mousedown 、 mousemove 、 mouseup 在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是： touchstart 、 touchmove 、 touchend 事件。还有一点要注意的是在PC端获取当前鼠标的坐标是： event.clientX 和 event.clientY ，在移动端获取坐标位置则是： event.touches[0].clientX 和 event.touches[0].clientY 。下面就来说说怎么实现这个效果吧，先看一下效果： PC端：移动端：先来分析一个拖动的流程，以PC端为例，首先是鼠标按下（ mousedown 事件），然后移动（ mousemove 事件），最后释放鼠标（ mouseup 事件），首先要设置一个变量记录鼠标是否按下，在鼠标按下的时候，我们做一个标记，然后需要记录一下鼠标当前的坐标，还有这个div当前的偏移量，当鼠标开始移动的时候，记录下鼠标当前的坐标，用鼠标当前的坐标减去鼠标按下时的坐标再加上鼠标按下时div的偏移量就是现在div距离父辈元素的距离，当鼠标释放的时候将标记改为鼠标已经释放。下面来看一下代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

var flag = false; //是否按下鼠标的标记

var cur = { //记录鼠标按下时的坐标

x:0,

y:0

}

var nx,ny,dx,dy,x,y ;

//鼠标按下时的函数

function down(){

flag = true; //确认鼠标按下

cur.x = event.clientX; //记录当前鼠标的x坐标

cur.y = event.clientY; //记录当前鼠标的y坐标

dx = div2.offsetLeft; //记录div当时的左偏移量

dy = div2.offsetTop; //记录div的上偏移量

}

//鼠标移动时的函数

function move(){

if(flag){ //如果是鼠标按下则继续执行

nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据

ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据

x = dx+nx; //div在x轴的偏移量加上鼠标在x轴移动的距离

y = dy+ny; //div在y轴的偏移量加上鼠标在y轴移动的距离

div2.style.left = x+"px";

div2.style.top = y +"px";

}

//鼠标释放时候的函数

function end(){

flag = false; //鼠标释放

}

然后在将事件加入到这个div中即可，下面再来看一个在移动端需要做些什么，首先是事件不同，只需要在添加移动端的 touchatart 、 touchmove 、 touchend 就可以了，还有一个不同的时移动端获取坐标是 event.touches[0].clientX 和 event.touches[0].clientY ，这也很简单，只要加上判断就可以了，如果是PC端就使用event，如果是移动端就使用 event.touches ：

1

2

3

4

5

6

var touch ;

if(event.touches){

touch = event.touches[0];

}else {

touch = event;

}

还有一点要注意，在移动端拖动div的时候移动端的页面会自动产生滑动效果，所以还需要在 touchmove 的是给页面添加一个阻止默认事件的函数。下面是整个代码，可以在Chrome下模拟移动端测试，点击这里查看：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

<!DOCTYPE html>

<head>

<title>适配移动端的拖动效果</title>

<style>

#div1{

height: 1000px;

}

#div2{

position: absolute;

top:0;

left:0;

width: 100px;

height: 100px;

background: #bbbbbb;

}

</style>

</head>

<body>

</div>

var flag = false;

var cur = {

x:0,

y:0

}

var nx,ny,dx,dy,x,y ;

function down(){

flag = true;

var touch ;

if(event.touches){

touch = event.touches[0];

}else {

touch = event;

}

cur.x = touch.clientX;

cur.y = touch.clientY;

dx = div2.offsetLeft;

dy = div2.offsetTop;

}

function move(){

if(flag){

var touch ;

if(event.touches){

touch = event.touches[0];

}else {

touch = event;

}

nx = touch.clientX - cur.x;

ny = touch.clientY - cur.y;

x = dx+nx;

y = dy+ny;

div2.style.left = x+"px";

div2.style.top = y +"px";

//阻止页面的滑动默认事件

document.addEventListener("touchmove",function(){

event.preventDefault();

},false);

}

//鼠标释放时候的函数

function end(){

flag = false;

}

var div2 = document.getElementById("div2");

div2.addEventListener("mousedown",function(){

down();

},false);

div2.addEventListener("touchstart",function(){

down();

},false)

div2.addEventListener("mousemove",function(){

move();

},false);

div2.addEventListener("touchmove",function(){

move();

},false)

document.body.addEventListener("mouseup",function(){

end();

},false);

div2.addEventListener("touchend",function(){

end();

},false);

</script>

</body>

</html>

from:https://www.cnblogs.com/joyco773/p/6519668.html

龙生 08 Dec 2020

View Details

May 2025
M	T	W	T	F	S	S
« Apr
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31