求js高手写个特效

发布网友发布时间：2022-05-01 01:19

共4个回答

热心网友时间：2022-04-23 09:11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#parent {width:320px; height:20px; background:#CCC;

position:relative; margin:10px auto;}
#div1 {width:20px; height:20px; background:red;

position:absolute; cursor:move;}
#hehe {width:320px; height:20px; margin:10px auto;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tuodong</title>
</head>
<script type="text/javascript">
//向右移动的方法
function randleft(){
var i = parseInt(document.getElementById('div1').style.left);
if(isNaN(i)){
i = 0;
}
//到300后就重新来
if(i == 300){
i = 0;
}
if(i+1 > 300){
i = 300;
}else{
//这个1是每次往前的距离
i += 1;
}
//这里控制移动的时间
var a = setTimeout(init,500);
document.getElementById('div1').style.left = i+"px";
document.getElementById('hehe').innerHTML = parseInt(document.getElementById('div1').style.left);
}
//初始方法
function init(){
//调用移动方法
randleft();
var oDiv=document.getElementById('div1');
var oParent=document.getElementById('parent');
var disX=0;
//鼠标点击时触发
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
//只有鼠标是点下去才能触发此移动鼠标的方法
document.onmousemove=function (ev)
{
//区别IE和火狐浏览器
var oEvent=ev||event;
var l=oEvent.clientX-disX;

if(l<0)
{
l=0;
}
else if(l>oParent.offsetWidth-oDiv.offsetWidth)
{
l=oParent.offsetWidth-oDiv.offsetWidth;
}

oDiv.style.left=l+'px';

document.getElementById('hehe').innerHTML=l;
return false;
};
//放开鼠标
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false;
};
};
</script>
<body onload="init()">
<div id="box" style="height:400px;width:500px; position:relative;border:#F00 1px solid;margin:0 auto;">
<div id="parent">
<div id="div1"> </div>
</div>
<div id="hehe">0</div>
</div>
</body>
</html>

热心网友时间：2022-04-23 10:29

哥，啥特效啊，一段代码，也不用文字简单说下

热心网友时间：2022-04-23 12:03

和自定义的滚动条类似，就是没明白“下面的数值也发生相应的变化”，这个要怎么变化

热心网友时间：2022-04-23 13:55

我勒个去帮顶了代表启飞表示鸭梨不大