组件

道聚城特性需求和运营活动较多，每个业务涉及内容不一，现提供一些常用的组件和工具，方便大家日常开发和使用！

PC端功能类组件

道聚城活动通用头和底

使用场景：PC端专题和各个游戏运营活动

道聚城官网通用头部：//js01.daoju.qq.com/common/js/act/dj_header_v2.js，示例如下：

 

<style>
    body{padding-top:42px;}
</style>
                

<script src="//js01.daoju.qq.com/common/js/act/dj_header_v2.js"></script>                    

道聚城官网通用底部：//ossweb-img.qq.com/images/js/foot.js，示例如下：

 

<style>
    /*footer*/
    #footer_ied{min-width:1200px;background:#333;color:#757575;text-align:center;line-height:19px;font-family:Tahoma;font-size:12px}
    #footer_ied .wrap_ied{width:1200px;margin:0 auto;padding:30px 0;background:#333;}
    #footer_ied p.e{font-size:10px}
    #footer_ied a{color:#757575;text-decoration:none}
    #footer_ied a:hover{color:#fff;text-decoration:underline}
</style>
                

<script src="//ossweb-img.qq.com/images/js/foot.js"></script>                    

聚诚品活动通用头和底

使用场景：PC端聚诚品各个游戏运营活动

聚诚品通用头部：js01.daoju.qq.com/zb/mall/js/header.js

聚诚品通用底部：js01.daoju.qq.com/zb/mall/js/footer.js

额外的，需要引入官网标准底部，可以再次引入：ossweb-img.qq.com/images/js/foot.js，已做兼容。完整示例如下：

 

<script src="//js01.daoju.qq.com/zb/mall/js/header.js"></script>
<script src="//js01.daoju.qq.com/zb/mall/js/footer.js"></script>
<script src="//ossweb-img.qq.com/images/js/foot.js"></script>
<script>
~function () {
        var getElementsByClass = function (className, parentElement) {
            var elements = [];
            var match = navigator.userAgent.match(/msie (\d)/i);
            if (match && match[1] < 9) {//ie版本小于9时
                var tmpElem = parentElement.getElementsByTagName('*');
                for (var i = 0; i < tmpElem.length; i++) {
                    tmpElem[i].clasName.indexOf(className) != -1 && elements.push(tmpElem[i]);
                }
            } else {
                elements = parentElement.getElementsByClassName(className);
            }

            return elements;
        };
        var footer_ied = document.getElementById('footer_ied');
        //var wrap_ied = footer_ied ? getElementsByClass('wrap_ied', footer_ied)[0] : null;
        //var p = wrap_ied ? wrap_ied.childNodes[1] : null;
        var wrap_ied = footer_ied.childNodes[0];
        var p = footer_ied.getElementsByTagName('p')[1];
        if (p) {
            var dom = document.createElement('p');
            dom.innerHTML = [
                //'粤府新函[2001]87号',
                '粤网文[2014]0633-233号',
                //'网络视听许可证1904073号',
                '增值电信业务经营许可证：粤B2-20090059',
                'B2-20090028',
                '违法和不良信息举报电话：0755-83767606'
            ].join(' ');
            wrap_ied.insertBefore(dom, p);
        }
    }();
</script>
                

Milo

使用场景：商城和专题运营活动中

点击链接查看详情Milo js库

PPT数据上报

使用场景：商城和专题运营活动中

点击链接查看详情PPT数据上报

九宫格抽奖组件

使用场景：PC端支持(兼容IE8及以上浏览器)

由于flash浏览器以后不再支持，所以写了个九宫格抽奖模拟flash的抽奖效果，整个demo请查看http://sh-svn.tencent.com/ied/ied_mkd_rep/daoju_proj/trunk/daoju_html/专题活动组件/pc端功能组件/九宫格抽奖目录中文件。

 

