jquery鼠标划过内容背景滑动切换滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标划过内容背景滑动切换滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jquery鼠标划过内容背景滑动切换</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1_002.js" type="text/javascript"></script>
</head>
<body>
<div>
<div class="servicesBox">
  <div id="Div35" class="serBox" onclick="serFocus(1)">
    <div class="serBoxOn"></div>
    <div class="pic1 mypng"> <img src="images/3.png"> </div>
    <div class="pic2 mypng"> <img src="images/3-3.png"> </div>
    <div class="txt1"> <span class="tit">开心网</span>
      <p>开心网营销</p>
    </div>
    <div class="txt2"> <a href="#" target="_blank" class="a_jump"><span class="tit">开心网</span>
      <p>开心网营销</p>
      </a> </div>
  </div>
  <div class="fgH20"></div>
  <div id="Div36" class="serBox" onclick="serFocus(2)">
    <div class="serBoxOn"></div>
    <div class="pic1 mypng"> <img src="images/1.png"> </div>
    <div class="pic2 mypng"> <img src="images/1-1.png"> </div>
    <div class="txt1"> <span class="tit">人人网</span>
      <p>人人网营销</p>
    </div>
    <div class="txt2"> <a href="#" target="_blank" class="a_jump"><span class="tit">人人网</span>
      <p>人人网营销</p>
      </a> </div>
  </div>
  <div class="fgH20"></div>
  <div id="Div37" class="serBox" onclick="serFocus(3)">
    <div class="serBoxOn"></div>
    <div class="pic1 mypng"> <img src="images/2.png"> </div>
    <div class="pic2 mypng"> <img src="images/2-2.png"> </div>
    <div class="txt1"> <span class="tit">QQ空间</span>
      <p>QQ空间营销</p>
    </div>
    <div class="txt2"> <a href="#" target="_blank" class="a_jump"><span class="tit">QQ空间</span>
      <p>QQ空间营销</p>
      </a> </div>
  </div>
  <div class="fgH20"></div>
  <div id="Div38" class="serBox" onclick="serFocus(3)">
    <div class="serBoxOn"></div>
    <div class="pic1 mypng"> <img src="images/35.png"> </div>
    <div class="pic2 mypng"> <img src="images/35-35.png"> </div>
    <div class="txt1"> <span class="tit">问答营销</span>
      <p>问答投放 锁住潜在客户</p>
    </div>
    <div class="txt2"> <a href="#" target="_blank" class="a_jump"><span class="tit">问答营销</span>
      <p>问答投放 锁住潜在客户</p>
      </a> </div>
  </div>
  <div class="fgH20"></div>
  <div id="Div39" class="serBox" onclick="serFocus(3)">
    <div class="serBoxOn"></div>
    <div class="pic1 mypng"> <img src="images/31.png"> </div>
    <div class="pic2 mypng"> <img src="images/31-31.png"> </div>
    <div class="txt1"> <span class="tit">邮件推广</span>
      <p>低成本 商机无限</p>
    </div>
    <div class="txt2"> <a href="#" target="_blank" class="a_jump"><span class="tit">邮件推广</span>
      <p>低成本 商机无限</p>
      </a> </div>
  </div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</div>
</body>
</html>

JS代码(index.js):

//tabvar curPortflioi = "page21";
	var nn;
	var curNumi=1;
	var jj=0;
	function showPagei(idi,nn,i){
	for(var j=1;
	j<=nn;
	j++){
	if(j==idi){
	$("#box"+i+j).removeClass ();
	$("#box"+i+j).addClass ("tab1");
	$("#page"+i+j).fadeIn(400);
	if(i==2){
	//var hhh = $("#page"+i+j).height();
	//$("#page"+i+j).height($("#"+curPortflioi).height());
	//$("#page"+i+j).animate({
	height:hhh}
,400,'',function(){
	if(curPortflioi != $(this).attr("id"))$(this).hide();
}
);
	curPortflioi = "page"+i+j;
}
}
else{
	$("#box"+i+j).removeClass ();
	$("#box"+i+j).addClass ("tab2");
	//$("#page"+i+j).fadeOut("fast");
	$("#page"+i+j).hide();
}
}
}
//services$(".serBox").hover( function (){
	$(this).children().stop(false,true);
	$(this).children(".serBoxOn").fadeIn("slow");
	$(this).children(".pic1").animate({
	right:-110}
,400);
	$(this).children(".pic2").animate({
	left:41}
,400);
	$(this).children(".txt1").animate({
	left:-240}
,400);
	$(this).children(".txt2").animate({
	right:0}
,400);
}
,function (){
	$(this).children().stop(false,true);
	$(this).children(".serBoxOn").fadeOut("slow");
	$(this).children(".pic1").animate({
	right:41}
,400);
	$(this).children(".pic2").animate({
	left:-110}
,400);
	$(this).children(".txt1").animate({
	left:0}
,400);
	$(this).children(".txt2").animate({
	right:-240}
,400);
}
);

CSS代码(style.css):

@charset "utf-8";body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}
a img{border:0}
body{color:#333;text-align:center;font:12px "瀹嬩綋";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.servicesBox{width:1000px;height:270px;margin:0 auto;clear:both;line-height:18px;color:#999999;font-size:12px;}
.servicesBox .serBox{cursor:pointer;border:1px solid #fff;display:inline;width:198px;height:250px;float:left;overflow:hidden;background-color:#f7f7f7;position:relative;}
.servicesBox .serBoxOn{font-family:"微软雅黑";display:none;width:320px;height:270px;background:url(../images/serboxon_bg.gif) repeat 0px 0px;position:absolute;left:0px;top:0px;z-index:19;}
.servicesBox .serBox .pic1{width:110px;height:110px;text-align:center;position:absolute;top:22px;right:41px;z-index:99;}
.servicesBox .serBox .pic2{width:110px;height:110px;text-align:center;position:absolute;top:22px;left:-110px;z-index:99;}
.servicesBox .serBox .txt1{width:198px;height:100px;color:#999999;position:absolute;top:145px;left:0px;z-index:99;}
.servicesBox .serBox .txt2{width:198px;height:100px;color:#a9cf4f;position:absolute;top:145px;right:-240px;z-index:99;}
.servicesBox .serBox span.tit{font-size:16px;display:block;text-align:center;}
.servicesBox .serBox .txt1 .tit{color:#000000;line-height:30px;}
.servicesBox .serBox .txt2 .tit{color:#fff;line-height:30px;font-family:"微软雅黑";}
.servicesBox .serBox p{padding:0 10px;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)