很实用的图片从右到左滚动的jsp代码_图片滚动jsp资源-CSDN文库

共1个文件

jsp：1个

5星 · 超过95%的资源需积分: 31 105 浏览量 2008-10-10 10:01:41 上传评论收藏 2KB RAR 举报

在IT行业中，网页动态效果的实现是网页设计和开发中的重要环节，这使得用户体验更加丰富和生动。"图片从右到左滚动的jsp代码"是一个常见的网页特效，它主要用于展示一组图片，通过从右到左的平滑滚动，形成一种视觉上的连续流动感，常用于新闻轮播、产品展示等场景。 JSP（JavaServer Pages）是Java平台上的一个服务器端脚本语言，用于创建动态Web页面。在这个场景下，JSP被用来生成HTML代码，其中包含实现图片滚动效果的JavaScript或CSS代码。实现这个效果通常会涉及到以下几个技术点： 1. **HTML结构**：你需要创建一个包含图片的HTML结构，每个图片元素可能被包裹在一个`<div>`或者`<li>`标签中，以便于CSS控制。 2. **CSS样式**：CSS用于定义图片容器的宽度、高度、溢出隐藏等属性，以及图片的初始位置和动画效果。例如，可以设置一个负的`margin-left`值，并随着时间的推移逐渐减少，使图片看起来像是从右侧滚入。 ```css .container { width: 100%; overflow: hidden; } .scroll { position: relative; animation: scroll-right 5s infinite; /* 动画名称和持续时间 */ } @keyframes scroll-right { from { margin-left: -100%; } /* 图片初始位置，超出容器左侧 */ to { margin-left: 0%; } /* 图片最终位置，完全显示在容器内 */ } ``` 3. **JavaScript/jQuery控制**：如果你希望添加更复杂的功能，如暂停、播放、导航箭头等，可以使用JavaScript或jQuery来控制动画。例如，通过监听按钮点击事件，可以改变`margin-left`值或者启动/停止动画。 ```javascript $(document).ready(function() { var scrollSpeed = 500; // 每秒移动像素数 var movingRight = true; function scrollImages() { if (movingRight) { $('.scroll').animate({ marginLeft: '-=100px' }, scrollSpeed); } else { $('.scroll').animate({ marginLeft: '+=100px' }, scrollSpeed); } } // 开始滚动 scrollImages(); // 添加暂停和继续功能 $('#pause').click(function() { movingRight = !movingRight; if (movingRight) { $(this).text('暂停'); } else { $(this).text('继续'); } }); }); ``` 4. **ProList.jsp**：根据提供的文件名，这个JSP文件可能是整个滚动效果的主页面，包含了HTML、CSS和JavaScript代码，或者它可能负责从数据库或其他数据源获取图片数据，并动态生成图片列表。 "图片从右到左滚动的jsp代码"涉及了HTML布局、CSS动画和JavaScript/jQuery交互等技术，是Web开发中常见的动态效果实现方式。在实际应用中，开发者可以根据需求进行定制，例如调整滚动速度、添加过渡效果、设置自动切换间隔等，以达到理想的效果。

资源推荐

资源详情

资源评论

收起资源包目录

ProList.rar （1个子文件）

ProList.jsp 4KB

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*,java.io.*,java.text.*"%> <%@ include file="DataBase.jsp"%>  <html> <head> <link href="css.css" rel="stylesheet" type="text/css"> <title>无标题文档</title> </head> <body> <% int New_img=10; String sql="select top " + New_img + " * from farmerProperty where type='销售站点项目' order by date1 desc"; ResultSet rs=stmt.executeQuery(sql); %> <div align='center' id='demo' style='overflow:hidden;height:190px;width:716px;'>  <table align='center' cellpadding='0' cellspace='0' border='0'> <tr> <td id='demo1' valign='top'><table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'> <tr valign='top'> <% while(rs.next()){ String title=rs.getString("title"); String filename=rs.getString("productImg"); if(title.length()>13){ String title1=title.substring(0,13); title=title1; } //String[] extName=filename.split("."); //String filename=filename.substring(start,end);//取文件名 String fileExt=(filename.substring(filename.indexOf(".")+1,filename.length())).toLowerCase();//取扩展名 %> <td align='center'><table width=100% border=1 align=center cellpadding=0 cellspacing=0> <tr> <td valign=top width=8></td> <td background=images/bg_01.gif></td> <td valign=top width=7></td> </tr> <tr> <td align="center" bgcolor="#E9E9E9"><a href='xm_open5.jsp?pro_id=<%=rs.getString("pro_id")%>' target=_blank title='<%=title%>'> <%if (fileExt.equals("jpg") || fileExt.equals("bmp") || fileExt.equals("png") || fileExt.equals("gif")) {%> <img border="0" src="<%if (filename==null && filename.equals("")) {%>UploadFile/productImg/nopic.gif<%}else{%><%=filename%><%}%>" width="160" height="150" alt="<%=title%>" /> <%}else{ if (fileExt.equals("swf")){%> <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='160' height='120'> <param name=movie value='<%=filename%>' /> <param name=quality value=high /> <param name='Play' value='-1' /> <param name='Loop' value='0' /> <param name='Menu' value='-1' /> <param name='wmode' value='transparent' /> <embed src='<%=filename%>' width='160' height='120' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash'></embed> </object> <%} }%> </a> </td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td height="20" colspan="5"><a href='xm_open5.jsp?pro_id=<%=rs.getString("pro_id")%>' target=_blank title='<%=title%>'><%=title%></a></td> </tr> </table></td> <% } %> </tr> </table></td> <td id=demo2 valign=top></td> </tr> </table> </div> <%if (New_img>5) {%> <script> var Picspeed=15 demo2.innerHTML=demo1.innerHTML function Marquee1(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar1=setInterval(Marquee1,Picspeed) demo.onmouseover=function() {clearInterval(MyMar1)} demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)} </script> <%} else{ out.print("暂无最新图文"); } rs.close(); stmt.close(); conn.close(); %>

评论收藏

内容反馈