eg：文本內(nèi)容滑動(dòng)词渤、透明度滑動(dòng)減弱
拖拽事件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>
<!-- 拖動(dòng)方塊處 -->
<div id="div">
<span type="button"></span>
</div>
<!-- 文字 -->
<ul>
<li>青春芜壁，如三月的春光慧妄，安暖向陽(yáng)剪芍。在美麗的青春年華，我們手牽手饱普，肩并肩状共，跨過(guò)歲月山河，跨過(guò)錦瑟流年冯袍，跨過(guò)天涯海角，在三月的春光里沐浴金色的光澤儡循。三月的春光择膝，讓青春的我們看到希望资盅，看到自己有一顆年輕跳動(dòng)的心，看到藍(lán)天白云，看到明媚的燦爛今穿。三月的春光，溫暖無(wú)比蓝晒，就像我們的青春芝薇，有著長(zhǎng)輩的呵護(hù)作儿，有著老師的循循教導(dǎo)，它們就像春光晾嘶，照耀著我們年輕的心娶吞。
青春，如三月的春雨机断，我們?cè)诖河曛械玫阶虧?rùn)。春雨吏奸，淅淅瀝瀝苦丁，紛紛揚(yáng)揚(yáng)，打在青春的雨季旺拉，打在我們心里，打在我們的生活里晋涣，打在我們的生命中谢鹊，打在我們的靈魂深處。一場(chǎng)春雨佃扼，滋潤(rùn)著我們的青春流年兼耀，讓我們快樂(lè)成長(zhǎng)瘤运，讓我們?nèi)玢宕河辏屛覀兏惺苡H恩拯坟。三月的春雨郁季，就像我們的父母巩踏，用他們的愛(ài)心续搀，滋潤(rùn)著我們幼小不安的心靈。
青春彪杉，如三月的春風(fēng)派近，我們沐浴在春風(fēng)里渴丸。三月的春風(fēng)，是我們的朋友戒幔，是我們的同窗土童，是陪伴我們成長(zhǎng)的玩伴。因?yàn)橛辛舜猴L(fēng)敢订，我們感受到友誼的溫暖楚午；因?yàn)橛辛舜猴L(fēng)，我們不再寂寞醒叁；因?yàn)橛辛舜猴L(fēng)泊业，我們總在需要幫助的時(shí)候吁伺，有他們伸出援助之手租谈。春風(fēng)割去，是那樣感情豐富，溫婉細(xì)膩夸赫。在春風(fēng)里茬腿，我們跳著切平，唱著悴品，歡呼著，只因?yàn)檫@如春風(fēng)的情誼定枷。
青春依鸥，如三月的春花贱迟，我們陶醉在春花里衣吠。三月的春花，是我們的初戀壤靶「壳危花開(kāi)半夏，歲月靜好贮乳，淺笑安然忧换。三月春花，有著不同的顏色向拆，不同的形狀亚茬，不同的意向。那水靈靈的粉紅的桃花浓恳，戀著春風(fēng)刹缝，戀著春雨； 那純白嬌小的茉莉颈将，散發(fā)著淡淡的清香梢夯；那深紅的杜鵑，像燃燒著紅色的火焰晴圾。初戀沾凄，是一種顏色鮮艷的花朵；初戀手负，是一種幽幽的馨香；初戀统捶，是一種歲月的沉淀驻右。
</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;
// 移動(dòng)
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中文字的滑動(dòng)距離等于span在div中滑行的距離(向上滑動(dòng)為負(fù)值)
// console.log(div.offsetWidth)
opa.style.opacity=left/div.offsetWidth; //opacity透明度為0-1恨豁，所以opa的透明度等于拖動(dòng)方塊的寬除以外邊框的寬度(而被除得到的數(shù)字是0-1)
};
document.onmouseup=function(){
document.onmouseup=null;
document.onmousemove=null;
}
return false;
};
</script>
</html>
