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>
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>
后台处理代码：解析页面传递的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{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;}
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}});
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