彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-11-28 11:53 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

二回微博美化经验【彩世界平台官方网址】

增添导航栏菜单

  1. 总体效果与利益
    • 本人新扩展了叁个菜单项--小说分类,鼠标移入时会下拉展现全数的归类,接纳分类步入对应页面。
    • 效果图如下:
      彩世界平台官方网址 1
  2. 切切实实落到实处思路
    • 先是加多菜单项,小编是将【随笔分类】增加到【联系】从前,由此先得到【联系】的DOM节点,然后成立多个同级节点【小说分类】,使用insertBefore方法插入新节点。
    • 接下来是开创出拉列表,先定义一个div区域,获取小说分类的个数,然后叁个循环动态地丰盛分类项到分类容器category_container中,然后将分类容器增加到div区域中。
    • 中间div区域的职位是动态增加的,即获得【小说分类】的岗位,然后通过fixedCategories.css({"left": newCategory.getBoundingClientRect().left, "top": newCategory.getBoundingClientRect().bottom});动态加多css样式。
  3. 凌驾的标题
    • 由于新加上的菜单项的归类列表是写死的,大家不能不通过给定的id调用,通过document.getElementById("sidebar_postcategory").getElementsByTagName("ul")[0];来获得分类列表的汇合,作者于今没调节和测量检验出来那句话赢得了何等,只是轻松的用它拿走了归类的个数len。
    • 当然想接着增加三个【标签】的菜单项,结果给定的竹签调控器没有id,DOM技能学的非常不够多,不明白什么赢得什么都并没有的要素,由此就不折腾了。
    • 是因为乐乎侧面栏脚本总是最终加载,由此document.getElementById("sidebar_postcategory")有时会得到空值以致不显得列表项,尽管此脚本增多了onload延迟加载,不过edge浏览器临时依然有标题,Google浏览器就非常少现身难题,刷新页面直到展现正是。
    • 四个本子都以增多在页尾html代码中,须要提请js权限。
    • 手提式有线电电话机浏览页面包车型客车话,点击目录大概【小说分类】显示内容,点击空白隐蔽内容。
  4. 实现js
<div class="fixedCategories" style="position: absolute;display: none"></div>

<!-- 添加新导航 分类js -->
<script type="text/javascript">
$(function() {
    var curNode = document.getElementById("blog_nav_contact");
    var newCategory = document.createElement("li");
    newCategory.innerHTML="<li><a class="menu" id="blog_nav_category" href="#" click="showCategories()">随笔分类</a></li>";
    curNode.parentNode.insertBefore(newCategory, curNode);
    fixedCategories.css({"left": newCategory.getBoundingClientRect().left, "top": newCategory.getBoundingClientRect().bottom});
});
</script>


<!-- 分类生成下拉列表 -->
<script type="text/javascript">
    var fixedCategories=$('.fixedCategories');
    function showCategories(){

        fixedCategories.show();
        //$(fixedCategories).slideToggle("fast");
    };
    $(window).load(function() {

        var cgs = document.getElementById("sidebar_postcategory").getElementsByTagName("ul")[0];
        var len = cgs.children.length;

        function createCategories(){
            var category_container=$('<div id="cgcontainer" style="border:solid 3px #CAFF70; background:#FFFFFF;width:200px;padding:4px 10px;"></div>');

            var categories=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');


            category_container.append(categories);
            fixedCategories.append(category_container);

            for(var i = 0; i < len; i  ){
                var cgid = "CatList_LinkList_0_Link_"   i;
                categories.append('<li style="list-style:decimal"><a href="'   document.getElementById(cgid).href   '">'   document.getElementById(cgid).innerHTML   '</a> </li>');
            }
    };

    createCategories();

    $("#blog_nav_category").mouseover(
        function(){
            fixedCategories.show();
        }
    );
    $("#blog_nav_category").mouseout(
        function(){
            fixedCategories.hide();
        }
    );
    $("#cgcontainer").mouseover(
        function(){
            fixedCategories.show();
        }
    );
    $("#cgcontainer").mouseout(
        function(){
            fixedCategories.hide();
        }
    );



});
</script>

