JS伸缩效果请教
时间:2010-05-19
来源:互联网
效果浏览网址:www.vsike.com
就是下面这个伸缩效果
但是凡是基于Webkit内核的浏览器第一次打开会出现问题,比如谷歌,遨游3,搜狗2
正常的话它就却换到小图片了,如果不正常它是显示小图片
但是小图片下会显示大图片的空白
刷新一下就可以了
我很奇怪为什么会这样
还有这种效果叫什么,如果解决不了我就得换一个内嵌式的JS代码,不要连接式的
ecshop程序不改的话不支持连接式的JS和JQ代码
大家有这样的可以告诉我吗?
拜托了
这是是JS代码
<div id="header_img">
<div id="ad_box_2009_04">
<img src="../images/b.jpg" id="adImg" />
</div>
</div>
就是下面这个伸缩效果
但是凡是基于Webkit内核的浏览器第一次打开会出现问题,比如谷歌,遨游3,搜狗2
正常的话它就却换到小图片了,如果不正常它是显示小图片
但是小图片下会显示大图片的空白
刷新一下就可以了
我很奇怪为什么会这样
还有这种效果叫什么,如果解决不了我就得换一个内嵌式的JS代码,不要连接式的
ecshop程序不改的话不支持连接式的JS和JQ代码
大家有这样的可以告诉我吗?
拜托了

这是是JS代码
复制内容到剪贴板
var showAD = {
curve: function(t, b, c, d, s) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b
},
fx: function(from, to, playTime, onEnd) {
var Me = this,
who = this.adWrap,
position = 0,
changeVal = to - from,
curve = this.curve;
playTime = playTime / 10;
who.style.overflow = 'hidden';
function _run() {
if (position++<playTime) {
who.style.height = Math.max(1, Math.abs(Math.ceil(curve(position, from, changeVal, playTime)))) + "px";
setTimeout(_run, 10)
} else {
onEnd && onEnd.call(Me, to)
}
};
_run()
},
init: function(info) {
var Me = this,
loadImg = new Image;
loadImg.src = info.endImgURL;
window.onload=function() {
Me.endImgURL = info.endImgURL;
Me.img = document.getElementById(info.imgID);
Me.adWrap = document.getElementById(info.adWrapID);
var max = Me.img.height;
setTimeout(function() {
Me.fx(max, 0, 500,
function(x) {
this.img.src = this.endImgURL;
this.curve = function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
}
};
this.fx(0, this.img.height,600)
})
},
info.timeout || 1000)
};
}
};
showAD.init({
adWrapID: 'ad_box_2009_04',
imgID: 'adImg',
endImgURL: 'http://www.vsike.com/themes/vsike/images/a.jpg'
});
</script>
HTML代码代码:
<script>var showAD = {
curve: function(t, b, c, d, s) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b
},
fx: function(from, to, playTime, onEnd) {
var Me = this,
who = this.adWrap,
position = 0,
changeVal = to - from,
curve = this.curve;
playTime = playTime / 10;
who.style.overflow = 'hidden';
function _run() {
if (position++<playTime) {
who.style.height = Math.max(1, Math.abs(Math.ceil(curve(position, from, changeVal, playTime)))) + "px";
setTimeout(_run, 10)
} else {
onEnd && onEnd.call(Me, to)
}
};
_run()
},
init: function(info) {
var Me = this,
loadImg = new Image;
loadImg.src = info.endImgURL;
window.onload=function() {
Me.endImgURL = info.endImgURL;
Me.img = document.getElementById(info.imgID);
Me.adWrap = document.getElementById(info.adWrapID);
var max = Me.img.height;
setTimeout(function() {
Me.fx(max, 0, 500,
function(x) {
this.img.src = this.endImgURL;
this.curve = function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
}
};
this.fx(0, this.img.height,600)
})
},
info.timeout || 1000)
};
}
};
showAD.init({
adWrapID: 'ad_box_2009_04',
imgID: 'adImg',
endImgURL: 'http://www.vsike.com/themes/vsike/images/a.jpg'
});
</script>
<div id="header_img">
<div id="ad_box_2009_04">
<img src="../images/b.jpg" id="adImg" />
</div>
</div>
作者: kjing 发布时间: 2010-05-19
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28