制作方法:
在页面<body>~</body>相关位置加入代码:
<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="scrollimg-pic.htm" width="100%"></iframe>
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="make-scroll.htm" width=0></iframe>
新建scrollimg-pic.htm页面,插入相同大小的图片若干张。为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次。类似于 scrollimg-pic.htm 文件。
在每一张的图片上,添加特效:
停顿效果代码:onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果:style="cursor:hand
都添加至<img src="XXX.jpg">。
也可以加入图片的超级链接!
再新建make-scroll.htm页面文件,该文件为控制图片滚动的页面。在<head>~</head>中,加入代码:
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;function scrollit(destination) {
step = 2;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}
// top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x<1) { parent.frames[0].scroll(1,0); x=1 }
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {
parent.frames[0].scroll(x,0);
x = x + 1;
setTimeout('scrollnow()', 8);
}
else if (x < 0) {
x = limdex;
scrollnow();
}
else {
x=0;
scrollnow();
}
}}// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}
}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
if (on){ on = false;}else { on = true;scrollnow();}
}scrollnow();//***********************************//--></SCRIPT>
注意,代码中:var limdex=600; 数字的取值计算为:单张图片的宽度像素 * 使用图片张数
以我们的滚动效果来计算,使用的单张图片宽度为120px,共使用5张,所以var limdex的数字值为600。
连续滚动的图片的特效就制作完成了!
在页面<body>~</body>相关位置加入代码:
<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="scrollimg-pic.htm" width="100%"></iframe>
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="make-scroll.htm" width=0></iframe>
新建scrollimg-pic.htm页面,插入相同大小的图片若干张。为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次。类似于 scrollimg-pic.htm 文件。
在每一张的图片上,添加特效:
停顿效果代码:onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果:style="cursor:hand
都添加至<img src="XXX.jpg">。
也可以加入图片的超级链接!
再新建make-scroll.htm页面文件,该文件为控制图片滚动的页面。在<head>~</head>中,加入代码:
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;function scrollit(destination) {
step = 2;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}
// top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x<1) { parent.frames[0].scroll(1,0); x=1 }
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {
parent.frames[0].scroll(x,0);
x = x + 1;
setTimeout('scrollnow()', 8);
}
else if (x < 0) {
x = limdex;
scrollnow();
}
else {
x=0;
scrollnow();
}
}}// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}
}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
if (on){ on = false;}else { on = true;scrollnow();}
}scrollnow();//***********************************//--></SCRIPT>
注意,代码中:var limdex=600; 数字的取值计算为:单张图片的宽度像素 * 使用图片张数
以我们的滚动效果来计算,使用的单张图片宽度为120px,共使用5张,所以var limdex的数字值为600。
连续滚动的图片的特效就制作完成了!
运行,看下状态栏变化,哪些变量值不符合判断条件。
自己调下就知道了,祝你好运。
function left(obj)//触发事件,obj为后台传来的参数
{
setInterval(function(){roll(obj);},30);
}function roll(obj)
{
debugger
if((typeof(obj) != "undefined"))
{
var s = obj;
var demo = document.getElementById("demo"+s);
var demo1 = document.getElementById("demo1"+s);
var demo2 = document.getElementById("demo2"+s);
demo2.innerHTML=demo1.innerHTML;
Marquee(demo,demo1,demo2);//这里的demo,demo1,demo2都可以取到
}
}function Marquee(demo,demo1,demo2)
{
debugger //只要触发事件,就会无限进入这个方法,不知道什么原因!!
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft-=demo1.offsetWidth
}
else
{
demo.scrollLeft++;//这里赋值不起作用,demo.scrollLeft始终为0!!!
}
}
==============================================
结果是0|0, 郁闷两天了!~~
http://www.jxxg.com/blog/dh20156_369/article.asp?id=5
你用的是setInterval,这个是循环触发,改用延时触发setTimeout
demo.scrollLeft++;//
scrollLeft:This property is always 0 for objects that do not have scroll bars//
没有滚动条这个值始终是0
先谢谢你!
“你把图片镶嵌到span里试试”
==================================
还是0,是不是我把div的宽度或者其他宽度的时候设置的不恰当呢,有这个可能吗?
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1">
<span id="mqdemo" class="mqdemo">
<a href="javascript:alert('1')">月圆之夜</a>
<a href="javascript:alert('2')">紫禁之颠</a>
<a href="javascript:alert('3')">西门吹雪</a>
<a href="javascript:alert('4')">天外飞仙</a>
</span>
</div>
<script language="javascript">
var speed = 90;
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象
var oMarquee = document.getElementById("mq");
//内容对象
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){
var o = omqdemo.cloneNode(true);
oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
oMarquee.scrollLeft += iScrollAmount;
var ol = oMarquee.scrollLeft;
//IE和FF的位置有不同
if(isMSIE){
if(odl-ol<=0){
oMarquee.scrollLeft = 0;
}
}else{
if(odl-ol<=-10){
oMarquee.scrollLeft = 2;
}
}
}
var MyMar = window.setInterval(scroll,speed);
a {font-size:12px;}
.dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;}
.mqdemo {margin:0px;padding:0px;border:0px;}
</style>
for (int i = 0; i < rowN; i++)
{
s.Append("<table border=\"0\" cellpadding=\"0\" cellspace=\"0\" width=\"100%\"><tr>");
s.Append("<td valign=\"middle\" runat=\"server\" id=\"left11\" height=\"25\" width=\"10px\"><img id=\"ip1\" onmouseout=\"javascript:left1(" + i.ToString() + ");\" onmouseover=\"javascript:left(" + i.ToString() + ");\" src=\"images/result/arrow_left.gif\" runat=\"server\" style=\"cursor: hand\"></td>");
s.Append("<td align=\"left\" valign=\"middle\" style=\"width: 520px\"><div id=\"demo" + i.ToString() + "\" style=\"overflow: hidden; height: 25px; width: 520px;\"><table border=\"0\" cellpadding=\"0\" cellspace=\"0\"><tr><td id=\"demo1" + i.ToString() + "\" valign=\"top\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" height=\"24\"><tr><td>");
s.Append("<span>");
s.Append("<img/><img/><img/>");
s.Append("</span>");
s.Append("</td></tr></table></td><td id=\"demo2" + i.ToString() + "\" valign=\"top\" runat=\"server\"></td></tr></table></div></td>");
s.Append("<td valign=\"middle\" runat=\"server\" id=\"right11\" height=\"25\" width=\"10px\"><img id=\"ip2\" onmouseout=\"javascript:right1(" + i.ToString() + ");\" onmouseover=\"javascript:right(" + i.ToString() + ");\" src=\"images/result/arrow_right.gif\" runat=\"server\" style=\"cursor: hand\"></td></tr></table>");
}
JS在上面贴过了
//把I'm a bug 那段替换成图片就行了
s = [];
for (var i = 0; i < 1; i++)
{
s.push("<table border=\"0\" cellpadding=\"0\" cellspace=\"0\" width=\"600px\"><tr>");
s.push("<td align=\"left\" valign=\"middle\" style=\"width: 520px\"><div id=\"demo" + i + "\" style=\"white-space:nowrap;overflow: hidden; height: 25px; width: 500px;background:gray\"><table border=\"0\" cellpadding=\"0\" cellspace=\"0\"><tr><td id=\"demo1" + i + "\" valign=\"top\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" height=\"24\"><tr><td>");
s.push("I am a bugaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
s.push("</td></tr></table></td><td id=\"demo2" + i + "\" valign=\"top\" ></td></tr></table></div></td>");
s.push("<td valign=\"middle\" id=\"right11\" height=\"25\" width=\"10px\"><div id=\"ip2\" onclick=\"javascript:left(" + i + ");\" style=\"background:green\" >a</div></td></tr></table>");
}
document.body.innerHTML = s.join(" ");
function left(obj)//触发事件,obj为后台传来的参数
{
setInterval(function(){roll(obj);},30);
} function roll(obj)
{
//debugger
if((typeof(obj) != "undefined"))
{
var s = obj;
var demo = document.getElementById("demo"+s);
var demo1 = document.getElementById("demo1"+s);
var demo2 = document.getElementById("demo2"+s);
demo2.innerHTML=demo1.innerHTML;
Marquee(demo,demo1,demo2);//这里的demo,demo1,demo2都可以取到
}
} function Marquee(demo,demo1,demo2)
{
//debugger //只要触发事件,就会无限进入这个方法,不知道什么原因!!
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft-=demo1.offsetWidth
}
else
{
demo.scrollLeft++;//这里赋值不起作用,demo.scrollLeft始终为0
}
}
小小的申明一下,holycycle() 贴的那段正是偶写的代码! :)