A-A+

ecshop增加一个只显示几秒后消失的广告或者滚动逐渐消失的广告

2015年12月24日 PHP开源系统 暂无评论 阅读 10 views 次

ecshop 有自己的广告系统,但这些前台显示的广告都是其固定不变的,也就是指定的某个位置的广告,这就有了其展示商品广告的局限性,现在不少的电商网站都为了多展示广告,在页面的某个位置会显示某个推广广告只显示几秒而消失或者逐渐消失,这样即展示了商品广告,也不浪费其占用的空间区域,在 ecshop 里面当然也可以实现了,下面夏日博客就把相关的经验分享一下了。

第一步:打开 index.dwt 文件,在这个里面添加一个广告区域,搜索如下的代码:

  1. <!-- #BeginLibraryItem "/library/page_header.lbi" --><!-- #EndLibraryItem -->  

在这段代码的的后面添加如下的代码:

  1. <!-- TemplateBeginEditable name="头部横幅广告位" --><!-- TemplateEndEditable -->  

第二步:登陆 ecshop 后台,进入广告管理》广告位置添加新的广告位,广告位的宽度和高度根据自己的需求进行填写。

首先我们来做显示广告几秒后消失,广告位模板里面的代码修改为如下代码即可:

  1. <table align="center" cellpadding="0" cellspacing="0">  
  2. {foreach from=$ads item=ad}  
  3. <tr><td>{$ad}</td></tr>  
  4. {/foreach}  
  5. </table>  

我们接着做滚动逐渐消失的广告,广告位的代码修改为如下代码即可:

  1. <table cellpadding="0" cellspacing="0">  
  2. {foreach from=$ads item=ad}  
  3. <td><tr>  
  4. <script type="text/javascript" language="javascript">  
  5. var time = 500;  
  6. var h = 0;  
  7. function addCount() {  
  8. if (time > 0) {  
  9. time--;  
  10. h = h + 5;  
  11. else {  
  12. return;  
  13. }  
  14. if (h > 70) //高度  
  15. {  
  16. return;  
  17. }  
  18. document.getElementById("ads").style.display = "";  
  19. document.getElementById("ads").style.height = h + "px";  
  20. setTimeout("addCount()", 30);  
  21. }  
  22. window.onload = function showAds() {  
  23. addCount();  
  24. setTimeout("noneAds()", 4000); //停留时间自己适当调整  
  25. }  
  26. </script>  
  27. <script type="text/javascript" language="javascript">  
  28. var T = 560;  
  29. var N = 70; //高度  
  30. function noneAds()  
  31. {  
  32. if(T>0)  
  33. {  
  34. T--;  
  35. N = N-5;  
  36. }  
  37. else  
  38. {  
  39. return;  
  40. }  
  41. if(N<0)  
  42. {  
  43. document.getElementById("ads").style.display = "none";  
  44. return;  
  45. }  
  46. document.getElementById("ads").style.height = N+"px";  
  47. setTimeout("noneAds()",30);  
  48. }  
  49. </script>  
  50. <div id="ads" style="margin:auto;display:none;overflow:hidden;text-align:center;">{$ad}</div>  
  51. </td></tr>  
  52. {/foreach}  
  53. </table>  

第三步:最后我们还需要登陆 ecshop 后台,进入广告位管理》广告列表里新添加广告,媒介类型选择代码类型,广告位置选以上效果一新添加好的广告位置。

效果一:显示广告几秒后消失,输入广告代码框内加入如下的代码:

  1. <div id="outwin">  
  2. <a href="https://www.xiariboke.net"><img src="https://www.xiariboke.net/data/afficheimg/banner_top.jpg"></a>  
  3. </div>  
  4. <script language="JavaScript">  
  5. var thisTime = setTimeout("document.all.outwin.style.display='block';", 2000);  
  6. var thisTime = setTimeout("document.all.outwin.style.display='none';", 6000);  
  7. </script>  

效果二:滚动逐渐消失的广告,输入如下的代码:

  1. <a href="https://www.xiariboke.net"><img src="https://www.xiariboke.net/data/afficheimg/banner_top.jpg"></a>  

好了,去预览一下效果吧,这里的 banner 图片记得更改为自己站点的广告链接图片,可以是 jpg 类型,也可以是 gif 类型的。

标签:

给我留言