jsp图片滚动和闪动

来源：互联网发布：114域名批量查询工具编辑：程序博客网时间：2024/04/28 22:54

jsp图片滚动

<%@ page language="java" import="java.util.*" pageEncoding="BIG5"%><%@ page import="java.io.*" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'moveImg.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> </head> <body> <table width="700" border="0"> <tr><td height="190" valign="top"> <table width="100%" border="0" height="100%"><tr> <td height="140" valign="top"><DIV id=demo style="OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 133px"><DIV id=demo1 style="WIDTH: 200px"> <table width="50%" border="0"><tr> <% String smallpath = ""; for(int i=1;i<4;i++) {smallpath = "/JavaWeb/image/"+Integer.toString(i)+".jpg"; %><td> <a href="" rel="gb_imageset[nice_pics]" title="<%=Integer.toString(i)+".jpg" %>"> <img src="<%=smallpath %>" width="190" height="133" style="cursor: hand"> </a></td> <% } %> </tr> </table> </DIV> <DIV id=demo2></DIV> </DIV><SCRIPT>var speed=30;var rol = "right";demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(rol=="right"){demo.scrollLeft++;if(demo.scrollWidth - demo.scrollLeft <= demo.offsetWidth){rol="left";}}else{demo.scrollLeft--;if(demo.scrollLeft==0){rol="right";}}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</SCRIPT> </td></tr></table></td></tr></table> </body></html>

jsp图片闪动

<%@ page contentType="text/html;charset=UTF-8" language="java"%> <html><head><title></title><mce:style type="text/css" media="all"></mce:style><style type="text/css" media="all" mce_bogus="1">body{font-family:verdana;font-size:80%;}#imageSlideshowHolder{width: 205px;/* IE 5.x */width/* */:/**/205px;/* Other browsers */width: /**/205px;/* CSS HACK */height: 142px;/* IE 5.x */height/* */:/**/140px;/* Other browsers */height: /**/140px;background-color:#FFF;border:1px solid #CCCCCC;position:relative;/* Never change this value */}.imageInGallery{width:700px;height:140px;background-color:#FFF;/* Never change these 3 value */left:0px;top:0px;position:absolute;}#imageSlideshowHolder img{position:absolute;}/*chris - description overlay*/#the_captions{display:none;}.imageInGallery_DESC{position:absolute;color:#FFFFFF;padding:30px;padding-top:15px;margin-left:30px;margin-top:5px;z-index:100;/*height:200px;*/width:290px;background:url("images/bg.png");font-size:80%;}.imageInGallery_DESC h1{color:#99cc33;font-size:140%;margin:0px;padding:0px 0px 2px 0px;}</style><SCRIPT type="text/javascript" src="/JavaWeb/JS/slideshow_with_captions.js" mce_src="JavaWeb/JS/slideshow_with_captions.js"></SCRIPT></head><body><div id="imageSlideshowHolder"><img src="/JavaWeb/image/1.jpg" mce_src="JavaWeb/image/1.jpg" title=""><img src="/JavaWeb/image/2.jpg" mce_src="JavaWeb/image/2.jpg" title=""><img src="/JavaWeb/image/3.jpg" mce_src="JavaWeb/image/3.jpg" title=""></div><div id="the_captions"><div><h1></h1><br><br><small></small></div><div><h1></h1></div><div><h1></h1></div><div><h1></h1></div><div><h1></h1></div><div><h1></h1></div></div><SCRIPT type="text/javascript"> initImageGallery();</SCRIPT></body></html>

slideshow_with_captions.js