tnblog
首页
视频
资源
登录
转

jQuery右击自定义显示菜单+自定义换肤

5542人阅读 2018/11/28 15:18 总访问：186356 评论：0 收藏：0 手机
分类: 前端

结合右击显示菜单来做的

效果图：

代码：

  1. <!doctype html>  

  2. <html>  

  3.     <head>  

  4.         <meta charset="gbk">  

  5.         <title>百度换肤</title>  

  6.         <!--css,js-->  

  7.         <style type="text/css">  

  8.             *{margin:0;padding:0;}  

  9.             img{border:none;margin:0px 1px 1px 0px;}  

  10.             body{background:url("images/1.jpg") no-repeat;position:relative;  

  11.                 font-family:"微软雅黑";font-size:16px;}  

  12.             .huanfu{width:100%;height:200px;background:#ececec;position:absolute;top:0px;left:0px;  

  13.                 display:none;z-index:2;}  

  14.             .huanfu .hf_img{width:590px;height:180px;border:0px solid red;margin:0px auto;}  

  15.             .huanfu .hf_img .one{width:196px;height:180px;background:;float:left;}  

  16.             .huanfu .hf_img .two{width:98px;height:180px;background:;float:left;}  

  17.             .huanfu .hf_img a:hover img{opacity:0.7;filter:alpha(opacity==70);}  

  18.             .huanfu .hf_img img{float:left;position:relative;}  

  19.             .menu{width:186px;background:#fff;box-shadow:1px 1px 35px #ccc;display:none;  

  20.                 position:absolute;z-index:3;}  

  21.             .menu ul li{list-style:none;border:0px solid red;line-height:38px;padding-left:16px;  

  22.                 border-bottom:1px solid #ddd;cursor:pointer;}  

  23.             .menu ul li:hover{background:#647E7C;color:#fff;}  

  24.             #zb{font-size:40px;color:#fff;text-align:center;}  

  25.             .text{width:470px;height:300px;margin:0px auto;background:#e8e8e8;position:absolute;  

  26.                 background-color: rgba(255,255,255,0.3);border-radius:4px;z-index:1;top:150px;  

  27.                 left:35%;}  

  28.             .text p{font-weight:500;color:#000;font-size:20px;}  

  29.             ::selection {background:#006200; color:#fff;}  

  30.         </style>  

  31.   

  32.     </head>  

  33.     <body>  

  34.         <!--huanfu start-->  

  35.             <div class="huanfu">  

  36.                 <div class="hf_img">  

  37.                     <div class="one">  

  38.                         <a href="#">  

  39.                             <img src="images/1-1.jpg" width="195" height="119" alt=""/>  

  40.                         </a>  

  41.                         <a href="#">  

  42.                             <img src="images/2-2.jpg" width="97" height="59" alt=""/>  

  43.                         </a>  

  44.                         <a href="#">  

  45.                             <img src="images/3-3.jpg" width="97" height="59" alt=""/>  

  46.                         </a>  

  47.                     </div>  

  48.                     <div class="two">  

  49.                         <a href="#">  

  50.                             <img src="images/3-3.jpg" width="97" height="59" alt=""/>  

  51.                         </a>  

  52.                         <a href="#">  

  53.                             <img src="images/4-4.jpg" width="97" height="59" alt=""/>  

  54.                         </a>  

  55.                         <a href="#">  

  56.                             <img src="images/5-5.jpg" width="97" height="59" alt=""/>  

  57.                         </a>  

  58.                     </div>  

  59.                     <div class="one">  

  60.                         <a href="#">  

  61.                             <img src="images/8-8.jpg" width="97" height="59" alt=""/>  

  62.                         </a>  

  63.                         <a href="#">  

  64.                             <img src="images/9-9.jpg" width="97" height="59" alt=""/>  

  65.                         </a>  

  66.                         <a href="#">  

  67.                             <img src="images/7-7.jpg" width="195" height="119" alt=""/>  

  68.                         </a>  

  69.                     </div>  

  70.                     <div class="two">  

  71.                         <a href="#">  

  72.                             <img src="images/10-10.jpg" width="97" height="59" alt=""/>  

  73.                         </a>  

  74.                         <a href="#">  

  75.                             <img src="images/11-11.jpg" width="97" height="59" alt=""/>  

  76.                         </a>  

  77.                         <a href="#">  

  78.                             <img src="images/12-12.jpg" width="97" height="59" alt=""/>  

  79.                         </a>  

  80.                     </div>  

  81.                 </div>  

  82.             </div>  

  83.         <!--end huanfu-->  

  84.         <!--menu start-->  

  85.             <div class = "menu">  

  86.                 <ul>  

  87.                     <li onclick = "jy_menu(0)">打开</li>  

  88.                     <li class = "button">换肤</li>  

  89.                     <li class = "refresh">刷新(R)</li>  

  90.                     <li onclick = "jy_menu(3)">复制(C)</li>  

  91.                     <li onclick = "jy_menu(4)">粘贴(V)</li>  

  92.                     <li onclick = "jy_menu(5)">注销</li>  

  93.                     <li onclick = "jy_menu(6)">打印(I)...</li>  

  94.                 </ul>  

  95.             </div>  

  96.         <!--end menu-->  

  97.         <div class = "text">  

  98.             <p>只实现了刷新和换肤的功能^o^;选中文字的背景色是绿色！！！</p>  

  99.         </div>  

  100.         <p id = "zb"></p>  

  101.         <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>  

  102.         <script type="text/javascript">  

  103.         //首先屏蔽到浏览器自带的右键功能  

  104.         document.oncontextmenu = function(){  

  105.             return false;  

  106.         };  

  107.         //点击鼠标三键  

  108.         $(document).mousedown(function(e){  

  109.             //1是左键；2是中间键；3是右键  

  110.             var key = e.which;  

  111.             if(key == 3){  

  112.                 var x = e.clientX; //x坐标  

  113.                 var y = e.clientY; //y坐标  

  114.                 //获取menu的长宽  

  115.                 var menuHeight = $(".menu").height();  

  116.                 var menuWidth = $(".menu").width();  

  117.                 //获取浏览器的可见长宽  

  118.                 var clintHeight = getClientHeight();  

  119.                 var clintWidth = getClientWidth();  

  120.                 //判断  

  121.                 if(menuHeight + y >= clintHeight){  

  122.                     y = clintHeight - menuHeight - 8;  

  123.                 }  

  124.                 if(menuWidth + x >= clintWidth){  

  125.                     x = clintWidth - menuWidth - 8;  

  126.                 }  

  127.                 //$("#zb").html("x= " + x + "<br />y=" + y);显示坐标像素  

  128.                 //之前必须要绝对定位才行  

  129.                 $(".menu").show().css({left:x,top:y});  

  130.   

  131.             }  

  132.         });  

  133.   

  134.         //点击空白隐藏鼠标右键  

  135.         $(document).click(function(){  

  136.             $(".menu").hide();  

  137.         });  

  138.   

  139.         //响应事件  

  140.         function jy_menu(i){  

  141.             alert(i);  

  142.         }  

  143.         // 浏览器的可见高度  

  144.         function getClientHeight() {  

  145.             var clientHeight = 0;  

  146.             if (document.body.clientHeight && document.documentElement.clientHeight) {  

  147.                 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  

  148.             } else {  

  149.                 clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  

  150.             }  

  151.             return clientHeight;  

  152.         }  

  153.   

  154.         // 浏览器的可见宽度  

  155.         function getClientWidth() {  

  156.             var clientWidth = 0;  

  157.             if (document.body.clientWidth && document.documentElement.clientWidth) {  

  158.                 clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;  

  159.             } else {  

  160.                 clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;  

  161.             }  

  162.             return clientWidth;  

  163.         }  

  164.           

  165.         $(function(){  

  166.             //点击显示  

  167.             $(".button").click(function(e){  

  168.                 $(".huanfu").slideToggle("slow");  

  169.                 // 不在派发事件  

  170.                 e.stopPropagation();  

  171.             });  

  172.             $(".huanfu .hf_img a").click(function(e){  

  173.                 // 用正则表达式将1-1.jpg 换成1.jpg  

  174.                 var src=$(this).find("img").attr("src").replace(/-\d*/,"");  

  175.                 // 修改样式  

  176.                 $("body").css("background","url("+src+")");  

  177.                 e.stopPropagation();  

  178.             });  

  179.             // 点击任意地方隐藏  

  180.             $(document).click(function(e){  

  181.                 $(".huanfu").slideUp("slow");  

  182.                 e.stopPropagation();  

  183.             });  

  184.         });  

  185.           

  186.         </script>  

  187.     </body>  

  188. </html>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价
真正的顺其自然，其实是竭尽所能之后的不强求，而非两手一摊的不作为
博主信息
排名
17
文章
40
粉丝
16
评论
21
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术