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

原创 2013年12月05日 17:08:34
<%@ 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>

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【C#】winform 图片局部放大类似淘宝

整体效果: 有两个picturebox控件,name默认没有修改。其中picturebox1的img赋予初始值,picturebox2的visible=false;其余不变,程序比较简单,看以参考下...

C#(winform)实现图片的无损放大缩小【点击鼠标滚动键放大缩小】

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

京东产品内页 多图展示代码

  • 2013年03月21日 16:47
  • 367KB
  • 下载

分享购物网站中常用的一款放大镜效果(产品细节展示)

发现程序猿写博客前都喜欢吐槽一下,也难怪,平时交流少了,内心积累了不少的骚气,是应该适当发泄一下。 哥要发泄了:目前在广州蜂众网效力,这是一家刚创立不久的公司,哥喜欢接触一些新公司,活力充足,发...

京东产品内页多图展示代码

  • 2015年09月08日 16:02
  • 491KB
  • 下载

flash+jquery产品内页多图展示代码

  • 2010年08月10日 16:02
  • 509KB
  • 下载

第15课时 360度全景图、QQ幻灯片、倒计时、放大镜效果、苹果官网产品展示

360度全景图、QQ幻灯片、倒计时、放大镜效果、苹果官网产品展示
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js放大镜效果。类似于淘宝产品内页多图展示代码,鼠标移到图片上有放大效果,方便查看产品细节,此代码适合网店产品展示,
举报原因:
原因补充:

(最多只允许输入30个字)