<style>
/*具体样式根据页面调整*/
.cj-left .jplist{margin-top:30px;width:565px;height:452px;}
.cj-left .jplist li{float:left;margin:0 12px 14px 0;width:175px;height:138px;position:relative;}
.cj-left .jplist li .jpbox{position:relative;width:175px;height:138px;}
.cj-left .jplist li .jpbox .zzc{position:absolute;top:0;left:0;width:175px;height:138px;z-index:10;background:#fff;border-radius:30px;opacity:0;filter:alpha(opacity:0);-webkit-transition:all 0.2s;transition:all 0.2s;}
.jplist li .jpbox img,.jplist li .act-btn-cj img{display:block;width:100%;height:100%;}
.jplist li .jpname{position:absolute;bottom:12px;left:0;z-index:1;height:20px;line-height:20px;width:100%;text-align:center;font-size:16px;color:#fff;}
.jplist li .act-btn-cj{display:block;width:175px;height:138px;overflow:hidden;}
.jplist li.active .jpbox .zzc{opacity:0.3;filter:alpha(opacity:30);}
</style>
                

<script>
//九宫格抽奖轮播动画支持IE8以上
var luck= {
    index:-1,   //当前转动到哪个位置，起点位置
    count:0,    //总共有多少个位置
    timer:0,    //setTimeout的ID，用clearTimeout清除
    speed:120,   //初始转动速度
    times:0,    //转动次数
    cycle:50,   //转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize:-1,   //中奖位置
    btnclick:false, //抽奖按钮是否点击
    init:function(id, clickId){
        var _this = this;
        if ($("#"+id).find(".luck-unit").length>0) {
            $luck = $("#"+id);
            $units = $luck.find(".luck-unit");
            _this.obj = $luck;
            _this.count = $units.length;
            $luck.find(".luck-unit-"+_this.index).addClass("active");  
            $("#"+clickId).click(function(){     
                if(_this.btnclick) {
                    return false;
                }else{
                    _this.prize = Math.random()*(_this.count)|0;    
                    _this.rollEvent();
                    _this.btnclick=true;
                    return false;
                }            
            });
        };
    },        
    roll:function(){
        var _this = this;
        $(_this.obj).find(".luck-unit-"+_this.index).removeClass("active");
        _this.index += 1;
        _this.times += 1;
        if (_this.index>_this.count-1) {
            _this.index = 0;
        };
        $(_this.obj).find(".luck-unit-"+_this.index).addClass("active");        
        if (_this.times > _this.cycle+5 && _this.prize==_this.index) {//获奖处理
            clearTimeout(_this.timer);
            //TGDialogS('pop-cj');//显示抽奖结果
            _this.prize=-1;
            _this.times=0;
            _this.btnclick=false;            
        }else{
            if (_this.times<_this.cycle) {
                if (_this.speed<50) {
                    _this.speed=50;
                }else{
                    _this.speed -= 10;            
                }
            }else{
                _this.speed += 20;
            }
            _this.timer = setTimeout(function(){_this.rollEvent(_this);},_this.speed);
        }   
        return false;
    },
    rollEvent:function(){   
        var _this = this;
        _this.roll();
    }
};
luck.init('luckbox','btn-cj');
</script>                    

文字上下无缝轮播组件

使用场景：PC端支持(兼容IE7及以上浏览器)

由于flash浏览器以后不再支持，所以写了个九宫格抽奖模拟flash的抽奖效果，整个demo请查看http://sh-svn.tencent.com/ied/ied_mkd_rep/daoju_proj/trunk/daoju_html/专题活动组件/pc端功能组件/文字无缝向上轮播目录中文件。

 

<style>
/*具体样式根据页面调整*/
.rewardlist{margin:30px auto 0;padding:0;width:530px;height:152px;text-align:center;overflow:hidden;}
.rewardlist ul{height:auto;}
.rewardlist ul li{line-height:26px;height:26px;font-size:14px;color:#3addff;}
</style>
                
   
<script>
//文字上下无缝滚动,行数越多越自然IE7以上有效
;(function(){
    function ScrollTxt(boxId,ulId1,ulId2,direction,interval){
        //把之前存储获取元素的变量都作为当前实例的私有属性
        this.scrbox = document.getElementById(boxId);
        this.ul1 = document.getElementById(ulId1);
        this.ul2 = document.getElementById(ulId2);
        this.li = this.ul1.getElementsByTagName("li")[0];
        this.ul2.innerHTML = this.ul1.innerHTML;
        this.time = 30 || interval;
        this.direction = "up" || direction;
        this.mytimer = {};

        //返回当前实例
        return this.init();
    }
    $.extend(ScrollTxt.prototype,{
        constructor:ScrollTxt,
        //实现向上轮播
        scrollUp: function(obj){
            //条数很少时不滚动
            if(obj.scrbox.offsetHeight + obj.li.offsetHeight >= obj.ul1.offsetHeight*2){
                return false;
            }
            if(obj.scrbox.scrollTop + obj.scrbox.offsetHeight >= obj.ul1.offsetHeight*2){
                obj.scrbox.scrollTop -= obj.ul1.offsetHeight;
            }else{
                obj.scrbox.scrollTop++
            } 
        },
        autoMove:function(){
            var _this = this;
            _this.mytimer=setInterval(function(){
                _this.scrollUp(_this);
            },_this.time);
        },
        mouseEvent: function(){
            var _this = this;
            _this.scrbox.onmouseover=function(){
                clearInterval(_this.mytimer);
            }
            _this.scrbox.onmouseout=function(){
                _this.mytimer=setInterval(function(){
                    _this.scrollUp(_this);
                },_this.time);
            }            
        },         
        //当前插件的唯一入口 命令模式:init相当于指挥室，指挥各军队协同作战
        init:function(){
            var _this = this;
            this.mouseEvent();
            this.autoMove();
            return this;
        } 
    });
    window.ScrollTxt = ScrollTxt
})()
</script>                    

道聚城专题活动通用登录

使用场景：PC端各个游戏专题运营活动需要个人信息的页面

道聚城登录请参考demo：http://act.daoju.qq.com/act/ceshi/act/demo.html，多个场景引用不同的js，例如：端游QQ登录（pc,h5）、 手游游戏外openid登录（qq,wx）和手游内嵌活动（gamein）等；

 

<style>
    .login{position:absolute;top:5px;left:0;width:100%;height:47px;line-height:47px;text-align:center;color:#fff601;font-size:14px;z-index:10;}
    .login a{color:#fff601;}
    .login .unlogin{height:30px;line-height:30px;text-align:center;display:inline-block;color:#fff601;}
</style>
                

<!--  登录状态 -->
<div class="login">
    <!-- 登录前状态 Start -->
    <p id="unlogin">您好，请 <a href="javascript:;" class="unlogin" id="dologin">[登录]</a></p>
    <!-- 登录前状态 End -->
    <!-- 登录后状态 Start -->
    <p id="logined" style="display:none">欢迎您，<span id='login_qq_span'></span>，
        <a href="javascript:;" id="dologout">[注销]</a>
    </p>
    <!-- 登录后状态 End -->
    <p id="key_info" style="margin-top:15px"></p>
</div>   
<script src="//ossweb-img.qq.com/images/js/milo/milo.js"></script>                  

弹出层

使用场景：PC端商城和各个专题运营活动

需要引入milo：//ossweb-img.qq.com/images/js/milo/milo-min.js，示例如下：

              
 
<script src="//ossweb-img.qq.com/images/js/milo/milo-min.js"></script>   
<script>
function TGDialogS(e){
    need("biz.dialog-min",function(Dialog){
        Dialog.show({
            id:e,
            bgcolor:'#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
            opacity:50      //弹出“遮罩”的透明度，格式为｛10-100｝，可选
        });
    });
}
function closeDialog(){
    need("biz.dialog-min",function(Dialog){
        Dialog.hide();
    });
}
</script>                  

腾讯视频

使用场景：商城和专题运营活动中需要引用视频的页面

点击链接查看详情腾讯视频

滚动条插件

使用场景：商城和专题运营活动页面

点击链接查看详情http://sh-svn.tencent.com/ied/ied_mkd_rep/daoju_proj/trunk/daoju_html/专题活动组件/pc端功能组件/滚动条插件