放大镜效果

来源：互联网发布：c 多进程编程编辑：程序博客网时间：2024/04/30 04:57

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

/*jqzoom*/
$(function () { $(".jqzoom").jqueryzoom({ xzoom: 400, yzoom: 400, offset: 10, position: "right", preload: 1, lens: 1 }); $("#spec-list").jdMarquee({ deriction: "left", width: 300, 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("\/P56.jpg\/", "\/P300.jpg\/"), jqimg: src.replace("\/P56.jpg\/", "\/P800.jpg\/") }); $(this).css({ "border": "2px solid #ff6600", "padding": "1px" }); }).bind("mouseout", function () { $(this).css({ "border": "1px solid #ccc", "padding": "2px" }); }); });
/*jqueryzoom*/
(function ($) { $.fn.jqueryzoom = function (options) { var settings = { xzoom: 200, yzoom: 200, offset: 10, position: "right", lens: 1, preload: 1 }; if (options) { $.extend(settings, options); }; var noalt = ''; $(this).hover(function () { var imageLeft = $(this).offset().left; var imageTop = $(this).offset().top; var imageWidth = $(this).children('img').get(0).offsetWidth; var imageHeight = $(this).children('img').get(0).offsetHeight; noalt = $(this).children("img").attr("alt"); var bigimage = $(this).children("img").attr("jqimg"); $(this).children("img").attr("alt", ''); if ($("div.zoomdiv").get().length == 0) { $(this).after("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>"); $(this).append("<div class='jqZoomPup'> </div>"); }; if (settings.position == "right") { if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width) { leftpos = imageLeft - settings.offset - settings.xzoom; } else { leftpos = imageLeft + imageWidth + settings.offset; } } else { leftpos = imageLeft - settings.xzoom - settings.offset; if (leftpos < 0) { leftpos = imageLeft + imageWidth + settings.offset; } }; $("div.zoomdiv").css({ top: imageTop, left: leftpos }); $("div.zoomdiv").width(settings.xzoom); $("div.zoomdiv").height(settings.yzoom); $("div.zoomdiv").show(); if (!settings.lens) { $(this).css('cursor', 'crosshair'); }; $(document.body).mousemove(function (e) { mouse = new MouseEvent(e); var bigwidth = $(".bigimg").get(0).offsetWidth; var bigheight = $(".bigimg").get(0).offsetHeight; var scaley = 'x'; var scalex = 'y'; if (isNaN(scalex) | isNaN(scaley)) { var scalex = (bigwidth / imageWidth); var scaley = (bigheight / imageHeight); $("div.jqZoomPup").width((settings.xzoom) / (scalex * 1)); $("div.jqZoomPup").height((settings.yzoom) / (scaley * 1)); if (settings.lens) { $("div.jqZoomPup").css('visibility', 'visible'); } }; xpos = mouse.x - $("div.jqZoomPup").width() / 2 - imageLeft; ypos = mouse.y - $("div.jqZoomPup").height() / 2 - imageTop; if (settings.lens) { xpos = (mouse.x - $("div.jqZoomPup").width() / 2 < imageLeft) ? 0 : (mouse.x + $("div.jqZoomPup").width() / 2 > imageWidth + imageLeft) ? (imageWidth - $("div.jqZoomPup").width() - 2) : xpos; ypos = (mouse.y - $("div.jqZoomPup").height() / 2 < imageTop) ? 0 : (mouse.y + $("div.jqZoomPup").height() / 2 > imageHeight + imageTop) ? (imageHeight - $("div.jqZoomPup").height() - 2) : ypos; }; if (settings.lens) { $("div.jqZoomPup").css({ top: ypos, left: xpos }); }; scrolly = ypos; $("div.zoomdiv").get(0).scrollTop = scrolly * scaley; scrollx = xpos; $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex; }); }, function () { $(this).children("img").attr("alt", noalt); $(document.body).unbind("mousemove"); if (settings.lens) { $("div.jqZoomPup").remove(); }; $("div.zoomdiv").remove(); }); count = 0; if (settings.preload) { $('body').append("<div style='display:none;' class='jqPreload" + count + "'>360buy</div>"); $(this).each(function () { var imagetopreload = $(this).children("img").attr("jqimg"); var content = jQuery('div.jqPreload' + count + '').html(); jQuery('div.jqPreload' + count + '').html(content + '<img src=\"' + imagetopreload + '\">'); }); } } })(jQuery); function MouseEvent(e) { this.x = e.pageX; this.y = e.pageY; }

/*preview*/
#preview{float:left;width:302px;margin-bottom:20px;}
#btn-v2{position:absolute;z-index:3;margin:-45px 0 0;width:300px;height:44px;border:solid #e4e4e4;border-width:0 1px 1px;background-image:url(i/btn_360.jpg);background-repeat:no-repeat;cursor:pointer;}
.btn-view360{background-position:0 0;}
.btn-video{background-position:0 -45px;}
.btn-v2{background-position:0 -90px;}
.btn-view360 span,.btn-video span{display:none;}
.btn-v2 span{width:174px;height:44px;overflow:hidden;line-height:200px;}
#view360,#video{position:absolute;z-index:9;margin:-300px 0 0;width:300px;height:300px;padding:1px;}
#view{position:absolute;z-index:3;margin:-301px 0 0 300px;}
#view a{display:block;width:50px;height:50px;overflow:hidden;background:url(i/360_flash.png) no-repeat 0 0;text-indent:-200px;}
*html #view a{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://misc.360buyimg.com/201007/skin/df/i/360_flash.png",sizingMethod="crop");}
#preview .links{padding:15px 0 0 5px;height:23px;line-height:23px;}

#spec-n1{width:300px;height:300px;border:1px solid #e4e4e4;}
#spec-n5{position:relative;width:300px;height:56px;padding:5px 26px;}
#spec-list{width:250px;height:56px;overflow:hidden;}
#spec-list ul{height:56px;overflow:hidden;}
#spec-list li{width:60px;text-align:center;}
#spec-list img{padding:2px;border:1px solid #E8E8E8;}
#spec-n5 .control{position:absolute;top:10px;width:10px;height:45px;background-image:url(../images/icon_clubs.gif);background-repeat:no-repeat;cursor:pointer;}
#spec-left{left:8px;background-position:-68px -330px;}
#spec-right{right:8px;background-position:-79px -330px;}
#spec-left.disabled{background-position:-90px -330px;}
#spec-right.disabled{background-position:-101px -330px;}

/*jqzoom*/
.jqzoom{position:relative;padding:0;}
.zoomdiv{z-index:8;position:absolute;top:1px;left:0px;width:400px;height:400px;background:url(i/loading.gif) #fff no-repeat center center;border:1px solid #e4e4e4;display:none;text-align:center;overflow: hidden;}
.bigimg{width:800px;height:800px;}
.jqZoomPup{z-index:3;visibility:hidden;position:absolute;top:0px;left:0px;width:50px;height:50px;border:1px solid #aaa;background:#FEDE4F 50% top no-repeat;opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(Opacity=50);cursor:move;}
/*list-h&list-v*/
.list-h{overflow:hidden;zoom:1;}
.list-h li,.list-h dl{float:left;}
.list-h del{color:#999;margin-right:10px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    <form id="form1" runat="server">

    </form>
</body>
</html>