求一前台页类似Marquee效果的功能实现,该如何处理
日期：2014-05-18 浏览次数：20437 次
求一前台页类似Marquee效果的功能实现
如题，现在很多网站的首页面都有这种功能的实现，页面上有多个图片及相关文字根据程序的设定进行移动。希望各位达人帮帮忙，给些资源，实现起来越简单越好。我想应该是用js来实现的吧。
在线等。谢谢
------解决方案--------------------
如题，现在很多网站的首页面都有这种功能的实现，页面上有多个图片及相关文字根据程序的设定进行移动。希望各位达人帮帮忙，给些资源，实现起来越简单越好。我想应该是用js来实现的吧。
在线等。谢谢
------解决方案--------------------
- HTML code
<!-- saved from url=file://C:/Documents and Settings/yfq/桌面/鼠标悬停并放大图片.html -->
<script>
window.onerror = new Function("return(false);")
</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>WebForm1</TITLE>
<SCRIPT type=text/javascript>
var interval=1;
function changeBoxMarginLeft(v,val){
if(v.style.marginLeft == ""){
v.style.marginLeft = "0px";
}
var current = Number(v.style.marginLeft.substr(0,v.style.marginLeft.indexOf("p")));
v.style.marginLeft = Number(current + val) + "px";
}
function changeBoxMarginTop(v,val){
if(v.style.marginTop == ""){
v.style.marginTop = "0px";
}
var current = Number(v.style.marginTop.substr(0,v.style.marginTop.indexOf("p")));
v.style.marginTop = Number(current + val) + "px";
}
function over(v){
var maxWidth = 200;
if(v.interval != undefined){
clearInterval(v.interval);
}
v.intervalID = setInterval(function(){
if(v.width < maxWidth) {
v.width = v.width + 10;
topchange = v.width * 3/4 - v.height;
v.height = v.width * 3/4;
changeBoxMarginLeft(v,-5);
changeBoxMarginTop(v,-topchange/2);
}
else{
clearInterval(v.intervalID);
}
},interval);
}
function out(v){
var minWidth = 100;
clearInterval(v.intervalID);
v.interval = setInterval(function(){
if(v.width > minWidth) {
v.width = v.width - 10 ;
v.height = v.width * 3/4;
changeBoxMarginLeft(v,5);
changeBoxMarginTop(v,topchange/2)
}
else{
clearInterval(v.interval);
}
},interval);
}
</SCRIPT>
</HEAD>
<BODY><!--StartFragment--><FORM id=Form1>
<MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=5
scrollDelay=80><IMG onmouseover=over(this)
style="MARGIN-TOP: 9px; MARGIN-LEFT: 0px" onmouseout=out(this) height=75
src="200653120441701029.jpg" width=100
intervalID="30690093" interval="30690094"> <IMG onmouseover=over(this)
style="MARGIN-TOP: 9px; MARGIN-LEFT: 0px" onmouseout=out(this) height=75
src="200653120441701029.jpg" width=100
intervalID="30690091" interval="30690092"></MARQUEE></FORM><!--EndFragment--></BODY>
</HTML>
------解决方案--------------------
jQuery animate
------解决方案--------------------
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net</title&g
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
