-
最近发现Hao123网址导航右上角的那个折页效果很酷,既有广告功能,又不影响体验,还很美观。后来发现很多网址导航都有这个功能,比如:360网址导航。后来查看了一下,这类知名的网站的代码都经过特殊处理,只看复制粘贴到对应的位置不行,经过一番折腾,终于完美找到了解决方法了。今天,陈德馨就无私分享一下方法和代码。
下面的演示陈德馨已经把代码内的路径都外链了,直接复制代码就行,图片外链贴图库,swf我是直接调用360网址导航的。
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
Hao123导航、360导航网页右上角折页效果的实现方法
2247人参与 |分类: 站长百科|时间: 2016年08月14日
相关文章
- 2020-01-10作为站长应该懂得的7大搜索引擎站长平台
- 2019-10-22个人博客网站用什么程序比较好?
- 2019-10-12头条搜索站长平台如何添加网站和sitemap文件?附图文教程
- 2019-09-26PHP环境下是选择Apache和Nginx?
- 2019-09-11网站运维人员必做的7项网站维护工作
- 2019-08-26现在还要必要坚持做PC网站或个人博客吗?
- 2019-08-03宝塔面板+云锁nginx自编译web防护的图文教程
- 2019-07-08解决国内主机服务器 WordPress 后台异常卡顿的问题
- 2019-07-02网站启用SSL自动301跳转到HTTPS教程
- 2019-06-06宝塔/BT面板内存占用MySQL频繁崩溃自动重启方法
评论专区请在后台修改