loyung

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
jQuery-webcam（.NET）实现WEB摄像头监控

jQuery-webcam是一个非常好用的摄像头监控工具，DEMO可官方下载地址http://www.xarg.org/project/jquery-webcam-plugin/

1、下载解压后，jquery.webcam.js和jquery.webcam.min.js是两个主要文件

2、页面代码

<script type="text/javascript" src="../jQuery-webcam/jquery.webcam.js"></script>

        <script type="text/javascript">
    var image = new Array();
    var ctx = null;
    var pos = 0;
    var w = 320;
    var h= 240;
$(document).ready(function() {
     $("#webcam").webcam({  
    width: 320,
    height: 240,
    mode: "callback",
    swffile: "../jQuery-webcam/jscam_canvas_only.swf", 
    onTick: function(remain) {},
    onSave: function(data) {
        image.push(data); 
        pos += 4 * w;
                if (pos == 4 * w * h) {
                    $.post("CamPost.ashx", {w: w, h: h , pix:image.join('|'),planid:$("#planid").val(),examkey:$("#examkey").val()},function(msg) {
                                $("#flash").attr('src', msg); 
                                pos = 0; 
                                image = new Array();
                            });
                        } 
    },
    onCapture: function () {  webcam.save();},
    onLoad: function () {
        var cams = webcam.getCameraList();
       webcam.capture(); 
        for(var i in cams) {
            jQuery("#cams").append("<li>" + cams[i] + "</li>");
        }
    }
});
window.setInterval( "webcam.capture()",600000);

$("#camState").click(function(){
if($("#camBox").css("display")=="block")
{
    $("#camState").text("显示画面");
    $("#cam").css("border","none");
    $("#camBox").css("display","none");   
    
}
else if($("#camBox").css("display")=="none")
{
    $("#camState").text("隐藏画面");
    $("#cam").css("border","solid 2px #000");
    $("#camBox").css("display","block");
  }

});
});
        </script>

        <div id="cam" style="position: fixed; z-index: 300; width: 320px; height: 240px;
            right: 0px; top: 0px; border: solid 2px #000;">
            <div id="camBox">
                <div id="webcam">
                </div>
                <%--<div id="status"> </div>--%>
            </div>
            <div id="camState" style="cursor: pointer; background-color: Red; color: White; width: 50px;">
                隐藏画面</div>
        </div>
View Code

webcam参数说明：

width: 320, height: 240,//这两个参数考虑到显示效果320*240为标准的显示模式，不可更改（该插件硬伤）。如果要修改大小其实也是可以的，修改jscam.swf源文件

mode：// 存储方式可以按以下三种方式callback | save | stream 

swffile：//可以选择解压后jscam_canvas_only.swf或jscam.swf，jscam_canvas_only加快了每次调用设备的效率，因为他只有jscam.swf的1/3

onTick: function(remain) {}//定时触发，定时拍照

1 onTick: function(remain) {
2 
3     if (0 ==remain) {jQuery("#status").text("Cheese!");
4     } else {jQuery("#status").text(remain+ " seconds remaining...");
5     }
6 }

onSave：//关键地方，设置提交数据处理后台做图像参数设置

 1  onSave: function(data) {
 2         image.push(data); 
 3         pos += 4 * w;
 4                 if (pos == 4 * w * h) {
 5                     $.post("CamPost.ashx", {w: w, h: h , pix:image.join('|')},function(msg) {
 6                                 $("#flash").attr('src', msg); 
 7                                 pos = 0; 
 8                                 image = new Array();
 9                             });
10                         } 
11     },

onCapture：//点击拍照保存

   onCapture: function () {  webcam.save();},

onLoad：//插件加载事件，通常这里罗列设备列表

1     onLoad: function () {
2         var cams = webcam.getCameraList();
3        webcam.capture(); 
4         for(var i in cams) {
5             jQuery("#cams").append("<li>" + cams[i] + "</li>");
6         }
7     }

页面完整代码

 1 <script type="text/javascript" src="../jQuery-webcam/jquery.webcam.js"></script>
 2 
 3         <script type="text/javascript">
 4     var image = new Array();
 5     var ctx = null;
 6     var pos = 0;
 7     var w = 320;
 8     var h= 240;
 9 $(document).ready(function() {
10      $("#webcam").webcam({  
11     width: 320,
12     height: 240,
13     mode: "callback",
14     swffile: "../jQuery-webcam/jscam_canvas_only.swf", 
15     onTick: function(remain) {},
16     onSave: function(data) {
17         image.push(data); 
18         pos += 4 * w;
19                 if (pos == 4 * w * h) {
20                     $.post("CamPost.ashx", {w: w, h: h , pix:image.join('|'),planid:$("#planid").val(),examkey:$("#examkey").val()},function(msg) {
21                                 $("#flash").attr('src', msg); 
22                                 pos = 0; 
23                                 image = new Array();
24                             });
25                         } 
26     },
27     onCapture: function () {  webcam.save();},
28     onLoad: function () {
29         var cams = webcam.getCameraList();
30        webcam.capture(); 
31         for(var i in cams) {
32             jQuery("#cams").append("<li>" + cams[i] + "</li>");
33         }
34     }
35 });
36 window.setInterval( "webcam.capture()",600000);
37 
38 $("#camState").click(function(){
39 if($("#camBox").css("display")=="block")
40 {
41     $("#camState").text("显示画面");
42     $("#cam").css("border","none");
43     $("#camBox").css("display","none");   
44     
45 }
46 else if($("#camBox").css("display")=="none")
47 {
48     $("#camState").text("隐藏画面");
49     $("#cam").css("border","solid 2px #000");
50     $("#camBox").css("display","block");
51   }
52 
53 });
54 });
55         </script>
56 
57         <div id="cam" style="position: fixed; z-index: 300; width: 320px; height: 240px;
58             right: 0px; top: 0px; border: solid 2px #000;">
59             <div id="camBox">
60                 <div id="webcam">
61                 </div>
62                 <%--<div id="status"> </div>--%>
63             </div>
64             <div id="camState" style="cursor: pointer; background-color: Red; color: White; width: 50px;">
65                 隐藏画面</div>
66         </div>
View Code

