Jquery特效九:图片产品展示变换

技术2025-07-29 14

效果图及代码如下：<!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> <title> Demo : Dev By CssRain.cn </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/cssreset.css" type="text/css"/> <link rel="stylesheet" href="css/mycss.css" type="text/css"/> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script><script language="javascript" type="text/javascript"> jQuery.fn.loadthumb = function(options) { options = $.extend({ src : "" },options); var _self = this; _self.hide(); var img = new Image(); $(img).load(function(){ _self.attr("src", options.src); _self.fadeIn("slow"); }).attr("src", options.src); //.atte("src",options.src)要放在load后面， return _self; }

$(function(){ var i = 5; //已知显示的<a>元素的个数 var m = 5; //用于计算的变量 var $content = $("#myImagesSlideBox .scrollableDiv"); var count = $content.find("a").length;//总共的<a>元素的个数 //下一张 $(".next").live("click",function(){ var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv"); if( !$scrollableDiv.is(":animated")){ //判断元素是否正处于动画，如果不处于动画状态，则追加动画。 if(m<count){ //判断 i 是否小于总的个数 m++; $scrollableDiv.animate({left: "-=50px"}, 600); } } return false; }); //上一张 $(".prev").live("click",function(){ var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv"); if( !$scrollableDiv.is(":animated")){ if(m>i){ //判断 i 是否小于总的个数 m--; $scrollableDiv.animate({left: "+=50px"}, 600); } } return false; });

$(".scrollableDiv a").live("click",function(){ var src = $(this).find("img").attr("imgb"); var bigimgSrc = $(this).find("img").attr("bigimg"); $(this).parents(".myImagesSlideBox").find(".myImgs").loadthumb({src:src}).attr("bigimg",bigimgSrc); $(this).addClass("active").siblings().removeClass("active"); return false; }); $(".scrollableDiv a:nth-child(1)").trigger("click"); $(".myTxts a").live("click",function(){ var bigimgSrc =$(this).parents(".myImagesSlideBox").find(".myImgs").attr("bigimg"); popZoom( bigimgSrc , "500" , "500"); return false; });

//以新窗口的方式打开图片 var windowWidth =$(window).width(); var windowHeight =$(window).height(); function popZoom(pictURL, pWidth, pHeight) { var sWidth = windowWidth; var sHeight = windowHeight; var x1 = pWidth; var y1 = pHeight; var opts = "height=" + y1 + ",width=" + x1 + ",left=" + ((sWidth-x1)/2) +",top="+ ((sHeight-y1)/2)+",scrollbars=0,menubar=0"; pZoom = window.open("","", opts); pZoom.document.open(); pZoom.document.writeln("<html><body bgcolor=/"skyblue/"" +" οnblur='self.close();' style='margin:0;padding:0;'>"); pZoom.document.writeln("<img src=/"" + pictURL + "/" width=/"" +pWidth + "px/" height=/"" + pHeight + "px/">"); pZoom.document.writeln("</body></html>"); pZoom.document.close(); } /*关闭遮罩层*/ $(".closeMyDiv a").live("click",function(){ $("#MyDiv").empty().hide(); $("#BigDiv").hide(); return false; }).focus(function(){ $(this).blur(); return false; });

/*使用遮罩层*/ $("#myImagesSlideBox .myImages img").click(function(){ /*遮罩层居中和宽度高度设置 */ $("#BigDiv").css({ width: $("body").width() , height: ( $("body").height() > $("html").height() ) ? $("body").height() : $("html").height() }); $("#MyDiv").css({left: (($(window).width()-300)/2) ,top: (($(window).height()-390)/2) });

var $myDiv = $("#MyDiv").html( $("#myImagesSlideBox").html() ).show(); $('<div class="closeMyDiv"><a href="#">关闭</a></div>').prependTo( $myDiv ); $("#BigDiv").show(); return false; }); })</script>

</head><body><div style="margin:20px auto;width:400px;">

<div id="myImagesSlideBox" class="myImagesSlideBox"> <div class="myImages"> <img src="images/d3.jpg" class="myImgs" bigimg="images/bigimges_01.jpg" > </div> <div class="myTxts" > <a href="#">在新窗口查看大图.</a> </div> <div id="scrollable"> <a class="prev" href="#" title="上一张"></a> <div class="items" > <div class="scrollableDiv"> <a><img src="images/d1-small.jpg" imgb="images/d1.jpg" bigimg="images/bigimges_01.jpg" ></a> <a><img src="images/d2-small2.jpg" imgb="images/d2-0000.jpg" bigimg="images/bigimges_01.jpg" ></a> <a><img src="images/small3.jpg" imgb="images/d3.jpg" bigimg="images/bigimges_02.jpg"></a>

<br clear="all"/> <p>程序介绍：</p> <p>1，点击大图可以弹出遮罩效果.</p> <p>2，下方小图可以左右滚动.</p> <p>3，点击新窗口打开，可以打开当前的大图片.</p> <p>4，遮罩层中小图也可以左右滚动，也可以打开大图片.</p> <br clear="all"/> <p>在 IE6,IE7,Firefox3 & google 浏览器下测试通过.</p> <br clear="all"/> <p>Dev By <a href="http://www.cssrain.cn" >CssRain.cn</a></p>

<div id="BigDiv" ></div> <div id="MyDiv" class="myImagesSlideBox"></div></div></body></html>

最新回复(0)