eg：文本内容滑动、透明度滑动减弱
拖拽事件1.jpg
拖拽事件2.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
div{
position:absolute;
left:420px;
width:600px;
height:50px;
border-radius:5px;
border:2px solid #ccc;
}
div span{
position:absolute;
width:80px;
height:50px;
border-radius:5px;
background-color:#59493f;
}
ul {
position:absolute;
left:50px;
width:300px;
height:300px;
border:2px solid #000;
overflow:hidden;
}
li{
position:absolute;
font-size: 16px;
/*width:300px;
height:900px;*/
}
#sp{
position:absolute;
top:100px;
width:500px;
height:200px;
border:2px solid #000;
}
#opa{
/*position:absolute;
top:100px;*/
width:500px;
height:200px;
background:cyan;
opacity:0;
}
</style>
</head>
<body>
<!-- 拖动方块处 -->
<div id="div">
<span type="button"></span>
</div>
<!-- 文字 -->
<ul>
<li>青春，如三月的春光，安暖向阳。在美丽的青春年华，我们手牵手，肩并肩，跨过岁月山河，跨过锦瑟流年，跨过天涯海角，在三月的春光里沐浴金色的光泽。三月的春光，让青春的我们看到希望，看到自己有一颗年轻跳动的心，看到蓝天白云，看到明媚的灿烂。三月的春光，温暖无比，就像我们的青春，有着长辈的呵护，有着老师的循循教导，它们就像春光，照耀着我们年轻的心。
青春，如三月的春雨，我们在春雨中得到滋润。春雨，淅淅沥沥，纷纷扬扬，打在青春的雨季，打在我们心里，打在我们的生活里，打在我们的生命中，打在我们的灵魂深处。一场春雨，滋润着我们的青春流年，让我们快乐成长，让我们如沐春雨，让我们感受亲恩。三月的春雨，就像我们的父母，用他们的爱心，滋润着我们幼小不安的心灵。
青春，如三月的春风，我们沐浴在春风里。三月的春风，是我们的朋友，是我们的同窗，是陪伴我们成长的玩伴。因为有了春风，我们感受到友谊的温暖；因为有了春风，我们不再寂寞；因为有了春风，我们总在需要帮助的时候，有他们伸出援助之手。春风，是那样感情丰富，温婉细腻。在春风里，我们跳着，唱着，欢呼着，只因为这如春风的情谊。
青春，如三月的春花，我们陶醉在春花里。三月的春花，是我们的初恋。花开半夏，岁月静好，浅笑安然。三月春花，有着不同的颜色，不同的形状，不同的意向。那水灵灵的粉红的桃花，恋着春风，恋着春雨； 那纯白娇小的茉莉，散发着淡淡的清香；那深红的杜鹃，像燃烧着红色的火焰。初恋，是一种颜色鲜艳的花朵；初恋，是一种幽幽的馨香；初恋，是一种岁月的沉淀。
</li>
</ul>
<!-- 透明度 -->
<div id="sp">
<span id="opa"></span>
</div>
</body>
<script>
var div = document.querySelector('#div');
var span = document.querySelector('span');
var li = document.querySelector('li');
var opa=document.getElementById('opa');
span.onmousedown=function(ev){
var ev=ev||event;
var x = ev.clientX-span.offsetLeft;
// 移动
document.onmousemove=function(ev){
var ev =ev ||event;
var left =ev.clientX-x;
// 偏正超出范围
if(left<0){
left=0;
}else if(left>=div.offsetWidth-4-span.offsetWidth){
left=div.offsetWidth-4-span.offsetWidth;
}
span.style.left=left+'px';
li.style.top=-left+'px'; //li中文字的滑动距离等于span在div中滑行的距离(向上滑动为负值)
// console.log(div.offsetWidth)
opa.style.opacity=left/div.offsetWidth; //opacity透明度为0-1，所以opa的透明度等于拖动方块的宽除以外边框的宽度(而被除得到的数字是0-1)
};
document.onmouseup=function(){
document.onmouseup=null;
document.onmousemove=null;
}
return false;
};
</script>
</html>
网友评论