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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

7 26 9



特效描述:宽屏显示。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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 带标题的焦点图 带缩略图的幻灯片 带简介的焦点图 图片轮播 自动滚动图片轮播 马赛克幻灯片 全屏焦点图 flash焦点图 焦点图幻灯片

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到