Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957409
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
jQ 蒙版的效果

分类： jQuery

2016-09-08 21:49:06



点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/1.css" />
  7.         <script type='text/javascript' src="js/jquery-1.9.1.js"></script>
  8.         <script type="text/javascript" src="js/1.js"></script>
  9.     </head>
  10.     <body>
  11.         <div id="img">
  12.             <img src="img/4.jpg"/>
  13.         
  14.         </div>
  15.     
  16.             
  17.             <div id="mengban">
  18.                 
  19.                 <div id="lujin"></div>
  20.             </div>
  21.             
  22.     </body>
  23. </html>

点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     
  4.     $(function(){
  5.         
  6.         $("#mengban").mouseover(function(e){
  7.          var e = event || window.event;
  8.             $("#lujin").show();
  9.             $("#mengban").mousemove(function(e){
  10.             
  11.              var x=e.pageX-50;
  12.              var y= e.pageY-50;
  13.                  console.log(x);
  14.                   console.log(y);
  15.                  
  16.                   if(x>700){
  17.                       x=700
  18.                   }
  19.                   if(x<0){
  20.                       x=0;
  21.                   }
  22.                   if(y>300){
  23.                       y=300;
  24.                   }
  25.                   if(y<0){
  26.                       y=0;
  27.                   }
  28.                $("#lujin").css('left', x+'px');
  29.                 $("#lujin").css('top', y+'px');
  30.                 $("#lujin").css("background-position",'-'+x+'px'+' '+'-'+y+'px');
  31.                

  33.             
  34.             
  35.             })
  36.             
  37.         })
  38.         $("#mengban").mouseout(function(){
  39.             $("#lujin").hide();
  40.             
  41.         })
  42.         
  43.         
  44.     })
  45.     
  46.     
  47.     
  48.     
  49. }


点击(此处)折叠或打开

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. #img img{
  6.     
  7.     width:800px;
  8.     height:400px;
  9. }

  11. #mengban{
  12.     width: 800px;
  13.     height: 400px;
  14.     background: black;
  15.     position: absolute;
  16.     top: 0px;
  17.     left: 0px;
  18.     opacity: 0.6;

  20. }
  21. #lujin{
  22.     width: 100px;
  23.     height: 100px;
  24.     background-image:url(../img/4.jpg);
  25.     background-repeat: no-repeat;
  26.     background-size: 800px 400px;
  27.     position: absolute;
  28.     display: none;
  29.     cursor: move;
  30.     
  31.     
  32.     top: 0;
  33.     left: 0;
  34.     
  35. }


阅读(1125) | 评论(0) | 转发(0) |
0

上一篇：jQ 用animate动画改变css的背景颜色（需要引入color插件）

下一篇：jQ 微博发布效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6