js放大镜效果。类似于淘宝产品内页多图展示代码，鼠标移到图片上有放大效果，方便查看产品细节，此代码适合网店产品展示，

本文链接：https://blog.csdn.net/u011955559/article/details/17144713

这是一个使用JavaScript和jQuery实现的图片放大镜效果代码，适用于网页产品展示。当鼠标移到图片上时，会显示一个浮动的放大窗口，方便用户查看产品细节。代码包括HTML结构、CSS样式和JavaScript功能实现，同时包含左右滚动图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebApplication1.WebForm5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link href="css/css.css" type="text/css" rel="stylesheet">	
<SCRIPT src="js/jquery-1.2.6.pack.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/base.js" type=text/javascript></SCRIPT>
</head>

<body style="text-align:center">

<div id=preview>
	<div class=jqzoom id=spec-n1 onClick="window.open('http://www.mobanwang.com/')"><IMG height=350
	src="images/1.jpg" jqimg="images/1.jpg" width=350>
	</div>
	<div id=spec-n5>
		<div class=control id=spec-left>
			<img src="images/left.gif" />
		</div>
		<div id=spec-list>
			<ul class=list-h>
				<li><img src="images/1.jpg"> </li>
				<li><img src="images/2.jpg"> </li>
                <li><img src="images/3.jpg"> </li>
                <li><img src="images/4.jpg"> </li>
                <li><img src="images/5.jpg"> </li>
                <li><img src="images/1.jpg"> </li>
				<li><img src="images/2.jpg"> </li>
                <li><img src="images/3.jpg"> </li>
                <li><img src="images/4.jpg"> </li>
                <li><img src="images/5.jpg"> </li>
			</ul>
		</div>
		<div class=control id=spec-right>
			<img src="images/right.gif" />
		</div>
		
    </div>
</div>
<SCRIPT type=text/javascript>
    $(function () {
        $(".jqzoom").jqueryzoom({
            xzoom: 400,
            yzoom: 400,
            offset: 10,
            position: "right",
            preload: 1,
            lens: 1
        });
        $("#spec-list").jdMarquee({
            deriction: "left",
            width: 350,
            height: 56,
            step: 2,
            speed: 4,
            delay: 10,
            control: true,
            _front: "#spec-right",
            _back: "#spec-left"
        });
        $("#spec-list img").bind("mouseover", function () {
            var src = $(this).attr("src");
            $("#spec-n1 img").eq(0).attr({
                src: src.replace("\/n5\/", "\/n1\/"),
                jqimg: src.replace("\/n5\/", "\/n0\/")
            });
            $(this).css({
                "border": "2px solid #ff6600",
                "padding": "1px"
            });
        }).bind("mouseout", function () {
            $(this).css({
                "border": "1px solid #ccc",
                "padding": "2px"
            });
        });
    })
	</SCRIPT>
<SCRIPT src="js/lib.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/163css.js" type=text/javascript></SCRIPT>
</body>
</html>