jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する
这篇文章主要介绍了jQuery淘宝产品图片放大镜特效，鼠标点击图片，图片放大，特别适合图片细节展示，感兴趣的小伙伴可以参考下。
(1)html代码：
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<a href="images/01.jpg">
<img class="jqzoom lazy" src="/static/imghw/default1.png" data-src="images/01_mid.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" rel="images/01.jpg" /></a>
</div>
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected">
<div class="tb-pic tb-s40">
<a href="#">
<img src="/static/imghw/default1.png" data-src="images/01_small.jpg" class="lazy" mid="images/01_mid.jpg" big="images/01.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="/static/imghw/default1.png" data-src="images/02_small.jpg" class="lazy" mid="images/02_mid.jpg" big="images/02.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="/static/imghw/default1.png" data-src="images/03_small.jpg" class="lazy" mid="images/03_mid.jpg" big="images/03.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="/static/imghw/default1.png" data-src="images/04_small.jpg" class="lazy" mid="images/04_mid.jpg" big="images/04.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="/static/imghw/default1.png" data-src="images/05_small.jpg" class="lazy" mid="images/05_mid.jpg" big="images/05.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div>
</li>
</ul>
</div> ログイン後にコピー
(2)css代码：
html{overflow-y:scroll;}
body{margin:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;}
div,ul,li{padding:0; margin:0;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
/* box */
.box{width:310px;margin:100px auto;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;width:310px;}
.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40, .tb-s40 a{height:40px;width:40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;} ログイン後にコピー
本文实例讲述了jQuery淘宝产品图片放大镜特效。分享给大家供大家参考。具体如下：
这是一款基于jQuery淘宝产品图片放大镜特效代码，实现过程很简单。
运行效果图：-----------------------------查看效果 源码下载----------------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery淘宝产品图片放大镜特效代码如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery淘宝产品图片放大镜代码</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>
<style type="text/css">
html{overflow-y:scroll;}
body{margin:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;}
div,ul,li{padding:0; margin:0;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
/* box */
.box{width:310px;margin:100px auto;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;width:310px;}
.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40, .tb-s40 a{height:40px;width:40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
</style>
</head>
<body>
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<a href="images/01.jpg"><img class="jqzoom lazy" src="/static/imghw/default1.png" data-src="images/01_mid.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" rel="images/01.jpg" /></a>
</div>
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="/static/imghw/default1.png" data-src="images/01_small.jpg" class="lazy" mid="images/01_mid.jpg" big="images/01.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="/static/imghw/default1.png" data-src="images/02_small.jpg" class="lazy" mid="images/02_mid.jpg" big="images/02.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="/static/imghw/default1.png" data-src="images/03_small.jpg" class="lazy" mid="images/03_mid.jpg" big="images/03.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="/static/imghw/default1.png" data-src="images/04_small.jpg" class="lazy" mid="images/04_mid.jpg" big="images/04.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="/static/imghw/default1.png" data-src="images/05_small.jpg" class="lazy" mid="images/05_mid.jpg" big="images/05.jpg" alt="jQuery_jqueryに基づいて淘宝網の商品写真を模倣するための虫眼鏡コードを共有する" ></a></div></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".jqzoom").imagezoom();
$("#thumblist li a").click(function(){
$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
$(".jqzoom").attr('src',$(this).find("img").attr("mid"));
$(".jqzoom").attr('rel',$(this).find("img").attr("big"));
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>ログイン後にコピー
以上就是为大家分享的jQuery淘宝产品图片放大镜特效代码，希望大家可以喜欢，并应用到实践中。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7539
15
7539
15
CakePHP チュートリアル
1380
52
1380
52
Steamのアカウント名の形式は何ですか
83
11
83
11
NYTの接続はヒントと回答です
21
86
21
86
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？
Mar 18, 2025 pm 03:14 PM
この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:16 PM
この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:17 PM
この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？
Apr 04, 2025 pm 05:12 PM
Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...
