豪情 - 博客园

摘要: 一、JS - modules 数字倒数效果模拟搜索结果项设置标签云选项微博置顶回到顶部二级下拉菜单迅雷评分效果腾讯体育轮换tab菜单单张图片轮换二、JQuery - plugs jQuery插件-轻量图片轮换-UISlide jQuery插件-轻量图片轮换2-UISlide2 jQuery插件-轻量弹出层-UIDialog jQuery插件-轻量滚动条-UIScroll jQuery插件-滚动双联广告 jQuery插件-随便看看 jQuery插件-三级菜单(一二...阅读全文

posted @ 2012-03-21 16:01 豪情阅读(407) 评论(0) 编辑

2013年5月1日

单张图片轮换

单独图片轮换，点击左右按钮，实现翻页效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>单独图片轮换 - 豪情</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#000;}
        table{border-collapse:collapse;border-spacing:0;}
        li{list-style:none;}
        fieldset,img{border:0;}
        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
        a:focus,input,textarea{outline-style:none;}
        textarea{resize:none}
        a{color:#0a8cd2;text-decoration:none;}
        a:hover{color:#f60;text-decoration:underline;}
        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
        .clearfix{display:inline-block;}
        .clearfix{display:block;}
        .none{display:none}
        .demo{width:180px;height:210px;margin:40px auto;background:#fff;padding:25px;border:2px solid #ccc;border-radius:5px;}
        .scrollBox{display:inline;float:left;height:223px;position:relative;width:180px;overflow:hidden;}
        .prev,.next{background:url(http://images.cnitblog.com/blog/100150/201305/01234427-d9c492e118d040ffb59ec9d80955edbb.png) 0 0 no-repeat;}
        .prev{background-position:0 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:20px;width:15px;z-index:99;}
        .next{background-position:-22px 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:0;width:15px;z-index:99;}
        .control{display:inline;float:left;margin:0 auto;width:180px;}
        .control div{float:left;}
        #control_scroll{height:223px;overflow:hidden;position:relative;width:180px;}
        .pic{position:absolute;float:left;}
        .pic li{display:inline;float:left;text-align:left;width:180px;}
        .pic li img.lbimg{height:190px;margin:0 auto 12px;overflow:hidden;width:180px;}
    </style>
</head>
<body>


<div class="demo">
    <div class="scrollBox">
        <div id="prev" class="prev"></div>
        <div class="control" id="container">
            <ul class="pic">
                <li><a href="#"><img class="lbimg" alt="张蓝心登杂志秀美腿" src="http://img1.gtimg.com/sports/pics/hv1/235/122/1287/83718520.jpg" /><br />
                    张蓝心登杂志秀美腿</a> </li>
                <li><a href="#"><img class="lbimg" alt="潘晓婷蕾丝装身姿动人" src="http://img1.gtimg.com/sports/pics/hv1/242/122/1287/83718527.jpg" /><br />
                    潘晓婷蕾丝装身姿动人</a> </li>
                <li><a href="#"><img class="lbimg" alt="泛珠赛车宝贝清丽登场" src="http://img1.gtimg.com/sports/pics/hv1/249/122/1287/83718534.jpg" /><br />
                    泛珠赛车宝贝清丽登场</a> </li>
                <li><a href="#"><img class="lbimg" alt="CBA宝贝热舞助阵" src="http://img1.gtimg.com/sports/pics/hv1/24/188/1286/83670114.jpg" /><br />
                    CBA宝贝热舞助阵</a> </li>
                <li><a href="#"><img class="lbimg" alt="徐冬冬写真姿态优雅" src="http://img1.gtimg.com/sports/pics/hv1/237/122/1287/83718522.jpg" /><br />
                    徐冬冬写真姿态优雅</a> </li>
            </ul>
        </div>
        <div id="next" class="next"></div>
    </div>
</div>
<script type="text/javascript">
(function(window){
    function id(node){
        return typeof node == 'string' ? document.getElementById(node) : node;
    }
    function SingleSlide(obj){
        for(var p in obj){
            this[p] = id(obj[p]);
        }
        this.init.apply(this, arguments);
    }
    SingleSlide.prototype = {
        init : function(){
            var that = this,
                timer = null;
            this.oUl = this.container.getElementsByTagName('ul')[0];
            this.aLi = this.oUl.getElementsByTagName('li');
            this.iMaxWidth = this.aLi[0].offsetWidth;
            this.iNow = 0; // 当前标记
            var bigBox = this.container.parentNode;
            this.oUl.innerHTML += this.oUl.innerHTML;
            this.oUl.style.width = this.aLi[0].offsetWidth * this.aLi.length + 'px';
            timer = setInterval(function(){
                that.auto(that, that.oUl);
            }, 2000);
            this.prevBtn.onclick = function(){
                that.prev(that, that.oUl);
            }
            this.nextBtn.onclick = function(){
                 that.auto(that, that.oUl);
            }
            bigBox.onmouseover = function(){
                clearInterval(timer);
            }   
            bigBox.onmouseout = function(){
                timer = setInterval(function(){
                    that.auto(that, that.oUl);
                }, 2000);
            }
        },
        auto : function(obj, ul){
            obj.iNow++;
            if(obj.iNow >= obj.aLi.length){
                obj.iNow = 0;
            }
            obj.move(ul, -obj.iNow * obj.iMaxWidth);
        },
        prev : function(obj, ul){
            obj.iNow--;
            if(obj.iNow <= -1){
                obj.iNow = obj.aLi.length - 1;
            }
            obj.move(ul, -obj.iNow * obj.iMaxWidth);
        },
        move : function(obj, end){
            var that = this,
                iSpeed = 0;
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                iSpeed = (end - obj.offsetLeft) / 5;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                obj.style.left = obj.offsetLeft + iSpeed + 'px';
            }, 30);
        }
    }
    new SingleSlide({
        container : 'container',
        prevBtn : 'prev',
        nextBtn : 'next'
    });
}(window));
</script>
</body>
</html>

posted @ 2013-05-01 23:42 豪情阅读(75) 评论(0) 编辑

2013年4月26日

2个有焦点时文字消失或变淡效果

有焦点时文字消失。

有焦点时文字变淡。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>请输入关键字查询加强版 - 豪情</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:12px/1.5 arial;background: #fff;}
        .username{ position:relative;margin:30px auto; width:500px;}
        .default{ position:absolute;top:10px;left:2px;padding:0 8px; z-index:1; color:#8B9096;cursor:text;}
        .txt{ position:relative; height:35px; padding:0 6px;border-radius:5px; line-height:35px;background: #fff; border:1px solid #9DADC5;}
    </style>
</head>
<body>
<div class="username">
    <label class="default" id="default" for="txt1">请输入关键字查询</label>
    <input type="text" name="" id="txt1" class="txt" value="" />
</div>
<script type="text/javascript">
    var oTxt = document.getElementById('txt1');
    var oDefault = document.getElementById('default');
    var sOld = oDefault.innerHTML;
    oTxt.onfocus = function(){
        oDefault.style.color = '#ccc';
    }
    oTxt.onblur = function(){
        oDefault.style.color = '#8B9096';
    }
    oTxt.onpropertychange = oTxt.oninput = toChange;
    oTxt.value.length > 0 && (oDefault.innerHTML = '');
    function toChange(){
        if(oTxt.value.length > 0){
            oDefault.innerHTML = '';
        } else {
            oDefault.innerHTML = sOld;
            bWrite = false;
        }
    }
</script>
</body>
</html>

posted @ 2013-04-26 13:47 豪情阅读(44) 评论(0) 编辑

2013年4月10日

滚动标记当前菜单状态

滚动时显示当前主题菜单状态。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>滚动菜单标记 - 豪情</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:12px/1.5 arial;background: #fff;}
        ul,li{list-style: none;}
        a{ color:#666; text-decoration:none;}
        a:hover{ color:#f80;}
        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
        .clearfix{display:inline-block;}
        .clearfix{display:block;}
        .content{ width:980px;margin: 0 auto;}
        .sidebar{ position:fixed; float:left; width:240px; z-index:5;}
        .list{background: #fcfcfc; border:1px solid #c6c6c6;}
        .list li{ padding-left:10px; height:40px; line-height:40px;cursor: pointer;border-bottom: 1px solid #ebebeb;}
        .list li.on{ position:relative; padding:2px 0 2px 10px; margin:-2px 0 2px -1px;background: #70a9d9;}
        .list li.on i{ position:absolute; width:0; height:0;top: 0; right:-15px; overflow:hidden; display:block;border-color:transparent #70A9D9;border-style:solid;border-width:22px 0 22px 15px;}
        .list li.on a{color: #fff; font-weight:bold;}
        .list li a{ font-size:14px;}
        .main{ float:right; width:728px; border:1px solid #c6c6c6;}
        .main h1{ height:57px; line-height:57px; font-size:27px; color:#333; text-align:center;box-shadow:0 -1px 0 #fff inset;border-bottom: 1px solid #c6c6c6; background:-webkit-linear-gradient(center top , #FFFFFF, #F1F1F1) repeat 0 0;background:-moz-linear-gradient(center top , #FFFFFF, #F1F1F1) repeat 0 0;}
        .report-img-box{ position:relative;border-bottom: 1px solid #ccc;}
        .report-desc3{ padding:20px 50px; line-height:20px; height:100%; color:#666; border:20px solid #fff;background: #f5f5f5;}
        .report-desc3 h4{ font-size:22px; color:#333;}
        .report-desc3 li{ padding:20px 0; clear:both;}
        .report-desc3 dt{ position:relative; width:90px; text-align:center; line-height:22px; font-size:18px; font-family:微软雅黑; font-weight:normal; float:left;color: #fff;}
        .report-desc3 dt i{ position:absolute; width:0;right: 0; overflow:hidden; height:0;bottom: 0; border-width:20px 20px 0 0;border-style:solid;border-color:transparent #F5F5F5;}
        .report-desc3 dd{ float:left; width:460px; padding:10px 0 10px 20px;}
        .main .report-img-box{ position:relative; width:728px; padding:20px 0 30px; height:405px; overflow:hidden;border-bottom: 1px solid #ccc;}
        .main .report-img-box img { clip:rect(100px, 728px, 475px, 0px); position:absolute; top:-40px; width:728px; }
        .report-img-box h4{ position:absolute; top:30px; left:18px; font-size:18px; font-weight:bold;}
        .report-desc22,.report-desc23{ position:absolute; padding:0 70px; line-height:20px; color:#666;background: #fff;}
        .report-desc22 dt{ font-style:14; line-height:26px; margin-top:10px; font-weight:bold;}
        .report-desc23 li{ padding-bottom:10px;}
    </style>
</head>
<body>

<section class="content clearfix">
    <aside class="sidebar">
        <ul id="ul" class="list">
            <li id="zzReportMenu1"><a href="javascript:void(0)">> 2012中国网站发展情况</a><em></em></li>
            <li id="zzReportMenu2"><a href="javascript:void(0)">> 中国优质网站发展情况</a><em></em></li>
            <li id="zzReportMenu3"><a href="javascript:void(0)">> 中国低质网站泛滥</a><em></em></li>
            <li id="zzReportMenu4"><a href="javascript:void(0)">> 百度站长平台2013年星火计划</a><em></em></li>
            <li id="zzReportMenu5"><a href="javascript:void(0)">> 2013年网站运营趋势分析</a><em></em></li>
            <li id="zzReportMenu6"><a href="javascript:void(0)">> 2013年网站运营方向几点建议</a><em></em></li>
        </ul>
    </aside>
    <article class="main">
        <h1>2013年中国网站运营发展趋势报告</h1>
        <dl id="dllist" class="dllist">
            <div style="height:auto; padding:0;" class="report-img-box">
                <div class="report-desc3 clearfix">
                    <h4>主要结论</h4>
                    <ul>
                        <li>
                            <dl>
                                <dt style="background-color:#f00000; padding:27px 0;">中国网站<br />
                                    发展概况<em></em></dt>
                                <dd>2012年，PC端网站增速较大，数量较2011年增加29%；PC无线化速度加快，12年PC网站无线化比例达到40%。<br />
                                    中国互联网的生态环境较差，优质站点仅占1/4，低质站点越加泛滥，对中文互联网网站的运营发展产生的负面影响已越来越严重。</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt style="background-color:#2878de;padding:57px 0;">优质/低质<br />
                                    网站情况<em></em></dt>
                                <dd>2012年优质资源中社交网络类及商品类资源占比最高，且增速明显。<br />
                                    2012年，商品供求类资源、高质量视频资源及图片资源的需求有明显增长。<br />
                                    低质网站泛滥,且以采集站数量较为集中，占比约40%，这类网站利用采集方式罗列大量同质内容，并出现文不对题、采集不全、诱导用户点击等多种现象，加以泛滥的弹窗、广告、病毒等严重影响用户的访问安全及阅读使用体验。<br />
                                    中文互联网网站安全问题较为严峻，其中65%的网站存在不同程度的系统漏洞，仅35%的网站处于安全状态。</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt style="background-color:#8c8c8c;padding:65px 0;">2013年<br />
                                    站长平台<br />
                                    星火计划<em></em></dt>
                                <dd><strong>原创星火计划</strong><br />
                                    2013年百度网页搜索与百度站长平台会重点扶持原创网站，建设原创联盟，给予原创、优质站点更高的发展空间。<br />
                                    <strong>网站成长星火计划</strong><br />
                                    2013年百度站长平台计划对原创联盟中的站点开放高级站长工具，给予这些网站更好的发展环境。<br />
                                    <strong>互联网协议星火计划</strong><br />
                                    2013年百度站长平台会挖掘更多站长可使用的协议标签，让百度搜索引擎与网站之间的关系达到更加友好的状态。</dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <dt id="zzReportPart1" class="report-part"> <img src="http://zhanzhang.baidu.com/images/report/title1.png"  alt="" /></dt>
            <dd>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r4.png"  alt="" />
                    <h4>PC网站增速较大 数量较2011年增长29%</h4>
                    <div style="position:absolute; background:#fff; bottom:40px; left:80px;">
                        <p>2012年PC端网站数量仍占大多数，数量已达到千万级别。</p>
                        <p>移动端网站处于快速发展初期，PC无线化速度加快，PC无线化比例达到40%。</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r5.png"  alt="" />
                    <h4>中国互联网的生态环境较差 优质站点仅占1/4</h4>
                    <div style="position:absolute; background:#fff; bottom:12px; left:80px; width:580px">
                        <p>中国互联网生态环境较差，低质站点的比例很高。低质站点的泛滥，对中文互联网网站的运营发展产生的负面影响已越来越严重。</p>
                        <p>优质网站站长应继续完善、丰富原有站点，满足用户需求。</p>
                        <p>新站站长挖掘用户新需求，创造优质原创内容，建设原创的优质站点。</p>
                        <p style="color:#999">* 优质/低质站点综合考量了站点的内容、用户体验等要素。其中优质站点为具有高品质内容，为用户提供独特价值，网站内容得到用户、站长的认可和支持，且具有良好用户体验的网站；低质站点为网站内容大多数为采集页面或具有明显作弊行为的网站。（详细说明可参考百度站长平台资料）</p>
                    </div>
                </div>
            </dd>
            <dt id="zzReportPart2" class="report-part"> <img src="http://zhanzhang.baidu.com/images/report/title2.png"  alt="" />
            </dt>
            <dd>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r6.png"  alt="" />
                    <h4>优质资源中社交网络及商品类资源占比最高且增速明显</h4>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r7.png"  alt="" />
                    <h4>商品供求类资源、高质量视频资源及图片资源的需求有明显增长</h4>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r8.png"  alt="" />
                    <h4>网站页面对搜索引擎友好度不高 80分以上仅占28%</h4>
                    <div style="position:absolute; background:#fff; bottom:20px; left:80px;">
                        <p>针对以上问题，为了更好服务站长，百度站长平台在2012年推出了多种站长工具，如外链分析、关键词查询、百度索引量、页面优化建议、sitemap、抓取异常、百度分享等站长工具。</p>
                        <p style="color:#999">* 友好度衡量包括网站页面对搜索引擎的识别友好度及抓取友好度。 *其他异常包括抓取异常、IP封禁、UA封禁等</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r9.png"  alt="" />
                    <h4>站长平台提供多种工具帮助网站建设及优化</h4>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r10.png"  alt="" />
                    <h4>更多优质网站站长通过sitemap主动向百度提交网站数据</h4>
                    <div style="position:absolute; background:#fff; bottom:58px; left:80px;">
                        <p>2012年百度sitemap工具共引入30亿优质网页其中有2.3亿网页已为网站带来流量。</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r11.png"  alt="" />
                    <h4>页面优化建议工具帮助网站大幅提升页面对搜索引擎的友好度</h4>
                    <div style="position:absolute; background:#fff; bottom:58px; left:80px;">
                        <p>通过页面优化建议工具，站长对网页进行优化后，网站页面对搜索引擎识别的友好度大幅提升。</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r12.png"  alt="" />
                    <h4>安装百度分享后网站来自百度搜索的流量平均提升10%</h4>
                    <div style="position:absolute; background:#fff; bottom:40px; left:80px;">
                        <p>通过百度分享工具，网站的分享量及来自百度搜索流量均有明显提升。</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r13.png"  alt="" />
                    <h4>社交网络、休闲娱乐、游戏、新闻媒体、在线视频、在线音乐站点分发了总分享量的56%</h4>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r14.png"  alt="" />
                    <h4>女性时尚、社交网络、在线音乐等站点内容的社会化传播能力较强</h4>
                    <div style="position:absolute; background:#fff; bottom:60px; left:80px; color:#999">
                        <p>* 回流比=回流量/分享量，即1次分享带来的回流次数，可反映社会化分享媒体的传播深度和广度</p>
                    </div>
                </div>
            </dd>
            <dt id="zzReportPart3" class="report-part"> <img src="http://zhanzhang.baidu.com/images/report/title3.png"  alt="" />
            </dt>
            <dd>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r15.png"  alt="" />
                    <h4>在低质网站中 采集及作弊站点泛滥两种共占比80%</h4>
                    <div style="position:absolute; background:#fff; bottom:20px; left:80px; width:590px">
                        <p>采集站、作弊站点*、垃圾无价值站点在整个互联网资源环境中的比例越来越高，且有主导趋势。优质资源的生存空间在不断减小。百度作为中文搜索的领军者会大力加强对建站规范的引导，致力于改善互联网的生态环境。</p>
                        <p style="color:#999;">* 其中作弊站主要包括存在严重内容型作弊（关键词堆彻穿插等方式）、超链作弊（友链作弊、买卖链接、黑链等方式）、点击作弊及混合多种方式作弊的网站。</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r16.png"  alt="" />
                    <h4>百度网页搜索在改善互联网生态环境方面进行的算法升级</h4>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r17.png"  alt="" />
                    <h4>中文互联网网站存在的漏洞问题严重 仅35%的网站处于安全状态</h4>
                    <div style="position:absolute; background:#fff; bottom:40px; left:80px;">
                        <p>百度站长平台在2012年下半年推出了<strong style="color:red;">安全检测</strong>工具及<strong style="color:red;">漏洞检测</strong>工具</p>
                        <p>超过50万的网站进行安全检测及漏洞情况查询</p>
                        <p>帮助35万的网站及时发现问题</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r18.png"  alt="" />
                    <h4>73%的网站被黑的类型为植入暗链</h4>
                    <div style="position:absolute; background:#fff; bottom:60px; left:80px; width:580px">
                        <p>黑客利用网站的漏洞进行攻击后添加暗链为近几年比较严重的问题，且这种方式更加隐蔽，严重影响搜索引擎对网站质量的评价，并对用户的利益带来更大的安全隐患，站长需要定期进行安全检测。</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r19.png"  alt="" />
                    <h4>2012年受攻击较多地区多为电信增值业务高度发达地区</h4>
                    <div style="position:absolute; background:#fff; bottom:55px; left:80px;">
                        <p>2012年受攻击较多的地区多是电信增值业务高度发达的地区，其中以北京市被攻击占比最高</p>
                    </div>
                </div>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r20.png"  alt="" />
                    <h4>2012年政府机构类网站和购物类网站被攻击的频率最高</h4>
                </div>
            </dd>
            <dt id="zzReportPart4" class="report-part"> <img src="http://zhanzhang.baidu.com/images/report/title4.png"  alt="" />
            </dt>
            <dd>
                <div class="report-img-box"> <img src="http://zhanzhang.baidu.com/images/report/r21.png"  alt="" />
                </div>
            </dd>
            <dt id="zzReportPart5" class="report-part"> <img src="http://zhanzhang.baidu.com/images/report/title5.png"  alt="" />
            </dt>
            <dd>
                <div class="report-img-box">
                    <div class="report-desc22">
                        <dl>
                            <dt>网站需加大原创优质内容建设的力度</dt>
                            <dd>在所有的PC端网站中，低质网站占比高达75%，其中采集泛滥。因此，希望站长在13年加大原创内容的建设力度。百度站长平台在2013年重点推出星火计划，将重点扶持原创，帮助优质站点，通过原创资源引入以及高级工具扶持原创站点，给原创的优质内容更多展现，让原创网站获得更大的发展空间。</dd>
                            <dt>内容是基础，SEO仍需高度关注</dt>
                            <dd>回归理性—规范化的seo方式，扁平的网站结构、规范简单的url、优质的内容等。建立网站推荐体系，互联网信息大爆炸，如何将用户需要的信息推荐到用户眼前是关键；集成社会化网络，随着微博、社交、分享工具等的推出及火爆，搜索引擎会逐步考虑社会化网络因素。</dd>
                            <dt>网站安全问题突出，急需站长重视</dt>
                            <dd>重点关注各种开源程序漏洞报告，及时修复，以免被黑客获取权限给网站带来更多的损失。</dd>
                            <dt>用户对图片的各种需求大幅增长，图片资源也大幅增长，百度会加大对图片资源的应用与合作</dt>
                            <dd>2012年用户对图片类的需求在高速增长，且互联网中的图片资源也在大幅增长，为了更好的满足用户体验，且将优质的图片资源更好的展现给用户，在2013年百度会加大对图片资源的应用与合作。</dd>
                        </dl>
                    </div>
                </div>
            </dd>
            <dt id="zzReportPart6" class="report-part"> <img src="http://zhanzhang.baidu.com/images/report/title6.png"  alt="" />
            </dt>
            <dd>
                <div class="report-img-box">
                    <div class="report-desc23">
                        <p>根据2012年用户的需求趋势，休闲娱乐、影视视频相关、游戏类、教育、B2B五大类需求增长迅速且13年仍将占据主导地位，站长在网站运营过程中可综合考虑用户的这几类需求，加强网站的内容建设。</p>
                        <ul>
                            <li><strong>休闲娱乐类需求：</strong>主要包括小说、动漫及周边、星座算命、娱乐八卦、网络流行内容等细分需求，其中各种包含图片类需求可重点进行关注。</li>
                            <li><strong>影视视频相关需求：</strong>主要包括在线视频、视频下载、影评剧评、综艺节目、网络搞笑等细分需求，建议这类网站深入挖掘视频影视人物关系、视频周边等相关信息进行网站内容建设。</li>
                            <li><strong>游戏类需求：</strong>主要包括单机游戏、游戏下载、页游、装备讨论、攻略等细分需求，且网页游戏需求的增长也是网站内容建设中可去关注的方向。</li>
                            <li><strong>教育类需求：</strong>主要指用户对教育资源的需求，包括教学课件、作文等，网站在运营过程中可考虑教育类资源的深度整合，为用户提供一条龙的信息服务，这也是目前互联网产品发展的大趋势。</li>
                            <li><strong>B2B类：</strong>用户需求比较分散，大量个性化需求没有相应的资源，建议B2B类网站深入分析用户需求，并在具体的行业中做细做深，为用户提供可信的优质资源。</li>
                        </ul>
                        <p>网站页面的整洁度：目前较多网站的广告形式存在弹窗、大面积广告等严重影响用户阅读的广告，这些会对用户带来严重的体验伤害，建议站长在这些广告上进行控制，保持页面的整洁度及良好的用户体验。</p>
                    </div>
                </div>
            </dd>
        </dl>
    </article>
</section>
<script type="text/javascript">
(function(window){
    var oUl = document.getElementById('ul');
    var aLi = oUl.getElementsByTagName('li');
    var oDl = document.getElementById('dllist');
    var aDt = getByClass(oDl, 'report-part');
    var viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
    for(var i = 0; i < aLi.length; i++){
        aLi[i].index = i;
        aLi[i].onclick = function(){
            location.hash = 'zzReportPart' + (this.index + 1);
        }
    }
    var cur;
    window.onscroll = function(){
        for(var i = aDt.length - 1; i > 0; i--){
            if(isView(aDt[i])){
                break;
            }
        }
        if(cur != i){
            !cur ? (aLi[0].className = '') : (aLi[cur].className = '');
            aLi[i].className = 'on';
            cur = i;
        }
    }
    function isView(elem){
        return elem.offsetTop - (document.documentElement.scrollTop || document.body.scrollTop) < (viewHeight / 2);
    }
    function getByClass(oParent, cls){
        if(document.getElementsByClassName){
            return (oParent || document).getElementsByClassName(cls);
        } else {
            oParent   = oParent || document;
            var res   = [],
                child = null,
                reg   = new RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');
            for(var i = 0, len = oParent.all.length; i < len; i ++){
                child = oParent.all[i];
                if(reg.test(child.className)){
                    res.push(child);
                }
            }
            return res;
        }
    }
}(window));
</script>
</body>
</html>

posted @ 2013-04-10 11:21 豪情阅读(48) 评论(0) 编辑

2013年4月7日

腾讯体育轮换tab菜单

没什么技术含量，看到了只想用源生的js来实现一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>腾讯体育轮换tab菜单 - 豪情</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font:12px/1.5 arial;background: #141e38;}
ul,li{list-style: none;}
.demo{width: 320px;margin: 0 auto;padding-top: 80px;}
a{color: #fff;text-decoration: none;}
a:hover{color: #ff0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
.clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
.none{display:none}
.title{height: 33px;line-height: 28px;overflow: hidden;}
.nav a{float: left;font-size: 14px;font-weight: bold;height: 28px;width: 87px;text-align: center;margin-right: 5px;display: inline;background: #333131;color: #fff;}
.nav a.on{height: 33px;color: #ABD4FF;background: url(http://images.cnitblog.com/blog/100150/201304/07233652-68f62c0b28e2476b90520b72044f7a26.gif) 0 0 no-repeat;}
.content{width: 314px;padding-top: 10px;}
.list li{float: left;width: 145px;margin: 0 10px 10px 0;text-align: center;display: inline;color: #fff;}
</style>
</head>
<body>
<section class="demo">
<div class="title">
<nav id="nav" class="nav clearfix">
<a class="on" href="javascript:void(0)">美图速递</a>
<a href="javascript:void(0)">经典回眸</a>
</nav>
</div>
<div id="content" class="content">
<ul class="list">
<li><a target="_blank" href="#"><img alt="卡戴珊孕期着装PK王妃" src="http://img1.gtimg.com/sports/pics/hv1/48/120/1298/84433098.jpg" /><br />
卡戴珊孕期着装PK王妃</a></li>
<li><a target="_blank" href="#"><img alt="阿Sa跳水真人秀亮相" src="http://img1.gtimg.com/sports/pics/hv1/49/120/1298/84433099.jpg" /><br />
阿Sa跳水真人秀亮相</a></li>
<li><a target="_blank" href="#"><img alt="车侑蓝亮相台球展卖萌" src="http://img1.gtimg.com/sports/pics/hv1/51/120/1298/84433101.jpg" /><br />
车侑蓝亮相台球展卖萌</a></li>
<li><a target="_blank" href="#"><img alt="UFC女郎变美国啦啦队长" src="http://img1.gtimg.com/sports/pics/hv1/54/120/1298/84433104.jpg" /><br />
UFC女郎变美国啦啦队长</a></li>
<li><a target="_blank" href="#"><img src="http://img1.gtimg.com/sports/pics/hv1/124/67/1297/84354634.jpg" alt="" /><br />
200J肥男减肥后逆袭女神</a></li>
<li><a target="_blank" href="#" rel="nofollow"><img title="" src="http://img1.gtimg.com/sports/pics/hv1/98/214/1277/83091593.jpg" alt="" /><br />巧祛狐臭，远离尴尬(图)</a></li>
</ul>
<ul class="list none">
<li><a target="_blank" href="#"><img alt="王心凌为棒球赛开球" src="http://img1.gtimg.com/sports/pics/hv1/198/23/1298/84408513.jpg" /><br />
王心凌为棒球赛开球</a></li>
<li><a target="_blank" href="#"><img alt="威廉王子夫妇秀球技" src="http://img1.gtimg.com/sports/pics/hv1/199/23/1298/84408514.jpg" /><br />
威廉王子夫妇秀球技</a></li>
<li><a target="_blank" href="#"><img alt="美女健身教练秀身姿" src="http://img1.gtimg.com/sports/pics/hv1/200/23/1298/84408515.jpg" /><br />
美女健身教练秀身姿</a></li>
<li><a target="_blank" href="#"><img alt="NBA悍将与女友出街" src="http://img1.gtimg.com/sports/pics/hv1/201/23/1298/84408516.jpg" /><br />
NBA悍将与女友出街</a></li>
<li><a target="_blank" href="#"><img alt="莫布里环保活动左拥右抱" src="http://img1.gtimg.com/sports/pics/hv1/50/120/1298/84433100.jpg" /><br />
莫布里环保活动左拥右抱</a></li>
<li><a target="_blank" href="#" rel="nofollow"><img src="http://img1.gtimg.com/sports/pics/hv1/217/192/1173/76323502.jpg" alt="" /><br />喝酒“千杯不醉”有秘诀</a></li>
</ul>
</div>
</section>
  <script type="text/javascript">
(function(window){
     var oNav = document.getElementById('nav');
     var aAnchors = oNav.getElementsByTagName('a');
     var oContent = document.getElementById('content');
     var aUl = oContent.getElementsByTagName('ul');
     var timer = null;
     var num = 0;
     function auto(){
         timer = setInterval(function(){
             if(num >= aAnchors.length){
                 num = 0;
             }
             play(num);
             num ++;
         }, 2000);
     }
     auto();
     function play(v){
         for(var i = 0; i < aAnchors.length; i++){
             aAnchors[i].className = '';
             aUl[i].style.display = 'none';
         }
         aAnchors[v].className = 'on';
         aUl[v].style.display = 'block';
     }
     for(var i = 0; i < aAnchors.length; i++){
         aAnchors[i].index = i;
         aAnchors[i].onmouseover = function(){
             clearInterval(timer);
             play(this.index);
         }
         aAnchors[i].onmouseout = function(){
             timer = setTimeout(function(){
                 play(0);
                 auto();
             }, 500);
         }
         aUl[i].onmouseover = function(){
             clearInterval(timer);
         }
         aUl[i].onmouseout = function(){
             timer = setTimeout(function(){
                 play(0);
                 auto();
             }, 500);
         }
     }
}(window));
</script></body>
</html>

posted @ 2013-04-07 23:41 豪情阅读(79) 评论(0) 编辑

2013年4月2日

迅雷评分效果

1. 鼠标点击评分之后不能再次评分。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>迅雷评分效果 - 豪情</title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .none{display:none} .demo{ position:relative; width:300px;margin:0 auto; padding-top:120px;} .list li{ float:left; width:16px; height:16px; margin-right:3px;cursor:pointer; display:inline; overflow:hidden; background:url(http://images.cnitblog.com/blog/100150/201304/02220917-50348f051a004a7385e4aaafcc3ce7a6.png) 0 -16px no-repeat;} .list li.cur{ background-position:0 0;} .score{ font-size:14px; color:#f60; padding:0 5px;} .text{ position:absolute; padding:3px 5px; left:135px;top:120px; border:1px solid #ccc;} </style> </head> <body> <div id="demo" class="demo"> <ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p class="score"></p> <p class="text none">力荐</p> </div> <script type="text/javascript"> var oDemo = document.getElementById('demo'); var oUl = oDemo.getElementsByTagName('ul')[0]; var oScore = oDemo.getElementsByTagName('p')[0]; var oP = oDemo.getElementsByTagName('p')[1]; var aLi = oUl.getElementsByTagName('li'); var oLi = null; var aData = ['较差', '一般', '好看', '推荐', '力荐']; var bCheck = false; for(var i = 0; i < aLi.length; i++){ var first = null; aLi[i].index = i; oLi = aLi[i]; oLi.onmouseover = function(){ for(i = 0; i < aLi.length; i++){ aLi[i].className = ''; } for(var j = 0; j <= this.index; j++){ aLi[j].className = 'cur'; } oP.style.display = 'block'; oP.innerHTML = aData[this.index]; if(!bCheck){ oScore.innerHTML = (this.index + 1) * 20 + '分'; } } oLi.onclick = function(){ if(!bCheck){ first = this.index; bCheck = true; alert('评分成功!'); } else { for(i = 0; i < aLi.length; i++){ aLi[i].className = ''; } for(var j = 0; j <= first; j++){ aLi[j].className = 'cur'; } alert('你已评过分!'); } } } </script> </body> </html>

posted @ 2013-04-02 22:11 豪情阅读(67) 评论(0) 编辑

2013年4月1日

解决input[type=number]无法显示非数字字符的问题

摘要: 在移动端webview实现的页面中，有数字的地方必须使用input type="number"类型的input，否则触发后的键盘为全键盘，而非数字键盘。但另外的一个问题是，input 为 type="number" 类型的无法显示非数字字符，比如：12/23中/。只能采取另外的思路来解决，比如：显示的时候用非number类型的input或其它元素，当触发onfocus后，利用js 动态修改为number类型。<inputclass="pg-page-num"type="text"name="&quo阅读全文

posted @ 2013-04-01 13:04 豪情阅读(58) 评论(0) 编辑

2013年3月26日

二级下拉菜单

摘要: 看似简单的一个菜单，确需要不少的知识点。1. getByClassgetElementsByClassName已经有大部分现代浏览器支持了，只有ie6,ie7,ie8是不支持的。所以对ie6,7,8做特别的处理就行，而ie里边有个内置的属性一直被我们所忽略，document.all，这个比一般的document.getElementsByTagName('*')或许要快一点。2. setTimeout 的巧妙用法。当鼠标离开某个区域时，延时隐藏另外一个区域，而到另外一个区域是清除这个定时器。 <!DOCTYPE html PUBLIC "-//W3C//DTD 阅读全文

posted @ 2013-03-26 21:59 豪情阅读(84) 评论(0) 编辑

2013年3月25日

回到顶部

摘要: 回到顶部 - 豪情运行代码阅读全文

posted @ 2013-03-25 11:07 豪情阅读(82) 评论(0) 编辑

2013年3月18日

微博置顶

摘要: 要求：微博置顶,点击链接移动到首条 <!DOCTYPE HTML><html><head> <meta charset="UTF-8" /> <title>微博置顶 - 豪情</title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:colla阅读全文

posted @ 2013-03-18 08:56 豪情阅读(77) 评论(0) 编辑

2013年3月14日

模拟搜索结果项

摘要: 要求：1. 点击input框显示下拉列表。2. 选中下拉列表值后关闭列表。3. 方向键可选列表中的项。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <m阅读全文

posted @ 2013-03-14 10:31 豪情阅读(79) 评论(0) 编辑

2013年3月13日

png-24在ie6中的几种透明方法

摘要: 由于游戏类官网在页面背景和装饰人物的设计上追求画丽且与游戏风格想匹配，这就给前端页面制作人员带来了很多的麻烦，一个页面的制作主要时间和精力花费在兼容ie6上，而ie6因为不兼容png-24的图片一直被开发人员所鄙视。由于市场决定了页面的存在的价值，所以ie6还是必须要兼容。下面介绍几种常用的解决办法：dd_belatedpng.js法引入js文件<!--[ifIE6]><scripttype="text/javascript"src="js/dd_belatedpng.js"></script><script&g阅读全文

posted @ 2013-03-13 10:46 豪情阅读(127) 评论(0) 编辑

2013年3月12日

在sublime-text中设置浏览器预览

摘要: 配置在Chrome,Firefox中打开安装 SideBarEnhancements然后通过ctrl + k, ctrl + b打开侧边栏，在侧边栏的文件中右击，找到 open width -> edit applications然后在这里边设置firefox打开的方式。application : 路径要修改为自己默认安装的路径。[{"id":"side-bar-files-open-with","children":[//applicationfirefox{"caption":"firefox&阅读全文

posted @ 2013-03-12 10:44 豪情阅读(354) 评论(0) 编辑

2013年3月11日

设置标签云选项

摘要: 标签云的设置：1. 点击输入框时，弹出一个div2. 点击链接，相应的值出现在标签后的input中。3. 有多选，单选可以设置4. 标签项可以通过json设置<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>title-jquery-tag</title><style type="text/css">*{ margin:0; padding:0;}body{font:12px/1.125 Arial,Hel阅读全文

posted @ 2013-03-11 21:24 豪情阅读(94) 评论(0) 编辑

2013年3月8日

dom 的添加或事件绑定

摘要: dom 的添加或事件绑定 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html阅读全文

posted @ 2013-03-08 22:51 豪情阅读(93) 评论(0) 编辑

2013年1月1日

滚动双联广告

摘要: 一个简单的效果，主要考验对queue的理解。 test-group-following关闭运行代码Form: jQuery动画高级用法（上）——详解animation中的.queue()函数 jQuery中queue和dequeue的用法 jQuery的deferred对象详解(from:　狐狸) jquery api queue阅读全文

posted @ 2013-01-01 11:42 豪情阅读(183) 评论(0) 编辑

2012年12月30日

Sublime-text gitHub 问题收集

摘要: sublime-text-github为了防止同样的问题被不同的人问题多次，所以正好把不同的问题收集下来放到一块。阅读全文

posted @ 2012-12-30 12:54 豪情阅读(161) 评论(0) 编辑

Sublime-text theme 颜色主题

摘要: 主题文件下载：Monokai.rar 替换办法： Preferences -> Browser packages -> Color Scheme - DefalutPreferences -> Browser packages -> Color Scheme - Defalut 覆盖文件物理位置(win7)： C:\Users\用户名\AppData\Roaming\Sublime Text 2\Packages\Color Scheme - DefaultC:\Users\用户名\AppD...阅读全文

posted @ 2012-12-30 11:11 豪情阅读(489) 评论(0) 编辑

2012年12月24日

JQ效果:随便看看

摘要: $(function($){$.fn.changeList=function(options){vardefaults={tag:'li',//tabnamesubName:'.utilTabSub',//subclassnameeventType:'click',//eventtypenum:4,showType:'show'//showeffecttype},opts=$.extend({},defaults,options),that=$(this),subUl=that.find(opts.subName),subItem阅读全文

posted @ 2012-12-24 23:38 豪情阅读(236) 评论(0) 编辑

2012年12月5日

TypeError: a.replace is not a function 错误

摘要: jquery 如果是单属性css(width,width),会报：TypeError:a.replaceisnotafunction错误，查半天要加引号。css('width',width),如果是对象形式就不会了:css({width:width})阅读全文

posted @ 2012-12-05 15:15 豪情阅读(143) 评论(0) 编辑

2012年11月26日

Sublimetxt-keymap

摘要: 默认的快捷键 1. Ctrl+L 选择整行（按住-继续选择下行） 2. Ctrl+Shift+K 删除整行， ctrl + KK 从光标处删之行尾，Ctrl+K Backspace 从光标处删除至行首 3. Ctrl+Shift+D 复制光标所在整行，插入在该行之前 4. Ctrl+D 选词（按住-继续选择下个相同的字符串，再按，可跳到相应的方法定义处 5. Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号） 6. Ctrl+/ 注释整行（如已选择内容，同...阅读全文

posted @ 2012-11-26 13:28 豪情阅读(231) 评论(0) 编辑

仅列出标题下一页

公告