ホームページ >ウェブフロントエンド >jsチュートリアル >jquery画像スクロール拡大コード共有(1)_jquery
jquery画像スクロール拡大コード共有(1)_jquery
- WBOYオリジナル
- 2016-05-16 15:42:561095ブラウズ
この記事の例では、jquery 画像のスクロールと拡大効果について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、画像のスクロールと拡大効果を実装する jquery ベースのコードです。商品の表示に適しており、ユーザーが商品の詳細を閲覧しやすくなります。
オペレーション レンダリング: ----------------------エフェクトを表示ソース コードをダウンロード-------- ------ ----------
ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。
あなたと共有されたjquery画像のスクロールとズーム効果のコードは次のとおりです
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动放大效果</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="sliderbox">
<div id="btn-left" class="arrow-btn dasabled"></div>
<div class="slider">
<ul>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/go-launcher-ex.jpg"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/go-sms.jpg"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/imgwww20120104173328332830083.png"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/imgwww20120222114514451461239.jpg"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/ggbook.jpg"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/imgwww20120621153035303523388.png"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/lianxiren.jpg"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/go-touch.jpg"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/3g-android-market.jpg"/></a></li>
<li><a href="http://www.jb51.net/" target="_blank"><img src="images/3ggoucai.jpg"/></a></li>
</ul>
</div>
<div id="btn-right" class="arrow-btn"></div>
</div>
<script type="text/javascript">
var $slider = $('.slider ul');
var $slider_child_l = $('.slider ul li').length;
var $slider_width = $('.slider ul li').width();
$slider.width($slider_child_l * $slider_width);
var slider_count = 0;
if ($slider_child_l < 6) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').removeClass("dasabled");
}
$('#btn-right').click(function() {
if ($slider_child_l < 6 || slider_count >= $slider_child_l - 6) {
return false;
}
slider_count++;
$slider.animate({left: '-=' + $slider_width + 'px'}, 'slow');
slider_pic();
});
$('#btn-left').click(function() {
if (slider_count <= 0) {
return false;
}
slider_count--;
$slider.animate({left: '+=' + $slider_width + 'px'}, 'slow');
slider_pic();
});
function slider_pic() {
if (slider_count >= $slider_child_l - 6) {
$('#btn-right').css({cursor: 'auto'});
$('#btn-right').addClass("dasabled");
}
else if (slider_count > 0 && slider_count <= $slider_child_l - 6) {
$('#btn-left').css({cursor: 'pointer'});
$('#btn-left').removeClass("dasabled");
$('#btn-right').css({cursor: 'pointer'});
$('#btn-right').removeClass("dasabled");
}
else if (slider_count <= 0) {
$('#btn-left').css({cursor: 'auto'});
$('#btn-left').addClass("dasabled");
}
}
$('.slider a').hover(function() {
if ($(this).find('img:animated').length) return;
$(this).animate({marginTop: '0px'}, 300);
$(this).find('img').animate({width: '150px'}, 300);
}, function() {
$(this).animate({marginTop: '24px'}, 200);
$(this).find('img').animate({width: '90px'}, 200);
});
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
上記はあなたと共有したjquery画像スクロール拡大効果コードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。