以下是 jQuery左右拖动切换大小特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312" />
<meta content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" name="viewport" />
<title>jQuery�����϶��л���С��Ч</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/layout.js"></script>
<script type="text/javascript" src="js/jquery.respontent.all.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('.example .w').respontent({
tables: function() {
if ( $(this).hasClass( 'list' ) )
{
return 'list';
}
}
});
});
</script>
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/layout.css" />
<link type="text/css" rel="stylesheet" href="css/jquery.respontent.all.css" />
</head>
<body>
<nav>
<ul>
<li><a href="#examples">Examples</a></li>
</ul>
</nav>
<div id="wrapper">
<section id="examples">
<div class="example">
<h3><span>Images</span></h3>
<div>
<div class="w">
<em>with respontent</em>
<img src="img/zzsc.jpg" />
</div>
<div class="divider"></div>
<div class="wo">
<em>without respontent</em>
<img src="img/zzsc.jpg" />
</div>
</div>
</div>
<div class="example">
<h3><span>YouTube videos</span></h3>
<div>
<div class="w">
<em>with respontent</em>
<iframe width="400" height="300" src="#/player.php/Type/Folder/Fid/22871142/Ob/1/sid/XNzg5MTEyNzM2/v.swf" frameborder="0" allowfullscreen></iframe>
</div>
<div class="divider"></div>
<div class="wo">
<em>without respontent</em>
<iframe width="400" height="300" src="#/player.php/sid/XNzg5MTE0MzI0/v.swf" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="example">
<h3><span>Tables</span></h3>
<div>
<div class="w">
<em>with respontent</em>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Population</th>
<th>Food source</th>
<th>Shelter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pedigree</td>
<td>Fed by guardian</td>
<td>Human guardian</td>
</tr>
<tr>
<td>Pet</td>
<td>Fed by guardian</td>
<td>Human homes</td>
</tr>
<tr>
<td>Semi-feral</td>
<td>General feeding</td>
<td>Buildings</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<div class="wo">
<em>without respontent</em>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Population</th>
<th>Food source</th>
<th>Shelter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pedigree</td>
<td>Fed by guardian</td>
<td>Human guardian</td>
</tr>
<tr>
<td>Pet</td>
<td>Fed by guardian</td>
<td>Human homes</td>
</tr>
<tr>
<td>Semi-feral</td>
<td>General feeding</td>
<td>Buildings</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="example">
<h3><span>Tables</span></h3>
<div>
<div class="w">
<em>with respontent</em>
<table class="list" border="1" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Population</th>
<th>Food source</th>
<th>Shelter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pedigree</td>
<td>Fed by guardian</td>
<td>Human guardian</td>
</tr>
<tr>
<td>Pet</td>
<td>Fed by guardian</td>
<td>Human homes</td>
</tr>
<tr>
<td>Semi-feral</td>
<td>General feeding</td>
<td>Buildings</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<div class="wo">
<em>without respontent</em>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Population</th>
<th>Food source</th>
<th>Shelter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pedigree</td>
<td>Fed by guardian</td>
<td>Human guardian</td>
</tr>
<tr>
<td>Pet</td>
<td>Fed by guardian</td>
<td>Human homes</td>
</tr>
<tr>
<td>Semi-feral</td>
<td>General feeding</td>
<td>Buildings</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="example">
<h3><span>Google Maps</span></h3>
<div>
<div class="w">
<em>with respontent</em>
<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="#maps.google.com/maps?f=q&source=s_q&geocode=&q=Catskill,+New+York,+Verenigde+Staten&aq=0&oq=cats&sll=37.0625,-95.677068&sspn=46.27475,79.716797&ie=UTF8&hq=&hnear=Catskill,+Greene+County,+New+York&t=m&z=14&ll=42.21731,-73.864573&output=embed"></iframe>
</div>
<div class="divider"></div>
<div class="wo">
<em>without respontent</em>
<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="#maps.google.com/maps?f=q&source=s_q&geocode=&q=Catskill,+New+York,+Verenigde+Staten&aq=0&oq=cats&sll=37.0625,-95.677068&sspn=46.27475,79.716797&ie=UTF8&hq=&hnear=Catskill,+Greene+County,+New+York&t=m&z=14&ll=42.21731,-73.864573&output=embed"></iframe>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
JS代码(layout.js):
//resize example boxes$(function(){
var $b = $('body'),$w = $('#wrapper'),$d = $('.divider');
var leftPost = false,width = false;
$(window).on('resize',function(){
leftPos = $w.offset().left;
width = $w.width();
$d.trigger( 'mousemove',[ true ] )}
).trigger( 'resize' );
$d.each(function(){
var $d = $(this),$e = $d.closest( '.example' ),$w = $e.find( '.w' ),$o = $e.find( '.wo' );
var $emw = $w.find( 'em' ),$emo = $o.find( 'em' );
var dragging = false,mousePos = false;
$d.on('mousedown',function( e ){
dragging = true;
}
);
$b.on('mousemove',function( e,force ){
if ( dragging || force ){
e.preventDefault();
if ( e.pageX ){
mousePos = e.pageX;
}
if ( mousePos && leftPos && width ){
var perc = Math.round( Math.max( 20,Math.min( 80,( mousePos - leftPos ) * 100 / width ) ) );
$w.css( 'width',perc + '%' );
$o.css( 'width',( 100 - perc ) + '%' );
$d.css( 'left',perc + '%' );
$emw.css( 'right',( 100 - perc ) + '%' );
$emo.css( 'left',perc + '%' );
}
}
}
);
$b.on('mouseup mouseleave',function( e ){
dragging = false;
}
);
}
);
}
);
//scroll through page$(function(){
var $nav = $('nav'),$subs = $($('section').get().reverse());
var $window = $(window),$html = $( 'html,body' );
$nav.find( 'a' ).on('click',function( e ){
e.preventDefault();
$html.animate({
scrollTop:$($(this).attr( 'href' )).offset().top}
,800);
}
);
$window.bind('scroll',function( e ){
var st = $(window).scrollTop();
for ( var a = 0;
a < $subs.length;
a++ ){
if ( st > $subs.eq( a ).offset().top - 75){
$nav.find( 'li' ).removeClass( 'selected' );
$nav.find( 'a[href="#' + $subs.eq( a ).attr( 'id' ) + '"]' ).parent().addClass( 'selected' )break;
}
}
}
);
}
);
//email link$(function(){
var i = 'info',f = 'frebsite',n = 'nl';
$('#email').attr( 'href','mailto:' + i + '@' + f + '.' + n );
}
);
CSS代码(style.css):
html,body{width:100%;height:100%;}
body{background-color:#00A69C;font-family:Arial,sans-serif;font-size:16px;-webkit-text-size-adjust:none;line-height:22px;color:#fff;}
::selection{background:#FF5963;}
::-moz-selection{background:#FF5963;}
h2{font-size:30px;line-height:30px;margin:35px 0 15px 0;}
h3,h4,h5,h6{font-size:20px;line-height:22px;margin:25px 0 10px 0;}
p,ul,ol{margin:0 0 10px 0;}
a,a:link,a:active,a:visited,a:hover{color:inherit;text-decoration:underline;}
pre,code{font-family:Consolas,monospace;font-weight:normal;overflow:auto;}
pre{background:rgba( 255,255,255,0.15 );font-size:12px;padding:10px 20px;margin:10px -150px;}
code{font-size:16px;}
th,td{text-align:left;vertical-align:top;}
分享到QQ
分享到微博
微信扫一扫