jquery常用事件(收拾卡塔 尔(阿拉伯语:قطر‎

Jquery事件

(意气风发)、事件列表。

  1.blur()      当失去焦点时接触。包含鼠标点击离开和TAB键离开。

  2.change()     当成分获得关节后,值退换失去核心事触发。

  3.click()      当鼠标单击时接触。

  4.dblclick()     当鼠标双击时接触。

  5.error()      当javascript出错或img的src属性无效时接触。

  6.focus()     当成分取得关节时接触。注意:某个对象不扶助。

  7.focusin()    当成分或其子成分获得关节时接触,与focus()不一样在于可以检查评定其里面子元素获取关节的情况。

  8.focusout()    当成分可能其子成分失去大旨时接触,与focusout()差距在于能够检测内部子成分失去大旨的情景。 

  9.keydown()   当键盘按下时接触。

  10.keyup()    当开关放手时触发。

  11.mousedown()    当鼠标在要素上点击后触发。

  12.mouseenter()    当鼠标在要素上穿过时触发。mouseenter与mouseover的分别是,鼠标从mouseover的子成分上穿过时也会触发而mouseenter不会。

  13.mouseleave()    当鼠标从要素上移出时接触。

  14.mousemove()    当鼠标在要素上活动时接触。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。

  15.mouseout()     当鼠标从要素上移开时接触。

  16.mouseover()     当鼠标移入成分时接触。

  17.mouseup()     当鼠标左键按下放出时接触。

  18.resize()       当浏览器窗口大小退换时接触。 $(window).resize();

  19.scroll()        当滚动条产生变化时接触。

  20.select()       当input里的内容被入选时接触。

  21.submit()       提交选中的表单。

  22.unload()       当页面卸载时接触。  

(二)、事件常用方法

    1、绑定事件

    语法:bind(type,[data],fn)  type参数能够是最上部的26个点子(注意:不可能带括号); 参数data是属性值传递给事件指标的附加数据,fn是管理函数。可以bind四个事件,也可认为同一事件绑定两个函数。

    $("#div1").bind("change",function(){ alert("你好!"); })

    $("#div1").bind("click mouseout",function(){ alert("你好!"); })

    2、切换事件

      语法:hover(fn1,fn2);    鼠标移入实施第贰个函数,鼠标移出施行第1个函数。也正是mouseenter与mouseleave。

        $("#div1").hover(function(){alert("鼠标移入自身呀");},function(){alert("鼠标移出小编啊!");})

    3、顺序实践事件

      语法:toggle(fn1,fn2,fn3...)  当鼠标单击时,依次施行绑定的风浪

        $("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})

    4、unbind 移除事件

      语法:unbind([type],[fn])     移除成分已经绑定的风浪,type:钦点要移除的平地风波,fn内定要移除的格局。当未有参数时,全数的风浪都移除。注意,用live()方法绑定的法子移出不了,live()绑定的办法要用它自个儿的die()来移出。

        $(":button").unbind();   移除按键的有所事件。

        $(":button").unbind("click");   移除按键的单击事件。

        $(":button").unbind("click",fn1);   移除按键的单击事件中的fn1函数,假若该事件绑定了三个函数,对其余函数没影响。

    5、one 仅施行壹遍的风云

      语法:one(type,[data],fn)    绑定三个仅施行二遍的风浪

        $("#div1").one("click",function(){ alert("小编只进行三遍!"); })

    6、trigger DOM加载完成后自行实行的事件

      语法:trigger(type,[data])    DOM成分加载成功后自动试行

      $("#div1").bind("bclick",function(){ alert("你好"); });

      $("#div1").trigger("bclick");    //注意,trigger一定要放在绑定的风浪现在,不然不试行。

    7、live() DOM根节点绑定事件

      语法:live(type,[fn])     String,Function

         live(type,[data],false) String,Array,bool

      live()在根节点绑定事件,通过事件冒泡到DOM根节点($(ducoment)),再对照触发事件的因一直剖断事件是不是应该实行。作用不高,由此不能够一心代替bind()可是有个低价,正是前期加载出来的因素相似能够绑定。不过有个毛病,正是live()方法唯有能利用CSS采纳器选用被绑定成分。

      如$('a').live('click', function(){alert("你好!");})  JQuery把alert函数绑定到$(document)成分上,并使用’click’和’a’作为参数。任什么时候候假使有事件冒泡到document节点上,它就翻开该事件是不是是叁个click事件,以致该事件的指标成分与’a’这生机勃勃CSS选用器是或不是相配,就算都是的话,则试行函数。

      live(type,data,fn) 

      $("#div1").live("click",function(){ alert("你好"); })  //尽管页面风流倜傥先导一纸空文id="div1"的成分,是前期AJAX或js加载上去的,然而依旧有效。 

      $("#div1").live("click mouseout",function(){ alert("你好"); })  //能够live()几个事件。 

    8、die() 排除live()方法绑定的轩然大波  //绑定与杀绝是应和的,die()消逝持续bind()和delegate绑定的办法。 可以为壹个成分live多少个事件,也足以为同一事件live四个函数。

      语法die(type,[fn])  string Function个中Function为可选方法。

      $("#div1").die();

      $("#div1").die("click");

      $("#div1").die("click",fn1);  //个中fn1为某函数名。假设是绑定的是三个无名氏函数,第贰个参数用于当为同一事件live了七个函数的时候,排除一个函数对别的函数没影响。

    9、delegate() 为钦赐的要素增加贰个或多个事件,并绑定管理函数,叁个事变也足以绑定多少个函数。注意:此函数要1.4.2版增多。delegate()允许在父成分少将时间绑定当前页面还未有的成分,那点与Live()相同,然而固然是$(document).delegate()也比live()方法的频率要高,别的delegate()还是能将还未有现身的因素绑定到离它更近的父成分上。

      语法:

      delegate(selector,[type],fn)    String String Function  //selector必得为所选成分的子成分

      delegate(selector,[type],[data],fn) String String Object Function

      delegate(selector,events)      String String

      如:

      $('#container').delegate('a', 'click', function() { alert("你好!") });
      JQuery扫描文书档案查找$(‘#container’),并利用click事件和’a’这意气风发CSS选取器作为参数把alert函数绑定到$(‘#container’)上。任曾几何时候若是有事件冒泡到$(‘#container’)上,它就翻开该事件是不是是click事件,以致该事件的对象成分是否与CCS接纳器相相配。要是二种检查的结果都为真的话,它就实行函数。

      $("#div1").delegate("#button1","click",function(){ alert("你好啊!"); });  //注意:#button1必须为#div1的子成分

    10、undelegate()  删除有delegate()函数绑定的七个或多少个事件处理函数

      语法:

      undelegate(selector,[type])    String String

      undelegate(selector,[type],fn)   String String Function

      undelegate(selector,events)    String String

      undelegate(namespace)      String

     11、ready()  当DOM成分加载成功后绑定处总管件

      $(document).ready()

Jquery事件 (风度翩翩)、事件列表。 1.blur() 当失去宗旨时接触。包罗鼠标点击离开和TAB键离开。 2.change() 当成分获得关节后...

最后

  怎么样演示?点击右键现身自定蒿子单。按住ctrl键同期,点击右键,现身的是系统默许菜单

  可是,在IE浏览器中,会唤醒不能拿到微博文书档案自动生成的<div class="diggit">成分,具体原因和解决办法还不精晓

  应接交换

前言

  • 用作一个前端仅仅是入门的程序猿,通过面向baidu编制程序美化搜狐真是欲哭无泪。借用运营的话:

    对着破计算机,大器晚成调一中午。

  • 在应用乐乎的时候,私下认可使用的custom模板就算简单直观,可是不足以方便阅读和采取,例如未有目录,因而作者实行了时间节制一天(总体是四日卡塔 尔(英语:State of Qatar)的博客园分界面美化,这里介绍一下具体内容和蒙受的难题。

  • 经过参谋天涯论坛等楼台的连带小说,笔者增多了显示目录作用、新扩张一列导航栏菜单、GitHub地址、回到顶端开关。参谋的博文未记录地址,由此这里本身仅介绍一下温馨参加改善的(绝大好多卡塔 尔(英语:State of Qatar)前两项内容,其余的效应请本人去搜黄金年代搜。

菜单逻辑

  菜单逻辑共包涵阻止暗许行为、显隐效果和岗位推断多少个部分

暗许行为

  平日,点击右键时,会弹出浏览器的私下认可右边菜单

彩世界平台官方网址 2

  通过return false能够兑现拦阻私下认可行为的效应,当然也得以运用preventDefault()和returnValue,详细音讯运动至此

document.oncontextmenu = function(){
    return false;
}

显隐

  右键菜单暗中认可隐敝,点击右键时展现,点击左键时再蒙蔽

  关于元素显隐,个人计算过共9种思路,本文就用最轻巧易行的display属性

<div id="test" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
document.onclick = function(){
    test.style.display = 'none';
}
document.oncontextmenu = function(){
    test.style.display = 'block';
    return false;
}
</script>

位置推断

  鼠标对象共有6对坐标位置音信,若把右键菜单设置为fixed固化定位,则选择clientX/Y即可

  日常地,右键菜单的左上角地点应该是当前鼠标的坐标处

  然则,还也会有别的2种情景必要思量

  【1】借使鼠标的职位到视口尾巴部分的职位小于菜单的莫大,则鼠标的地点为菜单的最底层地点

  【2】倘若鼠标之处到视口侧面的岗位小于菜单的大幅度,则视口的右边为菜单的侧面

  成分的尺码音信共有偏移尺寸offset、可视区尺寸client和滚动尺寸scroll,那个时候菜谱的宽高应当为偏移尺寸offsetWidth/offsetHeight(全尺寸包蕴width、padding、border)

<div id="test" style="position:fixed;height: 100px;width: 100px;background-color: pink;"></div>
<script>
document.onclick = function(){
    test.style.display = 'none';
}
document.oncontextmenu = function(e){
    e = e || event;
    test.style.left = e.clientX   'px';
    test.style.top = e.clientY   'px';
    //注意,由于加法、减法的优先级高于大于、小于的优先级,所以不用加括号,详细情况移步至此
    if(document.documentElement.clientHeight - e.clientY < test.offsetHeight){
        test.style.top = e.clientY - test.offsetHeight   'px';
    }
    if(document.documentElement.clientWidth - e.clientX < test.offsetWidth){
        test.style.left = document.documentElement.clientWidth - test.offsetHeight   'px';
    }
    test.style.display = 'block';
    return false;
}
</script>

转换呈现目录成效

  1. 完全效果与利益
    • 在页面固定地方突显目录调控按键,当鼠标移入时突显目录,鼠标移出时隐藏目录,鼠标移入目录列表可以选拔点击目录。
    • 效益图如下:
      彩世界平台官方网址 3
  2. 实际贯彻思路
    • 目录调整开关和目录显示部分都以创建的一块div区域,遍历目录并动态增进超链接,将每条款录依次加多进目录容器indexs_container内,然后将引得容器增多进div区域中。
    • 终极增添鼠标移入移出事件。
  3. 需求自定义之处
    • 本人利用的目录为三级标题,校勘的话纠正var hs = $('#cnblogs_post_body h3');这里。
    • 其余的水彩、地方能够仁慈改革。
  4. 实现js
<!-- 目录js -->
<div class="indexsController" style="position: fixed;left: 1px;top: 110px;display: none"></div>
<div class="fixedIndexs" style="position: fixed;left: 32px;top: 110px;display: none"></div>

<script language="javascript" type="text/javascript">
    var indexsController=$('.indexsController');
    var fixedIndexs=$('.fixedIndexs');
    var hs = $('#cnblogs_post_body h3');

    function createIndexs(){
        var indexs_controller=$('<div id="catelog" style="border:solid 2px #ccc; background:#8B2323;width:9px;padding:4px 10px;"></div>');
        var indexs_container=$('<div id="container" style="border:solid 3px #ccc; background:#FFFFFF;width:220px;padding:4px 10px;"></div>');
        var controller=$('<p style="cursor: pointer"><font color="white">目 录</font></p>');
        var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');

        indexs_controller.append(controller);
        indexs_container.append(indexs);

        $.each(hs,function(i,h){
            $(h).before('<a name="index_' i '"></a>');
            indexs.append('<li style="list-style:decimal"><a href="#index_' i '">' $(h).text() '</a></li>');
        });

        if(hs.length!=0){
            indexsController.append(indexs_controller);
            fixedIndexs.append(indexs_container);
            //get home div right offset
            fixedIndexs.css('right',$("#home").offset().left 32 'px');
        }
    }

    createIndexs();
    indexsController.show();

    $("#catelog").mouseover(
        function(){
            fixedIndexs.show();

            //$(fixedIndexs).animate({width:'toggle'},80);
        }
    );
    $("#catelog").mouseout(
        function(){
            fixedIndexs.hide();
        }
    );
    $("#container").mouseover(
        function(){
            fixedIndexs.show();
        }
    );
    $("#container").mouseout(
        function(){
            fixedIndexs.hide();
        }
    );
</script>

职能完成

  共用有再次来到最上端、打call和商量八个效果与利益供给落到实处

回到顶上部分

  回到最上部共有5种达成情势,下边选拔可读写的scrollTop属性举行职能完毕

<body style="height: 3000px;">
<button id="test" style="position:fixed;right:10px;bottom:10px;">回到顶部</button>
<script>
var timer  = null;
test.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 160;
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>
</body> 

  然则,上边的代码有叁个难点,就是当页面内容比较多时,回到最上端的卡通效果将不仅仅十分长日子。因而,使用时光版的移动更是贴切,如若回到最上部的动漫片效果共运动500ms,则代码如下所示

<body style="height: 2000px;">
<button id="test" style="position:fixed;right:10px;bottom:10px;">回到顶部</button>
<script>
var timer  = null;
test.onclick = function(){
    cancelAnimationFrame(timer);
    //获取当前毫秒数
    var startTime =  new Date();     
    //获取当前页面的滚动高度
    var b = document.body.scrollTop || document.documentElement.scrollTop;
    var d = 500;
    var c = b;
    timer = requestAnimationFrame(function func(){
        var t = d - Math.max(0,startTime - ( new Date())   d);
        document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d   b;
        timer = requestAnimationFrame(func);
        if(t == d){
          cancelAnimationFrame(timer);
        }
    });
}
</script>
</body>

点赞

  打call函数是乐乎自身写的,大家看不到里面函数也回天无力运用。假若想在右键菜单中选取打call效用,就须要效法点击事件。点击右键菜单中的打call项时,触发今日头条的自带的点赞项的click事件

  由下图能够,点赞函数加在<div class="diggit">上

彩世界平台官方网址 4

  由叁个小例子来申明模拟点击事件怎么着达成

  点击开关1时,彰显1;点击按键2时,也要促成均等的功能

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<div id="result" style="height: 30px;width: 100px;background-color: pink;"></div>
<script>
btn1.onclick= function(){
    result.innerHTML  = '1';
}
btn2.onclick = btn1.onclick;
</script>

  上行下效 

<div id="test">点赞</div>
<script>
window.onload = function(){
  test.onclick = document.getElementById('div_digg').children[0].onclick;    
}
</script>

  扩张获得最新点赞数的功效

  当id为'menuFavour'的div元素被点击时,更新点赞数。但,由于从服务器获取最新数据以致有关要素的内容发生变化,都需求时刻,所以扩展2秒的延迟

<div id="menuFavour">点赞(0赞)</div>
<script>
//模拟原始点赞按钮的点击事件
menuFavour.onclick = document.getElementById('div_digg').children[0].onclick;  

//获取赞成数的函数
function getfavourNum(){
    favourNum.innerHTML = document.getElementById('digg_count').innerHTML;    
}
//页面载入时获取赞成数
getfavourNum();
//点击菜单中的赞成项后,再获取最新的赞成数
menuFavour.addEventListener('click',function(){
    setTimeout(function(){
        getfavourNum();
    },2000); 
})
</script>

评论

  点击右键菜单中的商量项时,页面定位到批评区的地点  

  由图中可以预知,商讨区为<div id="comment_form_container">

彩世界平台官方网址 5

  将成分置于可视区域内有过多艺术,如scrollTo()、scrollBy()、通过scrollTop计算、scrollIntoView()方法等等,详细情状活动至此

  下边接受scrollIntoView()方法滚动当前元素,步入浏览器的可以知道区域

<div id="test">评论</div>
<script>
window.onload = function(){
    test.onclick = function(){
        document.getElementById('comment_form_container').scrollIntoView();
    }
}
</script>

 

全部源码

  将HTML结会谈CSS样式写成javascript生成的一言一动,最后产生意气风发份js文件,代码如下

//requestAnimationFrame兼容写法
if(!window.requestAnimationFrame){
    var lastTime = 0;
    window.requestAnimationFrame = function(callback){
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0,16.7-(currTime - lastTime));
        var id  = window.setTimeout(function(){
            callback(currTime   timeToCall);
        },timeToCall);
        lastTime = currTime   timeToCall;
        return id;
    }
}
if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}

//事件处理程序兼容写法
function addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler,false);
    }else{
        target.attachEvent('on' type,function(event){
            return handler.call(target,event);
        });
    }
}

/*******生成元素*******/
var list = document.createElement('ul');
list.id = 'list';
list.innerHTML = '<li id="menuTop">回到顶部</li>
    <li id="menuFavour">点赞(0赞)</li>
    <li id="menuCommand">评论</li>';
document.body.appendChild(list);

/*******添加样式**********/
function loadStyles(str){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.innerHTML = str;
    }catch(ex){
        style.styleSheet.cssText = str;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style); 
}

