js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 图片相册

jquery鼠标经过向上滑动标题,可以左右切换图片位置!

发布时间:2015-08-28 16:49:09    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery鼠标经过向上滑动标题,可以左右切换图片位置!
<!document html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery鼠标经过向上滑动标题,可以左右切换图片位置!</title>
		<style type="text/css">
			body{font-family:"微软雅黑";}
			img{border:none;}
			
			.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="http://www.jstxdm.com"><img src="images/01.jpg" width="242" height="390"><span class="intro"><h5>标题1</h5><p>这里写上简介文字</p></span></a></li>
						<li><a href="http://www.jstxdm.com"><img src="images/02.jpg" width="242" height="390"><span class="intro"><h5>标题2</h5><p>文字信息文字信息文字信息文字信息文字信息文字信息文字信息</p></span></a></li>
						<li><a href="http://www.jstxdm.com"><img src="images/03.jpg" width="242" height="390"><span class="intro"><h5>标题3</h5><p>这里写上简介文字</p></span></a></li>
						<li><a href="http://www.jstxdm.com"><img src="images/04.jpg" width="242" height="390"><span class="intro"><h5>标题4</h5><p>文字信息文字信息文字信息文字信息文字信息文字信息文字信息</p></span></a></li>
						<li><a href="http://www.jstxdm.com"><img src="images/01.jpg" width="242" height="390"><span class="intro"><h5>标题5</h5><p>这里写上简介文字</p></span></a></li>
						<li><a href="http://www.jstxdm.com"><img src="images/02.jpg" width="242" height="390"><span class="intro"><h5>标题6</h5><p>文字信息文字信息文字信息文字信息文字信息文字信息文字信息</p></span></a></li>
						<li><a href="http://www.jstxdm.com"><img src="images/03.jpg" width="242" height="390"><span class="intro"><h5>标题7</h5><p>这里写上简介文字</p></span></a></li>
						<li><a href="http://www.jstxdm.com"><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>



切换

jquery选项卡切换,版块鼠标跟随边框变色特效

tab选项卡切换特效并且带更多按钮

仿红木之家官网首页jquery焦点全屏大图切换特效

jquery顶部导航菜单下拉,左侧分类切换特效

12宫格点击城市切换地区滚动特效

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

js、html5实现极速3D立体式图片相册切换效果

jquery点击切换,3d淡入动画,头像相册特效

jquery实现网页右下角向上弹出广告代码,支持tab切换

jquery左右切换,带文字说明的焦点图特效

jquery鼠标经过向上滑动标题,可以左右切换图片位置!

jquery左右多图全屏拖拽以及点击弹窗多图切换效果

jquery左右布局的缓动Tab切换选项卡特效

jquery竖向tab切换焦点图特效

JS仿腾讯娱乐图片频道满屏左右切换焦点图特效

jQuery多张图片相册上下切换,放大预览等特效

友荐云推荐
大家说 此评论不代表本站观点