zoukankan      html  css  js  c++  java
  • js+css实现带缓冲效果右键弹出菜单

    <!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; charset=gb2312" />
    <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
    <meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。全力打造一流网页特效站!" />
    <title>网页特效 JS+CSS实现带缓冲效果动感右键菜单 站长特效网</title>
    <style type="text/css">
    div,body,span,ul,li {padding:0;margin:0;font-size:12px;}
    ul,ol {list-style-type:none;}
    #zzjs_net {196px;height:296px;padding:2px;overflow:hidden;position:absolute;border:1px solid #666;left:200px;top:50px;display:none;z-index=1;-webkit-box-shadow:1px 3px 4px #888;box-shadow:1px 3px 4px #888;-moz-box-shadow:1px 3px 4px #888;}
    #zzjs li {176px;height:25px;line-height:25px;cursor:pointer;overflow:hidden;padding-left:20px;}
    .www_zzjs_net {500px;height:25px;font-size:20px;margin:50px 200px;color:red;}
    </style>
    <script type="text/javascript">
    var g_zzjs_net={};
    var oDiv=null;
    var g_iSpeed=0;
    var t=null;
    window.onload=function(){
    opUl();
    oDiv=document.getElementById("zzjs_net");
    oDiv.style.height="0px";
    document.oncontextmenu=function(ev){
    var oEvent=window.event||ev;
    cancelDefault(oEvent);
    g_zzjs_net.MouseX=oEvent.clientX;
    g_zzjs_net.MouseY=oEvent.clientY;
    oDiv.style.left=g_zzjs_net.MouseX+"px";
    oDiv.style.top=g_zzjs_net.MouseY+"px";
    /* 初始化经过背景为空 */
    var oUl=document.getElementById("zzjs");
    var aLi=oUl.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
    aLi[i].style.background="none";
    }
    clearInterval(t);
    doDiv();
    }
    document.body.onmousedown=function(ev){
    var oEvent=window.event||ev;
    clearInterval(t);
    g_iSpeed=0;
    g_zzjs_net.h=0;
    oDiv.style.height=g_zzjs_net.h+"px";
    oDiv.style.display="none";
    }
    oDiv.onmousedown=function(ev){
    var oEvent=window.event||ev;
    oEvent.cancelBubble=true;
    }
    }//欢迎来到站长特效z网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    function doDiv(ev){
    var oEvent=window.event||ev;
    oDiv.style.display="block";
    t=setInterval(doMove,30);
    }//欢迎来到站长特z效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    function doMove(){
    if(oDiv.offsetHeight>=302){
    g_iSpeed*=-0.7;
    oDiv.style.height=302+"px";
    }
    g_zzjs_net.h=g_iSpeed+oDiv.offsetHeight;
    g_iSpeed+=10;
    oDiv.style.height=g_zzjs_net.h+"px";
    }//欢迎来到站长z特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    function cancelDefault(oEvent){
    if(oEvent.preventDefault){
    oEvent.preventDefault();
    }
    else{
    oEvent.returnValue=false;
    }
    }//欢迎来到站z长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* 对li操作后的动作的定义 */
    function opUl(){
    var oUl=document.getElementById("zzjs");
    var aLi=oUl.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
    aLi[i].aIndex=i;
    aLi[i].onmouseover=function(){
    for(j=0;j<aLi.length;j++){
    aLi[j].style.background="none";
    }
    aLi[this.aIndex].style.background="#ffbb66";
    }
    aLi[i].onclick=function(){
    clearInterval(t);
    oDiv.style.display="none";
    alert(this.innerHTML+" 你可以在这里自定义自己的方法啦");
    }
    }
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    </script>
    </head>
    <body style="2000px;height:800px;">
    <a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<hr>
    <!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
    <div class="www_zzjs_net">站长特效网提示您:右键点击鼠标看效果</div>
    <div id="zzjs_net">
    <ul id="zzjs">
    <li><a href="http://www.zzjs.net" target="_blank">站长特效一号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效二号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效三号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效四号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效五号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效六号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效七号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效八号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效九号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效十号菜单</a></li>
    <li><a href="http://www.zzjs.net" target="_blank">站长特效十一号菜单</a></li>
    <li><a href="http://zzjs.net" target="_blank">站长特效十二号菜单</a></li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    jm8.6编解码器概述
    mingw32环境下链接库找不到问题
    ts流中的pcr与pts计算与逆运算
    基于医疗知识图谱的问答系统(二)
    Neo4j图数据库导入数据
    基于医疗知识图谱的问答系统(一)
    知识图谱和neo4j的基本操作
    从.NET转GO了
    Flask开发技巧之参数校验
    如何在PPT中插入Pyecharts的图表?
  • 原文地址:https://www.cnblogs.com/skyay/p/3826019.html
Copyright © 2011-2022 走看看