[自用门户]门户飘窗功能代码，加在最底部，body标签内就行

来源：互联网发布：update mysql 编辑：程序博客网时间：2024/06/10 10:51

http://note.youdao.com/noteshare?id=179e661d0d6a2de8519433faa8096e7b&sub=772E07EED8E2439082556119E2A46433

-----------------------------代码分割线---------------------------------------------------------

<!-- *****飘窗all-开始（包含css+html+js）***** --><!-- 飘窗样式 --><style  type="text/css">.floatwindows{width:350px;height:260px;position: absolute;top: 100px;left: 0;z-index: 9999999999999;}.floatwindows .floatwindows_content{width:350px;height: 235px;position: absolute;overflow:hidden;}.floatwindows_content .i-close{position: absolute;right: 38px;top: 16px;width: 35px;height: 30px;}.floatwindows_content ul {    position: absolute;    left: 19%;    top: 26%;    width: 220px;    height: 150px;}.floatwindows_content ul li{width: 200px;height: 100px;top: 30%;position: absolute;padding: 0 10px;}.floatwindows_content ul li a span{    word-wrap:break-word;/*white-space: pre-wrap;保留空白*//*overflow:visible; letter-spacing: 5px; */line-height: 25px;font-size:20px;font-weight: bold;color: #FED078;/*a标签变成块状然后居中*/display: block;text-align: center;}</style><!-- 飘窗页面前端html代码 --><div  class="floatwindows" id="target" style="">    <!-- 飘窗内容及背景 --><div class="floatwindows_content"  style=""><img width="350" src="${res}/images/i_pic.png" alt="" style=""  ><!-- 关闭按钮 --><a class="i-close" href="javascript:;"  style=""><!-- <img width="40" src="${res}/images/i_close.png "> --></a><!-- 飘窗内容 --><ul style=""><!--**配置栏目内容的值，channelId=""这里的值就是后台栏目的id，conunt="1"代表只显示1条数据 -->[@cms_content_list channelId='303' count='1' titLen='18' descLen='50' append='...' orderBy='2' channelOption='1'  dateFormat='yyyy-MM-dd']  [#list tag_list as c] <li class="floatwindows_li" style=""><a href="${c.url}" title="${c.title}" target="_blank" style=""><span class="floatwindows_text" style="">[@text_cut s=c.title len=titLen append=append/]</span></a></li>  [/#list]  [/@cms_content_list]  </ul>    </div>    </div>  <!-- 飘窗js开始 --><script>    $('.i-close').click(function () {        $('#target').hide()    });    $(function() {        var i = j = 1;        var e = $("#target");        var win = $(window);        function intern() {            var width = e.width();            var height = e.height();            var left = parseInt(e.css("left"));            var top = parseInt(e.css("top"));            var windowWidth = win.width();            var windowHeight = win.height();            if (windowWidth - width < (left + i)) {                i = -i;            } else if ((left + i) < 0) {                i = -i;            }            if (windowHeight - height < (top + j)) {                j = -j;            } else if ((top + j) < 0) {                j = -j;            }            e.css({                left: left + i,                top: top + j            });        }        setInterval(intern, 40);    });</script><!-- 飘窗js结束 --><!-- *****飘窗all-结束（包含css+html+js）***** -->

----------------分割线--------------------------------------------------------

效果图

1.操作。找到首页html页面，备份好，然后修改里面的内容（如需要加飘窗，复制代码在</body>前面），提交，记得改掉需要复制代码的channelId=""里面的值，改成需要显示的栏目如

2.(图片需要上传到配置-资源-default-images-上传文件）

以下为原背景图，

链接：https://share.weiyun.com/1fb8741df390638ad4bd74852f6c256b（密码：4rr0）

阅读全文

0 0