JS伸缩效果请教

2016-07-07 15:03 来源：www.chinab4c.com 作者：ecshop专家

效果浏览网址：www.vsike.com
就是下面这个伸缩效果
但是凡是基于Webkit内核的浏览器第一次打开会出现问题，比如谷歌，遨游3，搜狗2
正常的话它就却换到小图片了，如果不正常它是显示小图片
但是小图片下会显示大图片的空白
刷新一下就可以了
我很奇怪为什么会这样
还有这种效果叫什么，如果解决不了我就得换一个内嵌式的JS代码，不要连接式的
ecshop程序不改的话不支持连接式的JS和JQ代码
大家有这样的可以告诉我吗？
拜托了


JS代码
  1. <script>
  2. var showAD = {
  3. curve: function(t, b, c, d, s) {
  4. if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
  5. return c / 2 * ((t -= 2) * t * t + 2) + b
  6. },
  7. fx: function(from, to, playTime, onEnd) {
  8. var Me = this,
  9. who = this.adWrap,
  10. position = 0,
  11. changeVal = to - from,
  12. curve = this.curve;
  13. playTime = playTime / 10;
  14. who.style.overflow = 'hidden';
  15. function _run() {
  16. if (position++<playTime) {
  17. who.style.height = Math.max(1, Math.abs(Math.ceil(curve(position, from, changeVal, playTime)))) + "px";
  18. setTimeout(_run, 10)
  19. } else {
  20. onEnd && onEnd.call(Me, to)
  21. }
  22. };
  23. _run()
  24. },
  25. init: function(info) {
  26. var Me = this,
  27. loadImg = new Image;
  28. loadImg.src = info.endImgURL;
  29. window.onload=function() {
  30. Me.endImgURL = info.endImgURL;
  31. Me.img = document.getElementById(info.imgID);
  32. Me.adWrap = document.getElementById(info.adWrapID);
  33. var max = Me.img.height;
  34. setTimeout(function() {
  35. Me.fx(max, 0, 500,
  36. function(x) {
  37. this.img.src = this.endImgURL;
  38. this.curve = function(t, b, c, d) {
  39. if ((t /= d) < (1 / 2.75)) {
  40. return c * (7.5625 * t * t) + b
  41. } else if (t < (2 / 2.75)) {
  42. return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
  43. } else if (t < (2.5 / 2.75)) {
  44. return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
  45. } else {
  46. return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
  47. }
  48. };
  49. this.fx(0, this.img.height,600)
  50. })
  51. },
  52. info.timeout || 1000)
  53. };
  54. }
  55. };
  56. showAD.init({
  57. adWrapID: 'ad_box_2009_04',
  58. imgID: 'adImg',
  59. endImgURL: 'http://www.vsike.com/themes/vsike/images/a.jpg'
  60. });
  61. </script>
复制代码




HTML代码


  1. <div id="header_img">
  2. <div id="ad_box_2009_04">
  3. <img src="../images/b.jpg" id="adImg" />
  4. </div>
  5. </div>
复制代码




回答：
好东西收藏效果不错