首页 > Web开发 > 详细

JS网站右下角悬浮视窗可关闭广告

时间:2015-07-22 20:28:49      阅读:195      评论:0      收藏:0      [点我收藏+]

站右下角悬浮视窗可关闭广告代码,可收缩、展开,关闭,内容区可自定义html,兼容IE8+、FireFox、Chrome、Safari等主流浏览器。广告图片尺寸300x250。

使用方法:
在head区域引入样式表文件hvtcss4.css和JS文件hvtjs4.js
注意: 
<link href="http://hovertree.com/texiao/js/4/hvtcss4.css" rel="stylesheet" type="text/css" />
不能写成
<link href="http://hovertree.com/texiao/js/4/hvtcss4.css" rel="stylesheet" type="text/javascript" />

否则在IE和火狐浏览器将无法实现效果,在Chrome中却可以。

在你的网页代码中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域部分

HTML文件代码:

技术分享
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS右下角悬浮可最小化和关闭的广告 - HoverTree</title><base target="_blank" />
<link href="http://hovertree.com/texiao/js/4/hvtcss4.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/texiao/js/4/hvtjs4.js"></script>
<style>a{color:blue;}.hvtcenter{width:760px;margin:0px auto;}</style>
</head>
<body>

<div class="hvtcenter">
<h2>右下角悬浮可最小化和关闭的广告</h2>
<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/yjm6v683.htm">原文</a> <a href="http://keleyi.com">柯乐义</a>
<br />网站右下角悬浮视窗可关闭广告代码,可收缩、展开,关闭,内容区可自定义html,兼容IE8+、FireFox、Chrome、Safari等主流浏览器。广告图片尺寸300x250。
</div>

<!-- 代码 开始 -->
<div class="float_layer_hovertree" id="hovertree_float_layer" style="z-index:10001;">
<h2>
<b>最新活动</b>
<a id="btn_min" href="javascript:;" class="min" target="_self"></a> <a id="btn_close" href="javascript:;" class="close" target="_self"></a>
</h2>
<div class="content">
<div class="wrap">
<a href="http://hovertree.com/menu/texiao/" target="_blank"><img src="http://hovertree.com/texiao/js/4/hovertree_300x250.jpg" width="300" height="250" /></a>
</div>
</div>
</div>
<!-- 代码 结束 -->

</body>
</html>
技术分享

如果查看hvtjs4.js文件,可以参考以下文章:
http://hovertree.com/hvtart/bjae/psf105c1.htm
http://hovertree.com/hvtart/bjae/doq8alch.htm

web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html

 

JS网站右下角悬浮视窗可关闭广告

原文:http://www.cnblogs.com/ingstyle/p/4668398.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!