jquery通过判断屏幕分辨率页面宽屏显示插件


jquery通过判断屏幕分辨率页面宽屏显示插件
jquery通过判断屏幕分辨率页面宽屏显示插件以及宽屏显示等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<script type="text/javascript">
$(document).ready(function(){
	//判断设置图片在不同分辨率下显示哪种尺寸
	$(".swpic").attr("src", function(){
		var wi = $(this).attr("wi");
		var si = $(this).attr("si");
		if(isWidescreen){
			$(this).attr("src", wi);
			$(this).removeAttr("wi");
		}else{
			$(this).attr("src", si);
			$(this).removeAttr("si");
		}
	});	
});																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										
</script>
<div class="wrap">
	<h2>通过判断屏幕分辨率设置页面是否宽屏显示<small>这个方法主要是通过判断样式表的优先级来输出屏幕的宽度</small></h2>
	<h3>在大于1280像素下看下效果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;或&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在小于1280像素下看下效果</h3>
	<div class="slidebox">
		<ul class="slidepic">
			<li><a href="http://www.51qianduan.com/"><img class="swpic" alt="jsfoot网页特效" src="images/blank.gif" si="images/e61ff0b85ac8aa11YY.jpg" wi="images/b3e08980e7723d0cYY.jpg" /></a></li>
			<li><a href="http://www.51qianduan.com/"><img class="swpic" alt="jsfoot网页特效" src="images/blank.gif" si="images/fe713d1b0e4b27d4YY.jpg" wi="images/9df6c7a8e3008e8aYY.jpg" />
</a></li>
			<li><a href="http://www.51qianduan.com/"><img class="swpic" alt="jsfoot网页特效" src="images/blank.gif" si="images/1f9d79c774edbc65YY.jpg" wi="images/af871ae662c5fedcYY.jpg" />
</a></li>
			<li><a href="http://www.51qianduan.com/"><img class="swpic" alt="jsfoot网页特效" src="images/blank.gif" si="images/22a843b8d23d821dYY.jpg" wi="images/21d580a06371fd9eYY.jpg" />
</a></li>
		</ul>
		<div class="slidebtn">
			<ul>
				<li class="current">1</li>
				<li>2</li>
				<li>3</li>		
				<li>4</li>				
			</ul>
		</div>
	</div><!--slidebox end-->
	<script type="text/javascript">
	$(function(){
		// 图片上下翻滚
		var len = $('.slidebtn>ul>li').length;
		var index = 0;
		var autoplay;
		$('.slidebtn li').mouseover(function(){
			index = $('.slidebtn li').index(this);
			showImg(index);
		}).eq(0).mouseover();
		$('.slidebox').hover(function(){
			clearInterval(autoplay);
		},function(){
			autoplay = setInterval(function(){
				showImg(index)
				index++;
				if(index==len){
					index=0;
				}
			},3000);
		}).trigger('mouseleave');
		function showImg(index){
			var picheight = $('.slidebox').height();
			$('.slidepic').stop(true,false).animate({top:-picheight*index},600)
			$('.slidebtn li').removeClass('current').eq(index).addClass('current');
		};
	});	
	</script>
</div>

相关推荐

发表评论

相关文章