zoukankan      html  css  js  c++  java
  • 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://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

  • 相关阅读:
    rabbitmq安装详解
    linux下安装rabbitmq的rpm包问题记录
    在 CentOS 6.4上安装Erlang
    redis配置认证密码(转)
    Redis单台的安装部署及主备、哨兵部署
    查看linux系统版本的命令
    Js 实现ajax
    json的相关操作
    Diango思维图
    服务系统 server端
  • 原文地址:https://www.cnblogs.com/jihua/p/jsfloat.html
Copyright © 2011-2022 走看看