loadStyles("#list{margin: 0!important;
    padding: 0!important;
    width: 120px;
    text-align: center;
    cursor: pointer;
    font:20px/40px  '宋体';
    background-color: #eee;
    position:fixed;
    display:none;}
    #list li{list-style:none!important;}
#list li:hover{background-color: lightblue;color: white;font-weight:bold;}");        


//DOM结构稳定后,再操作
addEvent(window,'load', contextMenuLoad);

function contextMenuLoad(){

    /********显示和隐藏菜单***********/
    addEvent(document,'click',function(){
        list.style.display = 'none';
    })
    //右键点击时,菜单显示
    document.oncontextmenu = function(e){
        e = e || event;
        //通常情况下,菜单的位置就是鼠标的位置
        list.style.left = e.clientX   'px';
        list.style.top = e.clientY   'px';
        //当鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置
        if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){
            list.style.top = e.clientY - list.offsetHeight   'px';
        }
        //当鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧
        if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){
            list.style.left = document.documentElement.clientWidth - list.offsetHeight   'px';
        }
        list.style.display = 'block';
        //点击右键的同时按下ctrl键,那么将显示默认右键菜单
        if(e.ctrlKey){
            list.style.display = 'none';
        //如果只是点击右键,则显示自定义菜单
        }else{
            return false;
        }        
    }    

    /*********回到顶部功能*********/
    var timer  = null;    
    menuTop.onclick = function(){
        cancelAnimationFrame(timer);
        //获取当前毫秒数
        var startTime =  new Date(); 
        //获取当前页面的滚动高度
        var b = document.body.scrollTop || document.documentElement.scrollTop;
        var d = 500;
        var c = b; 
        timer = requestAnimationFrame(function func(){
            var t = d - Math.max(0,startTime - ( new Date())   d);
        document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d   b;
        timer = requestAnimationFrame(func);
        if(t == d){
          cancelAnimationFrame(timer);
        } 
        });
    };

    /*********点赞功能**********/
    //模拟原始点赞按钮的点击事件
    var digg = document.getElementById('div_digg');
    if(digg){
        menuFavour.onclick = digg.children[0].onclick;            
    }
    //获取赞成数的函数
    function getfavourNum(){
        if(digg){
            favourNum.innerHTML = digg.children[0].children[0].innerHTML;
        }            
    }
    //页面载入时获取赞成数
    getfavourNum();
    if(menuFavour.addEventListener){
        menuFavour.addEventListener('click',function(){
            setTimeout(function(){
                getfavourNum();
            },2000);
        })    
    }else{
        menuFavour.attachEvent('onclick',function(){
            setTimeout(function(){
                getfavourNum();
            },2000);
        })        
    }

    /*********评论功能*********/
    menuCommand.onclick = function(){
        document.getElementById('comment_form_container').scrollIntoView();
    }
}    

  当然,也能够平昔引进js文件,文件在线地址为

 

前边的话

  本文是DOM鼠标事件的三个实际使用。查看天涯论坛的博客随笔时,有的随笔非常长,却绝非回到顶端按键;何况小说的点赞和评价都在篇章最尾部,使用时并不方便人民群众。所以选用自定义右键菜单来落实回到最上部、点赞、商酌那四个着重功用

 

页面设计

  首先将那多个职能以二个列表<ul>的方式放置。鼠标移入时样式改变,移出时还原

<style>
body{margin: 0;}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 100px;
    text-align: center;
    cursor: pointer;
    font:20px/40px  '宋体';
    background-color: #eee;
}
.in:hover{
    background-color: lightblue;
    color: white;
    font-weight:bold;
}
</style>

<ul id="list" class="list">
    <li class="in">顶部</li>
    <li class="in">点赞</li>
    <li class="in">评论</li>
</ul>

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:二回微博美化经验【彩世界平台官方网址】

关键词: javascript总结