网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 悬浮广告方法日常收集整理
内容
    这篇文章主要介绍了悬浮广告方法日常收集整理的相关资料,需要的朋友可以参考下
    1左侧或者右侧的悬浮广告。
    css样式：
    *{padding: 0;margin: 0;}
    .fl{float:left;display: inline;}
    .fr{float: right;display: inline;}
    .clearfix{*zoom: 1;}
    .clearfix:after{ display: block; content: ""; height: 0;line-height: 0;visibility: hidden; clear: both;}
    /*tab 切换*/
    .tab_title{ line-height: 30px; border-bottom: 1px solid #ccc; width: 360px;margin: 0 auto;}
    .tab_title a{ display: inline-block; font-size: 16px;color: #333; text-decoration: none; margin-right: 20px;}
    .tab_title a.active{color: red;}
    .tab_content{width: 340px; padding:5px 10px;margin: 0 auto; border: 1px solid #ccc; height: 120px;}
    /*文字滚动*/
    .moveScroll{ width: 360px; height: 120px; border: 1px solid #ccc; margin: 50px auto;}
    .moveparent{ width: 330px;height: 90px;overflow: hidden; margin:15px auto;}
    .moveScroll .content{ color: #333; }
    /*文本输入框*/
    .inputText{ width: 320px; padding:10px; line-height: 22px;margin: 10px auto;display: block;color: #999;}
    /*幻灯片*/
    .wrapper {
    width: 324px;
    height: 325px;
    _height: 321px;
    position: relative;
    z-index: 1;
    margin: 20PX auto;
    }
    .wrapper .main {
    width: 324px;
    height: 222px;
    overflow: hidden;
    }
    .wrapper li {
    float: left;
    display: inline;
    }
    .wrapper ul img {
    width: 324px;
    height: 222px;
    position: relative;
    z-index: 1;
    }
    .wrapper ul span {
    position: absolute;
    display: block;
    text-align: center;
    width: 324px;
    height: 20px;
    overflow: hidden;
    bottom: 10px;
    left: 0;
    }
    .wrapper ol {
    margin-right: -4px;
    height: 58px;
    *zoom: 1;
    }
    .wrapper ol:after {
    display: block;
    content: "";
    line-height: 0;
    height: 0;
    visibility: hidden;
    clear: both;
    }
    .wrapper ol img {
    width: 78px;
    height: 52px;
    margin: 6px 4px 0 0;
    }
    .wrapper ol li {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: pointer;
    }
    .wrapper ol .active {
    opacity: 1;
    filter: alpha(opacity=100);
    }
    html代码：
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>简jQuery左右对称浮动广告代码</title>
    <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
    <div></div>
    <!-- 代码部分begin -->
    <div id="floatright"></div>
    <script src="js/jquery.js" ></script>
    <script src="js/floatAd.js" ></script>
    <script>
    window.onload = function(){
    var ad2 = new FloatAd({
    nodeLink : "<a href='广告连接地址'><img src='广告图片' border=0 /></a>" ,
    floatObj : "floatleft",
    x : 10,
    y : 400,
    locate : "left"
    });
    ad2.play();
    }
    </script>
    <!-- 代码部分end -->
    </body>
    </html>
    js文件除引入jquery外(要问我jquery是什么，请出门左转)还需要：
    var FloatAd = function(obj){
    var mainNode = $("." + obj.main)[0];
    if(obj.nodeLink && (typeof obj.nodeLink == "string")){
    var newFloatObj = document.createElement("div");
    newFloatObj.id = obj.floatObj;
    newFloatObj.style.position = "absolute";
    newFloatObj.style.zIndex = 10;
    newFloatObj.innerHTML = obj.nodeLink;
    document.body.appendChild(newFloatObj);
    }
    this.ad = document.getElementById(obj.floatObj);
    this.main = document.getElementById(obj.main)||mainNode;
    this.x = obj.x;
    this.y = obj.y;
    this.locate = obj.locate;
    this.space = obj.space;
    var that = this;
    this.play = function(){
    setInterval(function(){
    that.calculate();
    },10);
    };
    }
    FloatAd.prototype = {
    constructor : FloatAd,
    calculate : function(){
    var obj_x = this.x,
    obj_y = this.y,
    main_offsetLeft = document.documentElement.scrollLeft||document.body.scrollLeft,
    main_offsetTop = document.documentElement.scrollTop||document.body.scrollTop;
    if(this.main){
    if(this.locate == "left"){
    obj_x = this.main.offsetLeft - this.ad.offsetWidth - this.space;
    }else if(this.locate == "right"){
    obj_x = this.main.offsetLeft + this.main.offsetWidth + this.space;
    }
    if(this.ad.offsetLeft != main_offsetLeft + obj_x){
    var dx = (main_offsetLeft + obj_x - this.ad.offsetLeft)*0.08;
    dx = (dx > 0 ? 1 : -1)*Math.ceil(Math.abs(dx));
    this.ad.style.left = this.ad.offsetLeft + dx + "px";
    } 
    }else{
    if(this.locate == "left"){
    this.ad.style.left = obj_x + "px";
    }else if(this.locate == "right"){
    this.ad.style.right = obj_x +"px";
    }
    }
    if(this.ad.offsetTop != main_offsetTop + obj_y){
    var dy = (main_offsetTop + obj_y - this.ad.offsetTop)*0.08;
    dy = (dy > 0 ? 1 : -1)*Math.ceil(Math.abs(dy));
    this.ad.style.top = this.ad.offsetTop + dy + "px";
    }
    }
    }
    这是自己在用到这种效果的时候整理出来的，copy网上的案例，进行整理，方便大家使用。
    2 全屏漂浮案例：飘窗！
    css文件：
    #img1{
    z-index: 100;
    left: 2px;
    width: 59px;
    position: absolute;
    top: 43px;
    height: 61px;
    visibility: visible;
    }
    html文件
    <html>
    <head>
    <title>漂浮广告</title>
    </head>
    <link rel="stylesheet" href="floatImg.css"/>
    <body>
    <div id=img1>
    <a href="广告链接地址" target="_blank">
    <img src="广告图片">
    </a>
    </div>
    </body>
    <script src="链接js"></script>
    </html>
    js代码：
    var xPos = 300;
    var yPos = 200;
    var step = 1;
    var delay = 30;
    var height = 0;
    var Hoffset = 0;
    var Woffset = 0;
    var yon = 0;
    var xon = 0;
    var pause = true;
    var interval;
    img1.style.top = yPos;
    function changePos()
    {
    width = document.body.clientWidth;
    height = document.body.clientHeight;
    Hoffset = img1.offsetHeight;
    Woffset = img1.offsetWidth;
    img1.style.left = xPos + document.body.scrollLeft;
    img1.style.top = yPos + document.body.scrollTop;
    if (yon)
    {yPos = yPos + step;}
    else
    {yPos = yPos - step;}
    if (yPos < 0)
    {yon = 1;yPos = 0;}
    if (yPos >= (height - Hoffset))
    {yon = 0;yPos = (height - Hoffset);}
    if (xon)
    {xPos = xPos + step;}
    else
    {xPos = xPos - step;}
    if (xPos < 0)
    {xon = 1;xPos = 0;}
    if (xPos >= (width - Woffset))
    {xon = 0;xPos = (width - Woffset); }
    }
    function start()
    {
    img1.visibility = "visible";
    interval = setInterval('changePos()', delay);
    }
    function pause_resume()
    {
    if(pause)
    {
    clearInterval(interval);
    pause = false;}
    else
    {
    interval = setInterval('changePos()',delay);
    pause = true;
    }
    }
    start();
    以上内容是小编给大家整理的有关悬浮广告方法，希望对大家有所帮助！
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 19:45:11