后台处理代码：解析页面传递的8为色彩值

 1  context.Response.Clear();
 2         context.Response.ContentType = "text/plain";
 3         if (context.Request["pix"] != null && CheckStr.HasInjectionData(context.Request["pix"]))
 4         {
 5             if (!string.IsNullOrEmpty(context.Request["w"]) && !string.IsNullOrEmpty(context.Request["h"]) && !string.IsNullOrEmpty(context.Request["pix"]) && !string.IsNullOrEmpty(context.Request["planid"]) && !string.IsNullOrEmpty(context.Request["examkey"]))
 6             {
 7                 string planid = context.Request["planid"];
 8                 string examkey = context.Request["examkey"];
 9                 string width = context.Request["w"];
10                 string height = context.Request["h"];
11                 string pix = context.Request["pix"];
12                 int w = int.Parse(width);
13                 int h = int.Parse(height);
14                 string savePath = Server.MapPath("~/UpLoad/Cam_Img/" + planid + "/");
15                 try
16                 {
17 
18                     System.Drawing.Bitmap bmap = new System.Drawing.Bitmap(w, h);
19                     string[] rows = pix.Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries);
20                     for (int i = 0; i < rows.Length; i++)
21                     {
22                         string[] col = rows[i].Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries);
23                         for (int j = 0; j < col.Length; j++)
24                         {
25                             System.Drawing.Color color = System.Drawing.Color.FromArgb(Convert.ToInt32(col[j]));
26                             System.Drawing.Color reColor = System.Drawing.Color.FromArgb(255, color);
27                             bmap.SetPixel(j, i, reColor);
28                         }
29                     }
30                     System.IO.DirectoryInfo dirPath = new System.IO.DirectoryInfo(savePath);
31                     if (!dirPath.Exists)
32                     {
33                         dirPath.Create();
34                     }
35                     DateTime dt = DateTime.Now;
36                     string fileName = examkey + "&" + dt.ToString("yyyy-MM-dd HH时mm分ss秒", System.Globalization.DateTimeFormatInfo.InvariantInfo) + ".jpg";
37                     savePath += fileName;
38                     bmap.Save(savePath);
39                 }
40                 catch (Exception e)
41                 {
42                 }
43                 context.Response.Write(savePath);
44                 context.Response.End();
45             }
46         }
View Code

到此拍摄的画面就完整保存下来了，可根据调用拍照频率实现监控画面密度。

另附一段代码使用轮播相册，提取监控画面。

样式代码xiangce.css

 1 /*通用*/
 2 body,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,figure{ margin:0px; padding:0px;}
 3 body,button,input,select,textarea{ font-family:"微软雅黑";font-size:12px; }
 4 .clearleft{clear:left;}
 5 .clearright{clear:right}
 6 .left{float:left;}
 7 .right{float:right;}
 8 .clear{clear:both;}
 9 p,ul,li,dl,dd,dt,form,h1,h2,h3,h4,h5,h6{list-style:none;}
