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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js实现淘宝放大镜效果

记得很久以前,小编就准备写个放大镜,但是种种原因导致,一直没有完成这个愿望,下面,让我们一起来实现这个常见的功能吧。 不懂的同学,可能认为这很难细实现,觉得它很博大精深的样子,其实真了解他了,...

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

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

淘宝产品详情页 上拉加载图片详情 效果实现

淘宝产品详情页 上拉加载图片详情 效果实现, 希望有建议可以一起交流。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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