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({
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; 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; 50px;">
隐藏画面</div>
</div>
webcam参数说明：
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 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; 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; 50px;"> 65 隐藏画面</div> 66 </div>
后台处理代码：解析页面传递的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 }
到此拍摄的画面就完整保存下来了，可根据调用拍照频率实现监控画面密度。
另附一段代码使用轮播相册，提取监控画面。
样式代码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{680px;margin-top:20px;margin-bottom:20px;overflow:hidden;} 17 .detail_context_pic_top{680px;overflow:hidden;text-align:center;position:relative;z-index:1;} 18 .detail_context_pic_bot{680px;height:107px;overflow:hidden;margin-top:20px;} 19 .detail_picbot_left{float:left;30px;height:107px;overflow:hidden;} 20 .detail_picbot_left a{display:block;30px;height:107px;} 21 .detail_picbot_mid{float:left;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;620px;overflow:hidden;position:relative;} 23 .detail_picbot_mid ul li{float:left;height:84px;margin-left:25px;display:inline;94px;text-align:center;overflow:hidden;position:relative;} 24 .detail_picbot_mid ul li img{height:76px;max-90px;} 25 #pic1{max-680px;} 26 .selectpic{border:2px solid red;} 27 .detail_picbot_right{float:left;30px;height:107px;overflow:hidden;} 28 .detail_picbot_right a{display:block;30px;height:107px;} 29 #preArrow{left:0px;} 30 #nextArrow{right:0px;} 31 .contextDiv{cursor:pointer;height:100%;50%;position:absolute;top:0px;z-index:5;background:url("blank") repeat;} 32 .contextDiv span{position:absolute;top:50%;margin-top:-25px;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;680px;text-align:left;} 36 .miaoshu{position:absolute;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{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{250px;height:250px;margin-right:30px;overflow:hidden;float:left;} 39 .firsttop_right{float:left;250px;overflow:hidden;} 40 .close2{height:17px;} 41 .close2 a{background:url('images/close.jpg') 0px 0px no-repeat;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{270px;height:88px;overflow:hidden;margin-top:20px;} 48 .pictwo ul li{120px;height:88px;float:left;margin-right:15px;position:relative;overflow:hidden;} 49 .pictwo ul li img{120px;height:88px;} 50 .imgdivtext{position:absolute;bottom:0px;height:25px;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{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{250px;padding:20px;background:#1C1C1C;position:fixed;top:100px;left:0px;z-index:1200;color:White;display:none;} 57 .endtop{250px;padding:20px;background:#1C1C1C;position:fixed;top:100px;left:0px;z-index:1200;color:White;display:none;}
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",D,height:C}).children().css({position:"absolute",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; '+u*D+'px"></div>').css({m*D,left:-(p*t)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0"}).children().css({"float":"left",E});break;case"leftLoop":case"leftMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; '+u*D+'px"></div>').css({(m+u+P)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(P+p*t)*D}).children().css({"float":"left",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}});
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 }
页面代码
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>
images图片也附上方便使用
close.jpg
left1.jpg
pic_left.png
pic_right.png
replay.png
right1.jpg