<body style="margin:0px; padding:0px;">
<div id='ss' style="height:300px; width:400px; border:10px solid #999999; position:absolute; left:50px; top:50px; overflow:hidden">
<img src='http://hiphotos.baidu.com/qwjmys/mpic/item/691db5065867c6ef7b894793.jpg' height="300" width="400px;">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id='sss'></div>
<div id='ssss'></div>
<script>
function $(Id){return document.getElementById(Id)};
var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
var time = null;
var step =50;
var i =j=0;
var ischange =false;
var tatol=[parseInt(CurrentStyle($('ss')).left),parseInt(CurrentStyle($('ss')).top),parseInt(CurrentStyle($('ss')).width),parseInt(CurrentStyle($('ss')).height)];
var Tween = {
Quintic:{
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
}
}
document.onclick =function(event){
i = 0;
clearTimeout(time)
var e = event||window.event;
var current = [parseInt(CurrentStyle($('ss')).left),parseInt(CurrentStyle($('ss')).top),parseInt(CurrentStyle($('ss')).width),parseInt(CurrentStyle($('ss')).height)]
if(document.all){current[2]=current[2]+2*parseInt($('ss').style.borderLeftWidth);current[3]=current[3]+2*parseInt($('ss').style.borderLeftWidth);}
//就在这个地方 我加上了边框的高度了 但是在ff下还是边框还是在呀
if(!ischange)
{ ischange =true;
var _x = e.clientX-parseInt(current[0]);
var _y = e.clientY-parseInt(current[1]);
time =setInterval(function(){
i++;
if(i>step){clearTimeout(time);return}
$('ss').style.width = current[2]-MoveTo(i,0,current[2],step)+'px';
$('ss').style.height = current[3]-MoveTo(i,0,current[3],step)+'px';
$('ss').style.left = parseInt(current[0])+MoveTo(i,0,_x,step)+'px';
$('ss').style.top = parseInt(current[1])+MoveTo(i,0,_y,step)+'px';
},2)
}
else
{
ischange =false;
time = setInterval(function(){
i++
if(i>step){clearTimeout(time);return}
$('ss').style.width = current[2]+MoveTo(i,0,tatol[2]-current[2],step)+'px';
$('ss').style.height = current[3]+MoveTo(i,0,tatol[3]-current[3],step)+'px';
$('ss').style.left = current[0]-MoveTo(i,0,current[0]-tatol[0],step)+'px';
$('ss').style.top = current[1]-MoveTo(i,0,current[1]-tatol[1],step)+'px';
},2)
}
}function MoveTo(t,b,c,d){
return Math.round(Tween.Quintic.easeOut(t,b,c,d));
}
</script>
</body>
<div id='ss' style="height:300px; width:400px; border:10px solid #999999; position:absolute; left:50px; top:50px; overflow:hidden">
<img src='http://hiphotos.baidu.com/qwjmys/mpic/item/691db5065867c6ef7b894793.jpg' height="300" width="400px;">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id='sss'></div>
<div id='ssss'></div>
<script>
function $(Id){return document.getElementById(Id)};
var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
var time = null;
var step =50;
var i =j=0;
var ischange =false;
var tatol=[parseInt(CurrentStyle($('ss')).left),parseInt(CurrentStyle($('ss')).top),parseInt(CurrentStyle($('ss')).width),parseInt(CurrentStyle($('ss')).height)];
var Tween = {
Quintic:{
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
}
}
document.onclick =function(event){
i = 0;
clearTimeout(time)
var e = event||window.event;
var current = [parseInt(CurrentStyle($('ss')).left),parseInt(CurrentStyle($('ss')).top),parseInt(CurrentStyle($('ss')).width),parseInt(CurrentStyle($('ss')).height)]
if(document.all){current[2]=current[2]+2*parseInt($('ss').style.borderLeftWidth);current[3]=current[3]+2*parseInt($('ss').style.borderLeftWidth);}
//就在这个地方 我加上了边框的高度了 但是在ff下还是边框还是在呀
if(!ischange)
{ ischange =true;
var _x = e.clientX-parseInt(current[0]);
var _y = e.clientY-parseInt(current[1]);
time =setInterval(function(){
i++;
if(i>step){clearTimeout(time);return}
$('ss').style.width = current[2]-MoveTo(i,0,current[2],step)+'px';
$('ss').style.height = current[3]-MoveTo(i,0,current[3],step)+'px';
$('ss').style.left = parseInt(current[0])+MoveTo(i,0,_x,step)+'px';
$('ss').style.top = parseInt(current[1])+MoveTo(i,0,_y,step)+'px';
},2)
}
else
{
ischange =false;
time = setInterval(function(){
i++
if(i>step){clearTimeout(time);return}
$('ss').style.width = current[2]+MoveTo(i,0,tatol[2]-current[2],step)+'px';
$('ss').style.height = current[3]+MoveTo(i,0,tatol[3]-current[3],step)+'px';
$('ss').style.left = current[0]-MoveTo(i,0,current[0]-tatol[0],step)+'px';
$('ss').style.top = current[1]-MoveTo(i,0,current[1]-tatol[1],step)+'px';
},2)
}
}function MoveTo(t,b,c,d){
return Math.round(Tween.Quintic.easeOut(t,b,c,d));
}
</script>
</body>
解决方案 »
- 想问一下以下的JS代码为什么不能在FIREFOX中识别？
- javascript中,字符串算做原始类型,即在栈中分配内存,但是字符串的长度不一定呀?非常长的字符串如何处理呢?
- 有要学习eralng的吗？
- asp.net和javascript
- IE和firefox兼容
- JS <html:textarea 换行问题
- 请教各位大侠：怎样动态地设置iframe的高度为src中指定页面的高度，从而使iframe中不出现纵向滚动条就能看到嵌入的完整内容？
- 有三个单选按钮，它们的name相同，id不同，当我选中了一个后，点击保存按钮，确定我选中的是哪一个单选按钮的js怎样写？
- 简单问题
- 移动端怎么判断手指移入移出元素？
- 问个简单的js？
- document.onclick 概念问题
<body style="margin:0px; padding:0px;">
<div id='ss' style="height:300px; width:400px; border:10px solid #999999; position:absolute; left:50px; top:50px; overflow:hidden">
<img src='http://hiphotos.baidu.com/qwjmys/mpic/item/691db5065867c6ef7b894793.jpg' height="300" width="400px;">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id='sss'></div>
<div id='ssss'></div>
<script>
function $(Id){return document.getElementById(Id)};
var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
var time = null;
var step =50;
var i =j=0;
var ischange =false;
var tatol=[parseInt(CurrentStyle($('ss')).left),parseInt(CurrentStyle($('ss')).top),parseInt(CurrentStyle($('ss')).width),parseInt(CurrentStyle($('ss')).height)];
var Tween = {
Quintic:{
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
}
}
document.onclick =function(event){
i = 0;
clearTimeout(time)
var e = event||window.event;
var current = [parseInt(CurrentStyle($('ss')).left),parseInt(CurrentStyle($('ss')).top),parseInt(CurrentStyle($('ss')).width),parseInt(CurrentStyle($('ss')).height)]
if(!ischange)
{
ischange =true;
var _x = e.clientX-parseInt(current[0]);
var _y = e.clientY-parseInt(current[1]);
time =setInterval(function(){
i++;
if(i>step){clearTimeout(time);return}
$('ss').style.borderWidth= parseInt(10*(1-i/step)) + 'px';
$('ss').style.width = current[2]-MoveTo(i,0,current[2],step)+'px';
$('ss').style.height = current[3]-MoveTo(i,0,current[3],step)+'px';
$('ss').style.left = parseInt(current[0])+MoveTo(i,0,_x,step)+'px';
$('ss').style.top = parseInt(current[1])+MoveTo(i,0,_y,step)+'px';
},2)
}
else
{ $('ss').style.borderWidth='10px';
ischange =false;
time = setInterval(function(){
i++
if(i>step){clearTimeout(time);return}
$('ss').style.width = current[2]+MoveTo(i,0,tatol[2]-current[2],step)+'px';
$('ss').style.height = current[3]+MoveTo(i,0,tatol[3]-current[3],step)+'px';
$('ss').style.left = current[0]-MoveTo(i,0,current[0]-tatol[0],step)+'px';
$('ss').style.top = current[1]-MoveTo(i,0,current[1]-tatol[1],step)+'px';
},2)
}
}function MoveTo(t,b,c,d){
return Math.round(Tween.Quintic.easeOut(t,b,c,d));
}
</script>
</body>