您好,欢迎来到互利cms 官方网站-内容管理系统,让你体验不一样的建站方式,更简单,更安全,更灵活
  • 登陆-注册
  • 使用手册
  • 常见问题
  • 全国服务热线:18173153117

  • 广告管理
  • 浏览次数:172 作者:旭日东升 日期:2018-09-29 17:28:39
  • 广告管理:
    登录后台-》广告管理-》效果列表
           此功能可以封装任意js jquery图片展示效果效果,只要你会js即可
           开发流程详解:
                        标题:代表一个效果的名称 唯一 不能重复
                        主元素id:代表一个效果最外层的元素id 唯一 不能重复 最好取名复杂点 以免和页面的id冲突
                        被替换的内容:比如你轮播中有很多图片 ,那么图片的那一行就是你要填写的替换内容
                                      不管有多少图片,你只需要写一行被替换的效果的那行代码即可
                        比如(


                        <style type="text/css">
                            #MainRightSuspension{
                                width:120px;
                                height:auto;
                                background:red;
                                margin:0 auto;
                                position:fixed;
                                right:60px;
                                z-index:99999;
                                top:300px;
                            }
                        </style>

                        <div id="MainRightSuspension">

                         <a href="【h变量】"><li><img src="【s变量】"style="width:30px;height:30px;"></li></a>

                         </div>




                        <!--

                        <a href="【h变量】"><li><img src="【s变量】"style="width:30px;height:30px;"></li></a>

    此行就为替换内容-->
    如果是QQ客服的href 那么先需要把QQ链接的地址打入到href=""中,然后在需要改变QQ内容的地方加
    【c变量】即可
    比如:href="http://wpa.qq.com/msgrd?v=3&uin=【c变量】&site=在线客服&menu=yes">
                        )

                        变量规则:
                            【h变量】:代表href=""的地址
                            【s变量】:代表src=""的地址
                            【n变量】:代表客服的名称
                            【c变量】:代表客服号码内容名称
                            【t变量】:代表图片描述
                            【tt变量】:代表图片标题


    调用此效果,在广告列表新增项 选择此效果即可 







    实例1:
    标题:鼠标移动图片上放大图片
    主元素id:enlarge
    被替换的内容:<ul><a href="【h变量】" title="【tt变量】"><img src="【s变量】" alt="【tt变量】"></a></ul>

    html代码:
    <style>

    #enlarge{
        display: block;
        width: 240px;
        position: relative;
        white-space: nowrap;
        height: 500px;
    }
    #enlarge ul{
        width: 240px;
        height: 500px;
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        margin-right: 10px;
    }


    #enlarge ul img{
        float: left;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position:absolute;
    }

    </style>


    <div id="enlarge">
    <ul><a href="【h变量】" title="【tt变量】"><img src="【s变量】" alt="【tt变量】"></a></ul>
    </div>

    <script type="text/javascript">
    $("#enlarge ul").mouseenter(function(){
      var index=$(this).index();
      $("#enlarge ul:eq("+index+") img").animate({"width":"110%","height":"110%","margin-left":"-5%","margin-top":"-5%"},1000);

    })
    $("#enlarge ul").mouseleave(function(){
        var index=$(this).index();
        $("#enlarge ul:eq("+index+") img").animate({"width":"100%","height":"100%","margin-left":"0","margin-top":"0"},1000);
    })



    </script>

    广告列表-》新增

    选择 鼠标移动图片上放大图片

    具体参数如图
    提交后

    只需要复制 {:getAdvCode('13')}他到任意模板即可展示你想要的效果了
  • 站内地图

    Copyright 2018-2028 hlcms. All Rights Reserved. 湘ICP备13008873号-1