DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> JS右下角懸浮可最小化和關閉的廣告
JS右下角懸浮可最小化和關閉的廣告
編輯:網頁特效代碼     

效果體驗:http://hovertree.com/texiao/js/4.htm

網站右下角懸浮視窗可關閉廣告代碼,可收縮、展開,關閉,內容區可自定義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://"></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="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122916450872.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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved