JQ鼠标经过标题向上弹出特效特效代码

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

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

以下是 JQ鼠标经过标题向上弹出特效特效代码的示例演示效果:

当前平台(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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ鼠标经过标题向上弹出特效</title>
<style type="text/css">
body{font-family:"微软雅黑";}
img{border:none;}

/* scrollpic */
.scrollpic{max-width:1048px;min-height:550px;margin:20px auto;}
#myscroll{display:block; width:100%; position:relative; height:390px; overflow:hidden;}
#myscroll #myscrollbox{display:block; float:left; position:absolute; left:0; top:0; width:1000000px;}
#myscroll ul{display:block; float:left; list-style-type:none; padding:0; margin:0;}
#myscroll ul li{display:block; float:left; padding:0; margin:0;}
#myscroll ul li a{display:block; float:left; width:242px; padding:0 10px; position:relative; height:390px; color:#333;}
#myscroll a .intro{position:absolute; left:0; z-index:10; background-color:rgba(255,255,255,.80); padding:0 10px;}
#myscroll a .intro h5{padding:0; margin:0; font-size:16px; font-weight:bold; padding:0 47px 0 15px; background:url(images/go.png) right no-repeat; height:40px; width:180px; line-height:40px; border-bottom:1px solid rgba(215,0,15,.2);}
#myscroll a .intro p{font-size:13px; line-height:20px; margin:10px 15px; height:40px; overflow:hidden;}
#myscroll a .intro{bottom:-61px;}
#myscroll a:hover .intro{bottom:0px;}

#mybtns{margin:10px; width:100%; display:block; height:42px;}
#mybtns a{width:42px; height:42px; display:block; float:left; margin-right:1px; background-color: #c1c1c1;}
#mybtns a:hover{background-color: #d7000f;}
#mybtns a:hover, #myscroll, #mybtns a,#myscroll a:hover .intro, #myscroll a .intro,#myscroll #myscrollbox{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#mybtns #left{background-image:url(images/jt_l.png);}
#mybtns #right{background-image:url(images/jt_r.png);}

@media(min-width:1572px){
.scrollpic{max-width:1572px; width:100%;}
#myscroll{width:1572px;}
}
@media(max-width:1571px){
.scrollpic{max-width:1310px; width:100%;}
#myscroll{width:1310px;}
}
@media(max-width:1309px){
.scrollpic{max-width:1048px; width:100%;}
#myscroll{width:1048px;}
}
@media(max-width:1047px){
.scrollpic{max-width:786px; width:100%;}
#myscroll{width:786px;}
}
@media(max-width:767px){
.scrollpic{max-width:524px; width:100%;}
#myscroll{width:524px;}
}
@media(max-width:523px){
.scrollpic{max-width:262px; width:100%;}
#myscroll{width:262px;}
}
/*浏览器宽度变化时需刷新页面才能正常显示*/
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	  var blw=$("#myscrollbox li").width();
	  //获取单个子元素所需宽度
	  var liArr = $("#myscrollbox ul").children("li");
	  //获取子元素数量
	  var mysw = $("#myscroll").width();
	  //获取子元素所在区域宽度
	  var mus = parseInt(mysw/blw);
	  //计算出需要显示的子元素的数量
	  var length = liArr.length-mus;
	  //计算子元素可移动次数（被隐藏的子元素数量）
	  var i=0
	  $("#right").click(function(){
		  i++
		  //点击i加1
		  if(i<length){
		      $("#myscrollbox").css("left",-(blw*i));
			  //子元素集合向左移动，距离为子元素的宽度乘以i。
		  }else{
			  i=length;
			  $("#myscrollbox").css("left",-(blw*length));
			  //超出可移动范围后点击不再移动。最后几个隐藏的元素显示时i数值固定位已经移走的子元素数量。
	      }
      });
	  $("#left").click(function(){
		  i--
		  //点击i减1
		  if(i>=0){
		     $("#myscrollbox").css("left",-(blw*i));
			 //子元素集合向右移动，距离为子元素的宽度乘以i。
		  }else{
			 i=0;
			 $("#myscrollbox").css("left",0);
			 //超出可移动范围后点击不再移动。最前几个子元素被显示时i为0。
	      }
      });
});
</script>
</head>

<body>

<div class="scrollpic">
	<div id="mybtns">
	  <a href="javascript:;" id="left"></a>
	  <a href="javascript:;" id="right"></a>
	</div>
	<div id="myscroll">
		<div id="myscrollbox">
			<ul>
				<li><a href="#"><img src="images/01.jpg" width="242" height="390"><span class="intro"><h5>标题1</h5><p>这里写上简介文字</p></span></a></li>
				<li><a href="#"><img src="images/02.jpg" width="242" height="390"><span class="intro"><h5>标题2</h5><p>文字信息文字信息文字信息文字信息文字信息文字信息文字信息</p></span></a></li>
				<li><a href="#"><img src="images/03.jpg" width="242" height="390"><span class="intro"><h5>标题3</h5><p>这里写上简介文字</p></span></a></li>
				<li><a href="#"><img src="images/04.jpg" width="242" height="390"><span class="intro"><h5>标题4</h5><p>文字信息文字信息文字信息文字信息文字信息文字信息文字信息</p></span></a></li>
				<li><a href="#"><img src="images/01.jpg" width="242" height="390"><span class="intro"><h5>标题5</h5><p>这里写上简介文字</p></span></a></li>
				<li><a href="#"><img src="images/02.jpg" width="242" height="390"><span class="intro"><h5>标题6</h5><p>文字信息文字信息文字信息文字信息文字信息文字信息文字信息</p></span></a></li>
				<li><a href="#"><img src="images/03.jpg" width="242" height="390"><span class="intro"><h5>标题7</h5><p>这里写上简介文字</p></span></a></li>
				<li><a href="#"><img src="images/04.jpg" width="242" height="390"><span class="intro"><h5>标题8</h5><p>文字信息文字信息文字信息文字信息文字信息文字信息文字信息</p></span></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

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