js右键菜单和右下角弹窗-原创手记-慕课网

几个js经常用到的功能，整理一下

1右键快捷菜单

<script type="text/javascript">
//右键点击
document.oncontextmenu = function()
{
showMenu();
return false;//屏蔽掉的右键菜单
}
function showMenu()
{
popMenu(itemMenu,100 );
//禁用右键
event.returnValue=false;
//不上传事件
event.cancelBubble=true;
return false;
}
//menuDiv:右键菜单的内容
//width:行显示的宽度
function popMenu(menuDiv,width ){
//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv .innerHTML;
var rowObjs=pop.document.body.all[0].rows;
//获得弹出菜单的行数
var rowCount=rowObjs.length;
//设置鼠标滑入该行时的效果
for(var i=0;i<rowObjs.length;i++)
{
rowObjs[i].cells[0].onmouseover=function (){
this.style.background="#cccccc";
this.style.color="black";
}
rowObjs[i].cells[0].onmouseout=function (){
this.style.background="#ff6666";
}
}
//屏蔽菜单的菜单
pop.document.oncontextmenu=function (){
return false;
}
//选择右键菜单的一项后，菜单隐藏
pop.document.onclick=function (){
pop.hide();
}
//显示菜单
pop.show(event.clientX-1,event.clientY,width, rowCount*50,document.body);
return true;
}
</script>
<div id="itemMenu" >
        <table border="1" width="100%" height="100%" bgcolor="#ff6666"
            cellspacing="0">
            <tr>
                <td align="center" onclick="parent.create(1)">
                    <img src="Jos的下午茶/coffee.ico" alt="下午茶" />
                </td>
            </tr>
            <tr>
                <td align="center" onclick="parent.create()">
                    <img src="Jos的下午茶/咖啡杯.ico" alt="下午茶" />
                </td>
            </tr>
            <tr>
                <td align="center" onclick="parent.create(3)">
                    <img src="Jos的下午茶/甜甜圈.ico" alt="下午茶" />
                </td>
            </tr>
        </table>
    </div>

2右下角弹出框

<script language="JavaScript" type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
function pop(obj){
var h = parseInt($("popDiv").currentStyle.height);
$("popDiv").style.height = (h + obj) + "px";
if(parseInt($("popDiv").style.height) < 2)
{
window.clearInterval(timer);
$("popDiv").style.display = "none";
}
if(parseInt($("popDiv").style.height) >= 200){
window.clearInterval(timer);
}
}
var timer;
function runtimer(obj){
timer = window.setInterval(function(){pop(obj)},10);
}
window.onload = function(){
runtimer(2);
}
//每隔10秒调用show方法，如果显示则隐藏，如果隐藏则显示
setInterval( show ,10000 );
function show(){
if ( $("popDiv").style.display == "none" )
{
$("popDiv").style.display = "inline"
runtimer(2);
}
else
{
runtimer(-2);
}
}
</script>
<div id="popDiv">
          <table>
             <tr>
               <td>
                    <a href="javascript:runtimer(-2);void(0)" >工作提示</a> //点击则弹出框关闭
               </td>
             </tr>
          </table>
        </div>

3向上滚动数据

<script type="text/javascript">
var speed=40;//数值越大，速度越慢
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML;
demodemo.scrollTop=demo.scrollHeight;
function MarqueeUp(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo2.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(MarqueeUp,speed);
demo.onmouseover=function() {clearInterval(MyMar);}
demo.onmouseout=function() {MyMar=setInterval(MarqueeUp,speed);}
</script>
<div id="demo" >
<div id="demo1">

<p>这个向上滚动的文字特效JS代码比较简洁。</p>
<p>这个向上滚动的文字特效JS代码比较简洁。</p>
<p>这个向上滚动的文字特效JS代码比较简洁。</p>
<p>这个向上滚动的文字特效JS代码比较简洁。</p>
</div>
<div id="demo2"></div>
</div>