-
offsetLeft值可以获取当前的left值， 而offsetLeft属性不能被赋值，只能获取 oDiv.style.left由于最初没有给style加入left属性，获取不到，只能被赋值先查看全部
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = 0;
if(oDiv.offsetLeft > dis){
speed = -10;
}
else {
speed = 10;
}
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top:75px;
}
</style>
</head>
<body>
<div id="div1">
<span id="share">xc</span>
</div>
</body>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout=function(){
startMove1(10,-200);
}
}
var timer=null;
function startMove(sleep,taiger){
clearInterval(timer)
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
if(oDiv.offsetLeft==taiger){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+sleep+'px';
}
},30);
}
function startMove1(sleep,taiger){
clearInterval(timer)
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
if(oDiv.offsetLeft<= taiger){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft-sleep+'px';
}
},30);
}
</script>
</html>查看全部 -
mark查看全部
-
mark查看全部
-
move.js 框架
function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, iTarget, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ //1、取当前的值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj, attr))*100); }else{ icur = parseInt(getStyle(obj, attr)); } //2、算速度 var speed = (iTarget - icur) / 8; speed = speed>0?Math.ceil(speed):Math.floor(speed); //3、检测停止 if(icur == iTarget){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + (icur+speed) + ')'; obj.style.opacity = (icur + speed)/100; }else{ obj.style[attr] = icur + speed + 'px'; } } },30) }JavaScript
鼠标移入先变宽，再变高，然后变透明度
鼠标移出先变透明度，再变高，最后变宽
window.onload = function(){ var Li = document.getElementById('li1'); Li.onmouseover = function(){ startMove(Li, 'width', 400, function(){ startMove(Li, 'height', 200, function(){ startMove(Li, 'opacity', 100); }); }); } Li.onmouseout = function(){ startMove(Li, 'opacity', 30, function(){ startMove(Li, 'height', 100, function(){ startMove(Li, 'width', 200); }); }); } }查看全部 -
阿里巴巴矢量图标库
www.iconfont.cn
查看全部 -
window.onload = function(){ var Li1 = document.getElementById('li1'); Li1.timer = null; // 为 需要运动的对象添加一个计时器 // var Li2 = document.getElementById('li2'); // var Li3 = document.getElementById('li3'); // alert(Math.round(0.3000009)); Li1.onmouseover = function(){ StartMove(this, 'opacity', 100); }; Li1.onmouseout = function(){ StartMove(this, 'opacity', 30); }; }; // var timer = null; 多物体运动时不要使用公用值 // var alpha = 30; function StartMove(obj, attr, Target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var attr_cur = 0; // 需要改变的属性的当前值 if (attr === 'opacity'){ attr_cur = parseFloat(getStyle(obj, attr)) * 100; } else { attr_cur = parseInt(getStyle(obj, attr)); } var speed = (Target - attr_cur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (attr_cur === Target){ clearInterval(obj.timer); } else if (attr === 'opacity'){ obj.style[attr] = (attr_cur + speed)/100; obj.style.filter = 'Alpha(opacity = '+ (attr_cur + speed) +')'; } else { obj.style[attr] = attr_cur + speed + 'px'; } },30); }; function getStyle(obj, attr){ if (obj.currentStyle){ return obj.currentStyle[attr]; } else { return window.getComputedStyle(obj, false)[attr]; } }我用的Html5 没有遇到透明度小数不精确的现象，我通过输出观察发现透明度确实有不精确的现象，但是经过下一次变化后小数就会被清除掉。
查看全部 -
1、对这节课取个好理解的名字，多个物体设置相同动画，如何实现。查看全部
-
重要查看全部
-
对于同时进行的运动，停止所有动画的一个判定条件。
查看全部 -
同时运动的关键在于，使用遍历，给dom加上不一样的定时器。
查看全部 -
for in ----------------多用于遍历json对象。
对于复杂，多参数的函数，我们可以考虑把入参的结构改为json
查看全部 -
链式运动的关键在于：每次运动函数执行完成之后返回相应的dom对象。
好吧，现在还有个新的方法，在原有的基础上增加回调函数。（这种方法在遇到多流程的动画的时候，要写回调地狱。尽量使用1,如果一定要使用2请使用promise）
查看全部 -
针对IE设置透明度： obj.style.filter = "alpha(opacity: 100)"
针对火狐/chrome浏览器： obj.style.opacity = 0.2
查看全部
举报