如何实现Hao123导航、360导航网页右上角折页效果

最近发现Hao123网址导航右上角的那个折页效果很酷,既有广告功能,又不影响体验,还很美观。后来发现很多网址导航都有这个功能,比如:360网址导航。后来查看了一下,这类知名的网站的代码都经过特殊处理,只看复制粘贴到对应的位置不行,经过一番折腾,终于完美找到了解决方法了。今天,就无私分享一下方法和代码。

下面的演示已经把代码内的路径都外链了,直接复制代码就行,图片外链贴图库,swf我是直接调用360网址导航的。

43101.jpg

HTML页面部分

Markup

<div class="front-view" ><div id="corner-flash" style="display: block;"><div class="cont"><OBJECT classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=100 height=100><PARAM NAME="_cx" VALUE="2645"><PARAM NAME="_cy" VALUE="2645"><PARAM NAME="FlashVars" VALUE="ad_pic=http://i13.tietuku.cn/2d4422d262ba1a4b.png&link_url=http://s.click.taobao.com/t?e=m%3D2%26s%3DoEAEoXd5pYAcQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMXmOYE2Co4f9J1gyddu7kN%2BOdGbj4fHCJybw1cQKV5PprmKIW3j38r78vekcD5j4y6UuZxIcp9pfUIgVEmFmgnbDX0%2BHH2IEVaX4VWt66S4EJPwiig1bxLP9BvYCQR6XAr%2BKQ71wHNCAqP8YyUoZZlq4cXg3ii9waXPs9Sj9Qli1np4c65at3FeX3cwyLTlAhj2l4PysJx%2FP"><PARAM NAME="Movie" VALUE="http://s1.qhimg.com/static/a2a272dd72e3347f.swf"><PARAM NAME="Src" VALUE="http://s1.qhimg.com/static/a2a272dd72e3347f.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"><PARAM NAME="AllowFullScreenInteractive" VALUE="false"><PARAM NAME="IsDependent" VALUE="0"><!--[if !IE]>--><object type="applicatiON/x-shockwave-flash" data="http://s1.qhimg.com/static/a2a272dd72e3347f.swf" width="100" height="100"><param name="wmode" value="transparent"><param name="flashvars" value="ad_pic=http://i13.tietuku.cn/2d4422d262ba1a4b.png&link_url=http://s.click.taobao.com/t?e=m%3D2%26s%3DoEAEoXd5pYAcQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMXmOYE2Co4f9J1gyddu7kN%2BOdGbj4fHCJybw1cQKV5PprmKIW3j38r78vekcD5j4y6UuZxIcp9pfUIgVEmFmgnbDX0%2BHH2IEVaX4VWt66S4EJPwiig1bxLP9BvYCQR6XAr%2BKQ71wHNCAqP8YyUoZZlq4cXg3ii9waXPs9Sj9Qli1np4c65at3FeX3cwyLTlAhj2l4PysJx%2FP"><param name="allowScriptAccess" value="always"><!--<![endif]--><!--[if !IE]>--></object><!--<![endif]--><a id='ad000000001' style="display:none;" rel="nofollow" target="_blank" href="http://s.click.taobao.com/t?e=m%3D2%26s%3DoEAEoXd5pYAcQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMXmOYE2Co4f9J1gyddu7kN%2BOdGbj4fHCJybw1cQKV5PprmKIW3j38r78vekcD5j4y6UuZxIcp9pfUIgVEmFmgnbDX0%2BHH2IEVaX4VWt66S4EJPwiig1bxLP9BvYCQR6XAr%2BKQ71wHNCAqP8YyUoZZlq4cXg3ii9waXPs9Sj9Qli1np4c65at3FeX3cwyLTlAhj2l4PysJx%2FP">右上角折页</a></OBJECT></div></div></div>

CSS部分

CSS

#corner-flash {z-index: 10;overflow: hidden;position: absolute;top: 0;right: 0;width: 100px;height: 100px;display: none;}#corner-flash .cont {position: absolute;top: 0;left: 0;width: 100px;height: 100px;}#corner-flash .cont {z-index: 1;}.ie6 #corner-flash .cont {top: -1px;}

JS部分


JavaScript

function juanjiao_click(){document.getElementById('ad000000001').click();}

赞 (0)