您的位置:澳门新葡8455最新网站 > 服务器运维 > 浮动广告艺术日常收罗收拾_javascript才能_脚本之

浮动广告艺术日常收罗收拾_javascript才能_脚本之

发布时间:2019-12-09 15:19编辑:服务器运维浏览(192)

    1左臂恐怕左边的漂浮广告。

    浮动广告艺术经常采撷收拾,悬浮广告收罗收拾

    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 style="height:2000px;"></div>
    <!-- 代码部分begin -->
    <div id="floatright" style="position: absolute; z-index: 10; "></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();
    

    以上内容是笔者给大家收拾的关于悬浮广告格局,希望对大家有着帮衬!

    css样式:

    你恐怕感兴趣的稿子:

    • JS实现悬浮移动窗口(悬浮广告卡塔尔(قطر‎的特效
    • js 左右浮动对联广告代码示例
    • js 左右漂移对联广告特效代码

    1左侧只怕右侧的漂浮广告。 css样式: *{padding: 0;margin: 0;}.fl{float:left;display: inline;}.fr{float...

    *{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;cursor: pointer;}.wrapper ol .active {opacity: 1;filter: alpha;} 
    

    html代码:

    简jQuery左右对称浮动广告代码window.onload = function(){var ad2 = new FloatAd({nodeLink : "&lt;a href='&#24191;&#21578;&#36830;&#25509;&#22320;&#22336;'&gt;&lt;img src='https://www.jb51.net/article/&#24191;&#21578;&#22270;&#29255;' border=0 /&gt;&lt;/a&gt;" ,floatObj : "floatleft",x : 10,y : 400,locate : "left"});ad2.play();} 
    

    js文件除引进jquery外还要求:

    var FloatAd = function{var mainNode = $[0];if(obj.nodeLink && (typeof obj.nodeLink == "string")){var newFloatObj = document.createElement;newFloatObj.id = obj.floatObj;newFloatObj.style.position = "absolute";newFloatObj.style.zIndex = 10;newFloatObj.innerHTML = obj.nodeLink;document.body.appendChild;}this.ad = document.getElementById;this.main = document.getElementById||mainNode;this.x = obj.x;this.y = obj.y;this.locate = obj.locate;this.space = obj.space;var that = this;this.play = function(){setInterval{that.calculate;};}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{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 = *Math.ceil;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 = *Math.ceil;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文件

    漂浮广告 
    

    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 {yPos = yPos + step;}else{yPos = yPos - step;}if {yon = 1;yPos = 0;}if (yPos >= {yon = 0;yPos = ;}if {xPos = xPos + step;}else{xPos = xPos - step;}if {xon = 1;xPos = 0;}if (xPos >= {xon = 0;xPos = ; }}function start(){img1.visibility = "visible";interval = setInterval;}function pause_resume{clearInterval;pause = false;}else{interval = setInterval;pause = true;}}start();
    

    如上内容是笔者给大家收拾的关于悬浮广告艺术,希望对我们持有助于!

    本文由澳门新葡8455最新网站发布于服务器运维,转载请注明出处:浮动广告艺术日常收罗收拾_javascript才能_脚本之

    关键词:

上一篇:没有了

下一篇:Javascript的表单验证