1

我正在尝试制作可在没有 Flash 的情况下使用的展开式广告（即在 iOS 上）。
我是一名前端网页设计师，没有真正的 Javascript 知识。
我找到了一个关于如何创建广告的示例代码，但它结合了 Flash 来激活展开和收回 Javascript 功能。

是否可以使用 gif/jpg 图片制作展开式广告？
我的意思是一个 300x40 的移动广告，点击一下就可以扩展到 300x400 全屏。

我真的很感激这方面的任何帮助。

4

1 回答 1

0

我建议使用CSS3尝试此操作，因为我想作为前端网页设计师，您对CSS更满意。
我很确定悬停相当于在大多数移动设备上点击。

试试下面的：

<style>
.youradvert {
   overflow: hidden;
   width: 300px;
   height: 40px;
   -webkit-transition: all 1s;
   -moz-transition: all 1s;
   -o-transition: all 1s;
   transition: all 1s;
}
.youradvert:hover {
   height: 400px;
}
</style>

或者，点击与单击相同，您可以设置图像display:none并使用简单的Javascript函数更改显示值onclick。
您可能会发现单击实现比悬停更普遍，但我不确定。VISIBILITY如果DISPLAY不这样做，您可以使用。

如下所示：

<script type="text/javascript">
<!--
    function expand(){
        document.getElementById('large_ad').style.display=block;
    }
-->
</script>

<div class="youradvert">
   <img id="small_ad" src="http://example.com/image.jpg" onclick="expand()" alt="" style="width:300px;height:40px;"/>
   <img id="large_ad" src="http://example.com/image.jpg" style="display:none;width:300px;height:400px;" alt=""/>
</div>
于 2013-02-04T22:58:52.653 回答