可以幫忙看下代碼嗎
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style type="text/css">
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? div {
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ?
? ? ? ? ? ? background: #0e90d2;
? ? ? ? ? ? filter: alpha(opacity:30);
? ? ? ? ? ? opacity: 0.3
? ? ? ?
? ? ? ? }
? ? </style>
</head>
<body>
<div>
</div>
<script type="text/javascript">
? ? window.onload = function () {
? ? ? ? var oDiv = document.getElementsByTagName('div')[0],
? ? ? ? ? timer = null;
? ? ? ? oDiv.onmouseover = function () {
? ? ? ? ? ? startMove('opacity',100);
? ? ? ? }
? ? ? ? oDiv.onmouseout = function () {
? ? ? ? ? ? startMove('opacity',30);
? ? ? ? }
? ? } ? ?
? ? ? ??
? ? ? ? function startMove(attr,iTarget) {
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? timer = setInterval(function(){
? ? ? ? ? ? ? ? var oDiv = document.getElementsByTagName('div')[0],
? ? ? ? ? ? ? ? var icur=0;
? ? ? ? ? ? ? ? if(attr=='opacity'){
? ? ? ? ? ? ? ? icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ?icur=parseInt(getStyle(oDiv,attr));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var speed=(iTarget-icur)/8;
? ? ? ? ? ? ? ? speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? if(icur==iTarget){
? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ?if(attr=='opacity'){
? ? ? ? ? ? ? ? ?icur+=speed;
? ? ? ? ? ? ? ? ? ? ?oDiv.style.filter='alpha(opacity:'+icur+')';
? ? ? ? ? ? ? ? ? ? ?oDiv.style.opacity=icur/100;
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ?else{
? ? ? ? ? ? ? ? ?oDiv.style[attr]=icur+speed+'px'
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?}
? ? ? ? ? ? ?}, 30)
? ? ? ? ?}
? ??
? ? //獲取css樣式
? ? function getStyle(obj, attr) {
? ? ? ? if (obj.currentStyle) {
? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? }
? ? ? ? else {
? ? ? ? ? ? return getComputedStyle(obj, null)[attr];
? ? ? ? }
? ? }
</script>
</body>
</html>
如加入obj參數 則
?? ? oDiv.onmouseover = function () {
? ? ? ? ? ? startMove(this,'opacity',100);
? ? ? ? }
在這里 我不用obj的參數可以么 直接默認為oDiv 不知道是不是這個原因？
2016-10-21
理論上沒什么問題，但是不能應用于多物體運動
2016-10-20
謝謝親的答復 但是在不傳入obj的參數的情況下 之前已經有定義timer=null，因此之后可以開始就可以clearsetinterval 不知道對不對。。
2016-10-20
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>Title</title> ????<style?type="text/css"> ????????*{ ????????????margin:?0; ????????????padding:?0; ????????} ????????div?{ ????????????width:?1000px; ????????????height:?300px; ??????????? ????????????background:?#0e90d2; ????????????filter:?alpha(opacity:30); ????????????opacity:?0.3 ??????? ????????} ????</style> </head> <body> <div> </div> <script?type="text/javascript"> ????window.onload?=?function?()?{ ????????var?oDiv?=?document.getElementsByTagName('div')[0], ???????? ????????timer?=?null; ????????oDiv.onmouseover?=?function?()?{ ????????????startMove(this,'opacity',100); ????????} ????????oDiv.onmouseout?=?function?()?{ ????????????startMove(this,'opacity',30); ????????} ????}???? ???????? ????????function?startMove(obj,attr,iTarget)?{ ????????????clearInterval(obj.timer); ????????????obj.timer?=?setInterval(function(){ ????????????????var?oDiv?=?document.getElementsByTagName('div')[0]; ????????????????var?icur=0; ????????????????if(attr=='opacity'){ ????????????????icur=Math.round(parseFloat(getStyle(oDiv,attr))*100); ?????????????????} ????????????????else{ ?????????????????icur=parseInt(getStyle(oDiv,attr)); ????????????????} ????????????????var?speed=(iTarget-icur)/8; ????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed); ???????????????? ????????????????if(icur==iTarget){ ??????????????????clearInterval(obj.timer); ????????????????} ????????????????else{ ?????????????????if(attr=='opacity'){ ?????????????????icur+=speed; ?????????????????????oDiv.style.filter='alpha(opacity:'+icur+')'; ?????????????????????oDiv.style.opacity=icur/100; ?????????????????} ???????????????? ?????????????????else{ ?????????????????oDiv.style[attr]=icur+speed+'px' ?????????????????} ?????????????} ?????????????},?30) ?????????} ???? ????//獲取css樣式 ????function?getStyle(obj,?attr)?{ ????????if?(obj.currentStyle)?{ ????????????return?obj.currentStyle[attr]; ????????} ????????else?{ ????????????return?getComputedStyle(obj,?null)[attr]; ????????} ????} </script> </body> </html>2016-10-13
沒聽明白你說什么