Hao123导航、360导航网页右上角折页效果的实现方法

1884人参与 ｜分类: 站长百科｜时间: 2016年08月14日

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

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

Hao123导航、360导航网页右上角折页效果的实现方法-第1张图片

HTML页面部分

<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部分

#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部分


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

代码打包分享

下载地址：https://yunpan.cn/c6p4RErQjJsQy  提取密码：bf41