jquery鼠标感应图层移动特效

3个月前 (02-21 13:02)阅读77回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

通过jquery实现鼠标感应图层移动效果，鼠标经过时移动位置，移开后恢复，自定义移动幅度，实用jquery鼠标感应特效。

<!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" />
<title>jquery鼠标感应图层移动特效_武鸣人</title>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<script type="text/javascript" src="/img/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  btmInteractive();
  btmInteract22();
   $('.banner_www_wuming_ren').click(function(e) {
//Cancel the link behavior
//e.preventDefault();
//Get the A tag
var id = $(this).attr('rel');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.5);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();       
//Set the popup window to center
/*$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);*/
$(id).css('display','none');
$(id).css('top',  100);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(500); 
//$(id).css("display","block");
clearTimer();
});
$('.banner_www_wuming_ren ul li a').click(function(e){
event.stopPropagation();
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
   e.preventDefault();
//Get the A tag
   var id =$(this).attr('href');
       if(id=="#dialog6"){
    //Get the screen height and width
   var maskHeight = $(document).height();
   var maskWidth = $(window).width();
   //Set heigth and width to mask to fill up the whole screen
   $('#mask').css({'width':maskWidth,'height':maskHeight});
   //transition effect
   $('#mask').fadeIn(1000);
   $('#mask').fadeTo("slow",0.5);
   //Get the window height and width
   var winH = $(window).height();
   var winW = $(window).width();          
   //Set the popup window to center
  /*$(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);*/
     $(id).css('display','none');
     $(id).css('top',  100);
     $(id).css('left', winW/2-$(id).width()/2);
    //transition effect
     $(id).fadeIn(500);
}
//$(id).css("display","block");
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
 timer = setInterval("loadImage(setTimeer)", 5000);
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
 timer = setInterval("loadImage(setTimeer)", 5000);
});   
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function btmInteractive(){
    $(".banner_www_wuming_ren").each(function(i){
var curLeft=i*(192)+5;
$(this).css("left",curLeft+"px");
$(this).css("position","absolute");
$(this).css("top","0px");
});
$(".banner_www_wuming_ren").mouseenter(function(){
//$(this).css("display","none");
$(this).animate( { top: "-10px"}, 200 );
})
$(".banner_www_wuming_ren").mouseleave(function(){        
$(this).animate( { top: "0px"}, 200 );
//$(this).css("display","none");
//$(this).animate( { top: "10px"}, 50 );
})
}
function btmInteract22(){
    $(".banner_aaa").each(function(i){
var curLeft=i*(159)+5;
$(this).css("left",curLeft+"px");
$(this).css("position","absolute");
$(this).css("top","0px");
});
$(".banner_aaa").mouseenter(function(){
//$(this).css("display","none");
$(this).animate( { top: "-10px"}, 200 );
})
$(".banner_aaa").mouseleave(function(){        
$(this).animate( { top: "0px"}, 200 );
//$(this).css("display","none");
//$(this).animate( { top: "10px"}, 50 );
})
}
</script>
<style type="text/css">
.www_wuming_ren{ width:980px;position:relative; z-index:2000;}
.yp_listimgsecdd{ width:980px;position:relative; z-index:2000;}
.yp_infoimglist01{ width:192px; height:137px; float:left; margin-right:4px;background:url(/img/20240221_www_wuming_ren_18.jpg) no-repeat;}
.yp_infoimglist02{ width:192px; height:137px; float:left; margin-right:4px;background:url(/img/20240221_www_wuming_ren_18.jpg) no-repeat;}
.yp_infoimglist03{ width:192px; height:137px; float:left; margin-right:4px;background:url(/img/20240221_www_wuming_ren_18.jpg) no-repeat;}
.yp_infoimglist04{ width:192px; height:137px; float:left; margin-right:4px;background:url(/img/20240221_www_wuming_ren_18.jpg) no-repeat;}
.yp_infoimglist05{ width:192px; height:137px; float:left; margin-right:4px;background:url(/img/20240221_www_wuming_ren_18.jpg) no-repeat;}
.yp_topinfotitsy{ width:192px; height:30px; line-height:30px;}
.yp_topinfotitsy a.yp_btimlidt{ float:left; display:block; width:90px; text-align:center;font-family:"SimSun"; font-size:12px; color:#cc0000; font-weight:bold; line-height:30px;height:30px;}
.yp_topinfotitsy a.yp_moreimgitisy{
float:right;
display:block;
width:65px;
text-align:center;
font-family:"Arial";
font-size:9px;
color:#666;
line-height:30px;
height:30px;
}
.yp_btomboxtwsy{ width:192px;}
.yp_btomboxtwsy a.yp_imglistyy{text-decoration:none; cursor:pointer; display:block; height:75px; width:192px; text-align:center;}
.yp_btomboxtwsy span{display:block; width:178px; padding-left:10px; text-align:center;font-family:"微软雅黑"; font-size:11px; color:#666; line-height:13px;}
.yp_btomboxtwsy a{ text-decoration:none; cursor:pointer; text-align:center;font-family:"微软雅黑"; font-size:11px; color:#666; line-height:13px;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果。
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="www_wuming_ren">
<div class="yp_infoimglist01  banner_www_wuming_ren"  style="cursor:pointer" onclick="openwin(this)" src="shuixin1.html">
<div class="yp_topinfotitsy"><a class="yp_btimlidt">解决方案</a><a class="yp_moreimgitisy"  href="https://www.wuming.ren"  target="_blank">MORE+</a><div class="clear"></div></div>
<div class="yp_btomboxtwsy"><a  href="#dialog5" name="modal" class="yp_imglistyy"><img src="/img/20240221_www_wuming_ren_19.jpg" /></a><span><a href="https://wuming.ren">行业</a>    <a href="/solutions/?showType=2">领域</a>    <a href="https://wuming.ren">企业规模</a> </span></div>
</div>
<div class="yp_infoimglist02  banner_www_wuming_ren" rel="#dialog4">
<div class="yp_topinfotitsy"><a class="yp_btimlidt"  href="#dialog4" name="modal">管理软件</a><a class="yp_moreimgitisy"  href="https://wuming.ren"  target="_blank">MORE+</a><div class="clear"></div></div>
<div class="yp_btomboxtwsy">
<a  href="#dialog4" name="modal" class="yp_imglistyy"><img src="/img/20240221_www_wuming_ren_20.jpg" /></a>
<span><a href="https://wuming.ren">用友NC</a>    <a href="https://wuming.ren">用友U9</a>    <a href="https://wuming.ren">用友U8</a></span></div>
</div>
 
<div class="yp_infoimglist04 banner_www_wuming_ren"    rel="#dialog2">
<div class="yp_topinfotitsy"><a class="yp_btimlidt" href="#dialog2" name="modal">用友企业云</a><a class="yp_moreimgitisy"  href="https://wuming.ren" target="_blank">MORE+</a>
  <div class="clear"></div></div>
<div class="yp_btomboxtwsy">
<a href="#dialog2" name="modal" class="yp_imglistyy"><img src="/img/20240221_www_wuming_ren_21.jpg" /></a>
<span style="text-align:left;"><a href="https://wuming.ren" style=" padding-left:20px;">大企业私有云</a>&nbsp; <a href="https://wuming.ren" target="_blank">小微企业云</a></span>
<span style="text-align:left;"><a href="https://wuming.ren" style=" padding-left:20px;" target="_blank">健康云</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"  onclick="switching1()">公共云服务</a></span></div>
</div>
<div class="yp_infoimglist05  banner_www_wuming_ren"  rel="#dialog1">
<div class="yp_topinfotitsy"><a class="yp_btimlidt" href="#dialog1" name="modal">用友动态</a><a href="https://wuming.ren" name="modal" class="yp_moreimgitisy">MORE+</a><div class="clear"></div></div>
<div class="yp_btomboxtwsy">
<a href="#dialog1" name="modal" class="yp_imglistyy"><img src="/img/20240221_www_wuming_ren_22.jpg" /></a>
<span><a href="https://wuming.ren">新闻</a>&nbsp;&nbsp;<a href="https://wuming.ren">活动</a>&nbsp;&nbsp;<a href="https://wuming.ren">案例</a>&nbsp;&nbsp;<a href="https://wuming.ren">白皮书</a>&nbsp;&nbsp;<a href="https://wuming.ren">视频</a></span></div>
</div>
<div class="yp_infoimglist03  banner_www_wuming_ren" rel="#dialog3">
<div class="yp_topinfotitsy"><a class="yp_btimlidt"  href="#dialog3" name="modal">关于用友</a><a class="yp_moreimgitisy" href="https://wuming.ren" target="_blank">MORE+</a><div class="clear"></div></div>
<div class="yp_btomboxtwsy">
<a href="#dialog3" name="modal" class="yp_imglistyy"><img src="/img/20240221_www_wuming_ren_23.jpg" /></a>
<span><a href="https://wuming.ren" style="padding-left:20px;">了解  </a>&nbsp;&nbsp;<a href="https://wuming.ren">联系</a></span>
</div>
</div>
</div>
</body>
</html>


赞0
踩0
☆收藏0
鼠标感应
回帖

jquery鼠标感应图层移动特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息