10 img{border:none;}
11 a{outline:none;blr:expression(this.onFocus=this.blur());text-decoration:none;color:Black;}
12 a:hover{ color:#ff5d11; text-decoration:underline; background-color:Transparent;}
13 img:hover{background: white;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8; opacity: 0.8;}
14 
15 /*图片轮播*/
16 .detail_context_pic{width:680px;margin-top:20px;margin-bottom:20px;overflow:hidden;}
17 .detail_context_pic_top{width:680px;overflow:hidden;text-align:center;position:relative;z-index:1;}
18 .detail_context_pic_bot{width:680px;height:107px;overflow:hidden;margin-top:20px;}
19 .detail_picbot_left{float:left;width:30px;height:107px;overflow:hidden;}
20 .detail_picbot_left a{display:block;width:30px;height:107px;}
21 .detail_picbot_mid{float:left;width:620px;border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;height:77px;overflow:hidden;padding-top:15px;padding-bottom:13px;}
22 .detail_picbot_mid ul{height:80px;width:620px;overflow:hidden;position:relative;}
23 .detail_picbot_mid ul li{float:left;height:84px;margin-left:25px;display:inline;width:94px;text-align:center;overflow:hidden;position:relative;}
24 .detail_picbot_mid ul li img{height:76px;max-width:90px;}
25 #pic1{max-width:680px;}
26 .selectpic{border:2px solid red;}
27 .detail_picbot_right{float:left;width:30px;height:107px;overflow:hidden;}
28 .detail_picbot_right a{display:block;width:30px;height:107px;}
29 #preArrow{left:0px;}
30 #nextArrow{right:0px;}
31 .contextDiv{cursor:pointer;height:100%;width:50%;position:absolute;top:0px;z-index:5;background:url("blank") repeat;}
32 .contextDiv span{position:absolute;top:50%;margin-top:-25px;width:39px;height:50px;}
33 #preArrow_A{left:16px;background:url('images/pic_left.png') 0px 0px no-repeat;display:none;}
34 #nextArrow_A{right:16px;background:url('images/pic_right.png') 0px 0px no-repeat;display:none;}
35 #miaoshuwarp{position:relative;bottom:0;z-index:1;width:680px;text-align:left;}
36 .miaoshu{position:absolute;width:660px; padding:0 10px; bottom:0;height:30px; line-height:30px;color:White;font-size:14px;z-index:3;background:url("images/bcgL.png") repeat-x; font-family:"宋体";}
37 .bodymodal{width:100%;height:100%;overflow:hidden;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;z-index:1100;position:fixed;top:0px;left:0px;display:none;}
38 .firsttop_left{width:250px;height:250px;margin-right:30px;overflow:hidden;float:left;}
39 .firsttop_right{float:left;width:250px;overflow:hidden;}
40 .close2{height:17px;}
41 .close2 a{background:url('images/close.jpg') 0px 0px no-repeat;width:15px;height:15px;display:block;float:right;}
42 .replay{height:24px;margin-top:20px;overflow:hidden;}
43 .replay h2{float:left;font-size:16px;}
44 .replay p{float:left;margin-left:15px;display:inline;line-height:24px;padding-right:25px;background:url('../images/replay.png') right no-repeat;}
45 .replay p a{color:white;font-size:14px;}
46 .replay p a:hover{color:#FF702D;text-decoration:underline;}
47 .pictwo{width:270px;height:88px;overflow:hidden;margin-top:20px;}
48 .pictwo ul li{width:120px;height:88px;float:left;margin-right:15px;position:relative;overflow:hidden;}
49 .pictwo ul li img{width:120px;height:88px;}
50 .imgdivtext{position:absolute;bottom:0px;height:25px;width:120px;background:rgba(0, 0, 0, 0.6);line-height:25px;text-align:center;left:0px;z-index:4;*background:#000;*filter:alpha(opacity=50);}
51 .imgdivtext a{color:White;font-size:14px;font-weight:bold;}
52 .imgdivtext a:hover{color:#FF702D;text-decoration:underline;}
53 .returnbtn {margin-top:35px; margin-left:35px;}
54 .returnbtn a{width:115px;height:22px;border:1px solid #ccc;padding:5px 15px;line-height:22px;text-align:center;color:White;font-size:16px;display:block;}
55 .returnbtn a:hover{color:#FF702D;border:1px solid #8d5a00;}
56 .firsttop{width:250px;padding:20px;background:#1C1C1C;position:fixed;top:100px;left:0px;z-index:1200;color:White;display:none;}
57 .endtop{width:250px;padding:20px;background:#1C1C1C;position:fixed;top:100px;left:0px;z-index:1200;color:White;display:none;}
View Code

jquery.SuperSlide.2.1.1.js代码

1 /*
2 鏈唬鐮佺敱浠ｇ爜绗旇鏀堕泦骞剁紪杈戞暣鐞?
3 杞浇璇蜂繚鐣欎唬鐮佺瑪璁伴摼鎺?- www.198zone.com
4 */
5 !function(a){a.fn.slide=function(b){return a.fn.slide.defaults={type:"slide",effect:"fade",autoPlay:!1,delayTime:500,interTime:2500,triggerTime:150,defaultIndex:0,titCell:".hd li",mainCell:".bd",targetCell:null,trigger:"mouseover",scroll:1,vis:1,titOnClassName:"on",autoPage:!1,prevCell:".prev",nextCell:".next",pageStateCell:".pageState",opp:!1,pnLoop:!0,easing:"swing",startFun:null,endFun:null,switchLoad:null,playStateCell:".playState",mouseOverStop:!0,defaultPlay:!0,returnDefault:!1},this.each(function(){var c=a.extend({},a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevCell,d),g=a(c.nextCell,d),h=a(c.pageStateCell,d),i=a(c.playStateCell,d),j=a(c.titCell,d),k=j.size(),l=a(c.mainCell,d),m=l.children().size(),n=c.switchLoad,o=a(c.targetCell,d),p=parseInt(c.defaultIndex),q=parseInt(c.delayTime),r=parseInt(c.interTime);parseInt(c.triggerTime);var Q,t=parseInt(c.scroll),u=parseInt(c.vis),v="false"==c.autoPlay||0==c.autoPlay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autoPage||0==c.autoPage?!1:!0,y="false"==c.pnLoop||0==c.pnLoop?!1:!0,z="false"==c.mouseOverStop||0==c.mouseOverStop?!1:!0,A="false"==c.defaultPlay||0==c.defaultPlay?!1:!0,B="false"==c.returnDefault||0==c.returnDefault?!1:!0,C=0,D=0,E=0,F=0,G=c.easing,H=null,I=null,J=null,K=c.titOnClassName,L=j.index(d.find("."+K)),M=p=-1==L?p:L,N=p,O=p,P=m>=u?0!=m%t?m%t:t:0,R="leftMarquee"==e||"topMarquee"==e?!0:!1,S=function(){a.isFunction(c.startFun)&&c.startFun(p,k,d,a(c.titCell,d),l,o,f,g)},T=function(){a.isFunction(c.endFun)&&c.endFun(p,k,d,a(c.titCell,d),l,o,f,g)},U=function(){j.removeClass(K),A&&j.eq(N).addClass(K)};if("menu"==c.type)return A&&j.removeClass(K).eq(p).addClass(K),j.hover(function(){Q=a(this).find(c.targetCell);var b=j.index(a(this));I=setTimeout(function(){switch(p=b,j.removeClass(K).eq(p).addClass(K),S(),e){case"fade":Q.stop(!0,!0).animate({opacity:"show"},q,G,T);break;case"slideDown":Q.stop(!0,!0).animate({height:"show"},q,G,T)}},c.triggerTime)},function(){switch(clearTimeout(I),e){case"fade":Q.animate({opacity:"hide"},q,G);break;case"slideDown":Q.animate({height:"hide"},q,G)}}),B&&d.hover(function(){clearTimeout(J)},function(){J=setTimeout(U,q)}),void 0;if(0==k&&(k=m),R&&(k=2),x){if(m>=u)if("leftLoop"==e||"topLoop"==e)k=0!=m%t?(0^m/t)+1:m/t;else{var V=m-u;k=1+parseInt(0!=V%t?V/t+1:V/t),0>=k&&(k=1)}else k=1;j.html("");var W="";if(1==c.autoPage||"true"==c.autoPage)for(var X=0;k>X;X++)W+="<li>"+(X+1)+"</li>";else for(var X=0;k>X;X++)W+=c.autoPage.replace("$",X+1);j.html(W);var j=j.children()}if(m>=u){l.children().each(function(){a(this).width()>E&&(E=a(this).width(),D=a(this).outerWidth(!0)),a(this).height()>F&&(F=a(this).height(),C=a(this).outerHeight(!0))});var Y=l.children(),Z=function(){for(var a=0;u>a;a++)Y.eq(a).clone().addClass("clone").appendTo(l);for(var a=0;P>a;a++)Y.eq(m-a-1).clone().addClass("clone").prependTo(l)};switch(e){case"fold":l.css({position:"relative",width:D,height:C}).children().css({position:"absolute",width:E,left:0,top:0,display:"none"});break;case"top":l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; height:'+u*C+'px"></div>').css({top:-(p*t)*C,position:"relative",padding:"0",margin:"0"}).children().css({height:F});break;case"left":l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+u*D+'px"></div>').css({width:m*D,left:-(p*t)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0"}).children().css({"float":"left",width:E});break;case"leftLoop":case"leftMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+u*D+'px"></div>').css({width:(m+u+P)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(P+p*t)*D}).children().css({"float":"left",width:E});break;case"topLoop":case"topMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; height:'+u*C+'px"></div>').css({height:(m+u+P)*C,position:"relative",padding:"0",margin:"0",top:-(P+p*t)*C}).children().css({height:F})}}var $=function(a){var b=a*t;return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b},_=function(b){var c=function(c){for(var d=c;u+c>d;d++)b.eq(d).find("img["+n+"]").each(function(){var b=a(this);if(b.attr("src",b.attr(n)).removeAttr(n),l.find(".clone")[0])for(var c=l.children(),d=0;d<c.size();d++)c.eq(d).find("img["+n+"]").each(function(){a(this).attr(n)==b.attr("src")&&a(this).attr("src",a(this).attr(n)).removeAttr(n)})})};switch(e){case"fade":case"fold":case"top":case"left":case"slideDown":c(p*t);break;case"leftLoop":case"topLoop":c(P+$(O));break;case"leftMarquee":case"topMarquee":var d="leftMarquee"==e?l.css("left").replace("px",""):l.css("top").replace("px",""),f="leftMarquee"==e?D:C,g=P;if(0!=d%f){var h=Math.abs(0^d/f);g=1==p?P+h:P+h-1}c(g)}},ab=function(a){if(!A||M!=p||a||R){if(R?p>=1?p=1:0>=p&&(p=0):(O=p,p>=k?p=0:0>p&&(p=k-1)),S(),null!=n&&_(l.children()),o[0]&&(Q=o.eq(p),null!=n&&_(o),"slideDown"==e?(o.not(Q).stop(!0,!0).slideUp(q),Q.slideDown(q,G,function(){l[0]||T()})):(o.not(Q).stop(!0,!0).hide(),Q.animate({opacity:"show"},q,function(){l[0]||T()}))),m>=u)switch(e){case"fade":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,G,function(){T()}).siblings().hide();break;case"fold":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,G,function(){T()}).siblings().animate({opacity:"hide"},q,G);break;case"top":l.stop(!0,!1).animate({top:-p*t*C},q,G,function(){T()});break;case"left":l.stop(!0,!1).animate({left:-p*t*D},q,G,function(){T()});break;case"leftLoop":var b=O;l.stop(!0,!0).animate({left:-($(O)+P)*D},q,G,function(){-1>=b?l.css("left",-(P+(k-1)*t)*D):b>=k&&l.css("left",-P*D),T()});break;case"topLoop":var b=O;l.stop(!0,!0).animate({top:-($(O)+P)*C},q,G,function(){-1>=b?l.css("top",-(P+(k-1)*t)*C):b>=k&&l.css("top",-P*C),T()});break;case"leftMarquee":var c=l.css("left").replace("px","");0==p?l.animate({left:++c},0,function(){l.css("left").replace("px","")>=0&&l.css("left",-m*D)}):l.animate({left:--c},0,function(){l.css("left").replace("px","")<=-(m+P)*D&&l.css("left",-P*D)});break;case"topMarquee":var d=l.css("top").replace("px","");0==p?l.animate({top:++d},0,function(){l.css("top").replace("px","")>=0&&l.css("top",-m*C)}):l.animate({top:--d},0,function(){l.css("top").replace("px","")<=-(m+P)*C&&l.css("top",-P*C)})}j.removeClass(K).eq(p).addClass(K),M=p,y||(g.removeClass("nextStop"),f.removeClass("prevStop"),0==p&&f.addClass("prevStop"),p==k-1&&g.addClass("nextStop")),h.html("<span>"+(p+1)+"</span>/"+k)}};A&&ab(!0),B&&d.hover(function(){clearTimeout(J)},function(){J=setTimeout(function(){p=N,A?ab():"slideDown"==e?Q.slideUp(q,U):Q.animate({opacity:"hide"},q,U),M=p},300)});var bb=function(a){H=setInterval(function(){w?p--:p++,ab()},a?a:r)},cb=function(a){H=setInterval(ab,a?a:r)},db=function(){z||(clearInterval(H),bb())},eb=function(){(y||p!=k-1)&&(p++,ab(),R||db())},fb=function(){(y||0!=p)&&(p--,ab(),R||db())},gb=function(){clearInterval(H),R?cb():bb(),i.removeClass("pauseState")},hb=function(){clearInterval(H),i.addClass("pauseState")};if(v?R?(w?p--:p++,cb(),z&&l.hover(hb,gb)):(bb(),z&&d.hover(hb,gb)):(R&&(w?p--:p++),i.addClass("pauseState")),i.click(function(){i.hasClass("pauseState")?gb():hb()}),"mouseover"==c.trigger?j.hover(function(){var a=j.index(this);I=setTimeout(function(){p=a,ab(),db()},c.triggerTime)},function(){clearTimeout(I)}):j.click(function(){p=j.index(this),ab(),db()}),R){if(g.mousedown(eb),f.mousedown(fb),y){var ib,jb=function(){ib=setTimeout(function(){clearInterval(H),cb(0^r/10)},150)},kb=function(){clearTimeout(ib),clearInterval(H),cb()};g.mousedown(jb),g.mouseup(kb),f.mousedown(jb),f.mouseup(kb)}"mouseover"==c.trigger&&(g.hover(eb,function(){}),f.hover(fb,function(){}))}else g.click(eb),f.click(fb)})}}(jQuery),jQuery.easing.jswing=jQuery.easing.swing,jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return 0==b?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*Math.pow(2,10*(b-1))+c:d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){return(b/=e/2)<1?-d/2*(Math.sqrt(1-b*b)-1)+c:d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c},easeOutElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c},easeInOutElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(2==(b/=e/2))return c+d;if(g||(g=e*.3*1.5),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return 1>b?-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c:.5*h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+d+c},easeInBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c},easeOutBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeInOutBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeInBounce:function(a,b,c,d,e){return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c},easeOutBounce:function(a,b,c,d,e){return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c},easeInOutBounce:function(a,b,c,d,e){return e/2>b?.5*jQuery.easing.easeInBounce(a,2*b,0,d,e)+c:.5*jQuery.easing.easeOutBounce(a,2*b-e,0,d,e)+.5*d+c}});
View Code

xiangce.js代码

  1 $(function() {
  2     jQuery(".guessall").slide({
  3         titCell: ".guess ul",
  4         mainCell: ".guessnews",
  5         autoPage: true,
  6         effect: "left",
  7         autoPlay: false,
  8         vis: 1,
  9         trigger: "click",
 10         delayTime: 2000,
 11         interTime: 3500
 12     });
 13     var firstpic = $(".detail_picbot_mid ul li").first().find("img");
 14     var firstsrc = firstpic.attr("bigimg");
 15     var firsttxt = firstpic.attr("text");
 16     $("#pic1").attr("src", firstsrc);
 17     firstpic.addClass("selectpic");
 18     $(".miaoshu").text(firsttxt);
 19     $("#preArrow").hover(function() {
 20         $("#preArrow_A").css("display", "block")
 21     },
 22     function() {
 23         $("#preArrow_A").css("display", "none")
 24     });
 25     $("#nextArrow").hover(function() {
 26         $("#nextArrow_A").css("display", "block")
 27     },
 28     function() {
 29         $("#nextArrow_A").css("display", "none")
 30     });
 31     function preclick() {
 32         var currrentindex = parseFloat($("#pic1").attr("curindex"));
 33         if (currrentindex != 0) {
 34             var curli = $(".detail_picbot_mid ul li").eq(currrentindex);
 35             var length = $(".detail_picbot_mid ul li").length;
 36             if (currrentindex <= (length - 5)) {
 37                 $(".detail_picbot_mid ul li").eq(currrentindex + 4).css("display", "none");
 38                 $(".detail_picbot_mid ul li").eq(currrentindex - 1).css("width", "94px").css("display", "block")
 39             }
 40             var curnextli = $(".detail_picbot_mid ul li").eq(currrentindex - 1);
 41             var curnextsrc = curnextli.find("img").attr("bigimg");
 42             var curnexttxt = curnextli.find("img").attr("text");
 43             curli.find("img").removeClass("selectpic");
 44             curnextli.find("img").addClass("selectpic");
 45             $("#pic1").attr("src", curnextsrc);
 46             $(".miaoshu").text(curnexttxt);
 47             $("#pic1").attr("curindex", currrentindex - 1)
 48         } else {
 49             $(".bodymodal").css("display", "block");
 50             $(".firsttop").css("display", "block")
 51         }
 52     }
 53     $("#preArrow_B").click(function() {
 54         preclick()
 55     });
 56     $("#preArrow").click(function() {
 57         preclick()
 58     });
 59     $("#nextArrow_B").click(function() {
 60         nextclick()
 61     });
 62     $("#nextArrow").click(function() {
 63         nextclick()
 64     });
 65     function nextclick() {
 66         var currrentindex = parseFloat($("#pic1").attr("curindex"));
 67         var length = $(".detail_picbot_mid ul li").length;
 68         if (currrentindex != (length - 1)) {
 69             var curli = $(".detail_picbot_mid ul li").eq(currrentindex);
 70             if (currrentindex > 3) {
 71                 $(".detail_picbot_mid ul li").eq(currrentindex - 4).css("display", "none");
 72                 $(".detail_picbot_mid ul li").eq(currrentindex + 1).css("width", "94px").css("display", "block")
 73             }
 74             var curnextli = $(".detail_picbot_mid ul li").eq(currrentindex + 1);
 75             var curnextsrc = curnextli.find("img").attr("bigimg");
 76             var curnexttxt = curnextli.find("img").attr("text");
 77             curli.find("img").removeClass("selectpic");
 78             curnextli.find("img").addClass("selectpic");
 79             $("#pic1").attr("src", curnextsrc);
 80             $("#pic1").attr("curindex", currrentindex + 1);
 81             $(".miaoshu").text(curnexttxt)
 82         } else {
 83             $(".bodymodal").css("display", "block");
 84             $(".endtop").css("display", "block")
 85         }
 86     }
 87     $(".detail_picbot_mid ul li").click(function() {
 88         var currentliindex = $(this).index(".detail_picbot_mid ul li");
 89         $(".detail_picbot_mid ul li img[class='selectpic']").removeClass("selectpic");
 90         var currentli = $(".detail_picbot_mid ul li").eq(currentliindex);
 91         currentli.find("img").addClass("selectpic");
 92         var bigimgsrc = currentli.find("img").attr("bigimg");
 93         var curnexttxt = currentli.find("img").attr("text");
 94         $("#pic1").attr("src", bigimgsrc);
 95         $("#pic1").attr("curindex", currentliindex);
 96         $(".miaoshu").text(curnexttxt)
 97     });
 98             /*
 99         代码笔记
100         转载请保留代码笔记链接 - www.198zone.com
101         */
102     setblock();
103     function setblock() {
104         var left = $(window).width() / 2 - 125;
105         $(".firsttop").css("left", left);
106         $(".endtop").css("left", left)
107     }
108     $(window).resize(function() {
109         setblock()
110     });
111     $(".closebtn1").click(function() {
112         $(".firsttop").css("display", "none");
113         $(".bodymodal").css("display", "none")
114     });
115     $(".closebtn2").click(function() {
116         $(".endtop").css("display", "none");
117         $(".bodymodal").css("display", "none")
118     });
119         $(".returnbtn").click(function() {
120         $(".firsttop").css("display", "none");
121         $(".endtop").css("display", "none");
122         $(".bodymodal").css("display", "none")
123     });
124     //播放到第一张图片时弹出层点击重
125     $(".replaybtn1").click(function() {
126         $(".firsttop").css("display", "none");
127         $(".bodymodal").css("display", "none")
128     });
129     //播放到最后一张图片时弹出层点击重播
130     $(".replaybtn2").click(function() {
131         $(".endtop").css("display", "none");
132         $(".bodymodal").css("display", "none");
133         $(".detail_picbot_mid ul li img[class='selectpic']").removeClass("selectpic");
134         $(".detail_picbot_mid ul li").eq(0).find("img").addClass("selectpic");
135         var bigimgsrc = $(".detail_picbot_mid ul li").eq(0).find("img").attr("bigimg");
136         $("#pic1").attr("src", bigimgsrc);
137         $("#pic1").attr("curindex", 0)
138     })
139 });
140 
141 function RefreshDiv()
142 {
143         $(function() {
144     jQuery(".guessall").slide({
145         titCell: ".guess ul",
146         mainCell: ".guessnews",
147         autoPage: true,
148         effect: "left",
149         autoPlay: false,
150         vis: 1,
151         trigger: "click",
152         delayTime: 2000,
153         interTime: 3500
154     });
155     var firstpic = $(".detail_picbot_mid ul li").first().find("img");
156     var firstsrc = firstpic.attr("bigimg");
157     var firsttxt = firstpic.attr("text");
158     $("#pic1").attr("src", firstsrc);
159     firstpic.addClass("selectpic");
160     $(".miaoshu").text(firsttxt);
161     $("#preArrow").hover(function() {
162         $("#preArrow_A").css("display", "block")
163     },
164     function() {
165         $("#preArrow_A").css("display", "none")
166     });
167     $("#nextArrow").hover(function() {
168         $("#nextArrow_A").css("display", "block")
169     },
170     function() {
171         $("#nextArrow_A").css("display", "none")
172     });
173     function preclick() {
174         var currrentindex = parseFloat($("#pic1").attr("curindex"));
175         if (currrentindex != 0) {
176             var curli = $(".detail_picbot_mid ul li").eq(currrentindex);
177             var length = $(".detail_picbot_mid ul li").length;
178             if (currrentindex <= (length - 5)) {
179                 $(".detail_picbot_mid ul li").eq(currrentindex + 4).css("display", "none");
180                 $(".detail_picbot_mid ul li").eq(currrentindex - 1).css("width", "94px").css("display", "block")
181             }
182             var curnextli = $(".detail_picbot_mid ul li").eq(currrentindex - 1);
183             var curnextsrc = curnextli.find("img").attr("bigimg");
184             var curnexttxt = curnextli.find("img").attr("text");
185             curli.find("img").removeClass("selectpic");
186             curnextli.find("img").addClass("selectpic");
187             $("#pic1").attr("src", curnextsrc);
188             $(".miaoshu").text(curnexttxt);
189             $("#pic1").attr("curindex", currrentindex - 1)
190         } else {
191             $(".bodymodal").css("display", "block");
192             $(".firsttop").css("display", "block")
193         }
194     }
195     $("#preArrow_B").click(function() {
196         preclick()
197     });
198     $("#preArrow").click(function() {
199         preclick()
200     });
201     $("#nextArrow_B").click(function() {
202         nextclick()
203     });
204     $("#nextArrow").click(function() {
205         nextclick()
206     });
207     function nextclick() {
208         var currrentindex = parseFloat($("#pic1").attr("curindex"));
209         var length = $(".detail_picbot_mid ul li").length;
210         if (currrentindex != (length - 1)) {
211             var curli = $(".detail_picbot_mid ul li").eq(currrentindex);
212             if (currrentindex > 3) {
213                 $(".detail_picbot_mid ul li").eq(currrentindex - 4).css("display", "none");
214                 $(".detail_picbot_mid ul li").eq(currrentindex + 1).css("width", "94px").css("display", "block")
215             }
216             var curnextli = $(".detail_picbot_mid ul li").eq(currrentindex + 1);
217             var curnextsrc = curnextli.find("img").attr("bigimg");
218             var curnexttxt = curnextli.find("img").attr("text");
219             curli.find("img").removeClass("selectpic");
220             curnextli.find("img").addClass("selectpic");
221             $("#pic1").attr("src", curnextsrc);
222             $("#pic1").attr("curindex", currrentindex + 1);
223             $(".miaoshu").text(curnexttxt)
224         } else {
225             $(".bodymodal").css("display", "block");
226             $(".endtop").css("display", "block")
227         }
228     }
229     $(".detail_picbot_mid ul li").click(function() {
230         var currentliindex = $(this).index(".detail_picbot_mid ul li");
231         $(".detail_picbot_mid ul li img[class='selectpic']").removeClass("selectpic");
232         var currentli = $(".detail_picbot_mid ul li").eq(currentliindex);
233         currentli.find("img").addClass("selectpic");
234         var bigimgsrc = currentli.find("img").attr("bigimg");
235         var curnexttxt = currentli.find("img").attr("text");
236         $("#pic1").attr("src", bigimgsrc);
237         $("#pic1").attr("curindex", currentliindex);
238         $(".miaoshu").text(curnexttxt)
239     });
240             /*
241         代码笔记
242         转载请保留代码笔记链接 - www.198zone.com
243         */
244     setblock();
245     function setblock() {
246         var left = $(window).width() / 2 - 125;
247         $(".firsttop").css("left", left);
248         $(".endtop").css("left", left)
249     }
250     $(window).resize(function() {
251         setblock()
252     });
253     $(".closebtn1").click(function() {
254         $(".firsttop").css("display", "none");
255         $(".bodymodal").css("display", "none")
256     });
257     $(".closebtn2").click(function() {
258         $(".endtop").css("display", "none");
259         $(".bodymodal").css("display", "none")
260     });
261         $(".returnbtn").click(function() {
262         $(".firsttop").css("display", "none");
263         $(".endtop").css("display", "none");
264         $(".bodymodal").css("display", "none")
265     });
266     //播放到第一张图片时弹出层点击重
267     $(".replaybtn1").click(function() {
268         $(".firsttop").css("display", "none");
269         $(".bodymodal").css("display", "none")
270     });
271     //播放到最后一张图片时弹出层点击重播
272     $(".replaybtn2").click(function() {
273         $(".endtop").css("display", "none");
274         $(".bodymodal").css("display", "none");
275         $(".detail_picbot_mid ul li img[class='selectpic']").removeClass("selectpic");
276         $(".detail_picbot_mid ul li").eq(0).find("img").addClass("selectpic");
277         var bigimgsrc = $(".detail_picbot_mid ul li").eq(0).find("img").attr("bigimg");
278         $("#pic1").attr("src", bigimgsrc);
279         $("#pic1").attr("curindex", 0)
280     })
281 });
282 
283 }
View Code

页面代码

 1 <div id='<%# Eval("EXAM_KEY") %>' style="display:none; ">
 2                             <div id="Closecampic" style=" float:right;" title="关闭" onclick='javascript:CloseCam($(this).parent().attr("id"))'><img alt="关闭" src="../App_Common/xiangce/images/close.jpg" /></div>
 3                               <!--图片轮换开始-->
 4   <div class="bodymodal"> </div>
 5   <div class="firsttop">
 6     <div class="firsttop_right">
 7       <div class="close2"> <a class="closebtn1" title="关闭" href="javascript:void(0)"></a> </div>
 8       <div class="replay">
 9         <h2 id="div-end-h2">  已到第一张图片了。</h2>
10         <p> <a  class="replaybtn1" href="javascript:void(0);">重新播放</a> </p>
11       </div>
12       <div class="pictwo">
13         <ul>
14        <li></li><li></li>
15         </ul>
16       </div>
17       <div class="returnbtn"> <a  href="javascript:void(0);">关闭当前</a> </div>
18     </div>
19   </div>
20   <!--图片结束出现的-->
21   <div class="endtop">
22     <div class="firsttop_right">
23       <div class="close2"> <a class="closebtn2" title="关闭" href="javascript:void(0)"></a> </div>
24       <div class="replay">
25         <h2 id="H1">已到最后一张图片了。</h2>
26         <p> <a  class="replaybtn2" href="javascript:void(0);">重新播放</a> </p>
27       </div>
28       <div class="pictwo">
29         <ul>
30          <li></li><li></li>
31         </ul>
32       </div>
33       <div class="returnbtn"> <a  href="javascript:void(0);" >关闭当前</a> </div>
34     </div>
35   </div>
36     <!--轮播过程-->
37   <div class="detail_context_pic">
38     <div class="detail_context_pic_top"> <a href="#"><img src="" alt="" id="pic1" curindex="0" /></a> <a id="preArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="preArrow_A"></span></a> <a id="nextArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="nextArrow_A"></span></a>
39       <div id="miaoshuwarp">
40         <div class="miaoshu"> </div>
41       </div>
42     </div>
43     <!--图片轮播-->
44     <div class="detail_context_pic_bot">
45       <div class="detail_picbot_left"> <a href="javascript:void(0)" id="preArrow_B"><img src="../App_Common/xiangce/images/left1.jpg" alt="上一个" /></a> </div>
46       <div class="detail_picbot_mid">
47         <ul>
48            <asp:Repeater ID="camview" runat="server"><ItemTemplate>  
49           <li> <a href='javascript:void(0);'> <img src='<%# Eval("CAMPICURL") %>' width='90px' height='80px' title='<%# Eval("CAMPICTitle") %> ' bigimg='<%# Eval("CAMPICURL") %>' text='<%# Eval("CONTENT") %>' /> </a> </li>
50          </ItemTemplate></asp:Repeater> 
51         </ul>
52       </div>
53       <div class="detail_picbot_right"> <a href="javascript:void(0)" id="nextArrow_B"><img src="../App_Common/xiangce/images/right1.jpg" alt="下一个" /></a> </div>
54     </div>
55   </div>
56 <!--图片轮换结束-->
57                             </div>
View Code

images图片也附上方便使用

close.jpgleft1.jpgpic_left.pngpic_right.pngreplay.pngright1.jpg

 

posted on 2015-07-20 16:48  loyung  阅读(10625)  评论(8)  编辑  收藏  举报