アプリ版：「スタンプのみでお礼する」機能のリリースについて

javaスクリプトでリンク付のスクロールテキストを作成したいのですが、

締切済

  • 質問者：yotuyasan
  • 質問日時：
  • 回答数：4件

javaスクリプトでリンク付のスクロールテキストを作成したいのですが、困っております。
参考サイトを探し、下記の状態まで作成しております。
<html>
<head>

<script language="JavaScript">
<!-----
var msg = "テキスト";
msg = msg + "　　　　　";
msg = msg + "テキス2";
msg = msg + "　　　　　";
var speed = 200;

function textDisp(){
msg = msg.substring(1,msg.length) + msg.substring(0,1);
document.form1.text1.value = msg;
setTimeout("textDisp()",speed);
}

var winTarget = "_self";
var url = "http://www.yahoo.co.jp/";

function textlink(){

open(url, winTarget);
}
//----->
</script>

</head>
<body bgcolor="white" onLoad="textDisp();">

<form name="form1">
<input type="text" name="text1" size="60" onclick="textlink();" style="cursor:hand;border:none;color:#ff3399;" onMouseover="this.style.color='#ffcc00'" onMouseout="this.style.color='#ff3399'">
</form>

</body>
</html>

表示時に”テキスト”と”テキスト2”を独立してそれぞれ、違うリンク先に飛ばすには
どのようにすればよろしいでしょうか？
また、空白をのぞき、リンク部分だけに下線をつけたいです。
CSSで指定をすると文字から空白まですべてに下線が付いてしまいます。

説明が悪いかもしれませんが、もしお分かりになる方おられましたら、参考サイトでも
かまいませんのでお教えいただけますと幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4

  • 回答者： babu_baboo
  • 回答日時：

す。



#3です。
とうこうもじすうがすくないので、みじかくしてみました。^^;


function a(b,c,d,e){
var f=[],g=0,h='offsetWidth',i='px',j='style',k='nodeType',x,y,z;with(b[j])overflow='hidden',position='relative',width=c+i,height='1.3em';
for(x=0;z=b.childNodes[x++];)if(z[k]==1){with(z[j])position='absolute',top=0+i,left=g+i;g+=d+z[h];f.push(z)}
(function l(){for(x=0;z=f[x++];)if(1==z[k]){y=z.offsetLeft-e;z[j].left=(0<e?(y+z[h]<0?y+=g:y):(b[h]<y?y-=g:y))+i}setTimeout(l,30);})()
}

a( document.getElementById( 'hoge2' ), 150, 16, -2 );
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： babu_baboo
  • 回答日時：

fさんとyさんがかくなら、ばぶぅ～も！ということでかいてみました。


ぜんかくくうはくは、はんかくにしてください。
もじすうせいげんで、なまえをかしらもじしか、かけなかったことを、こころからおわびしま

<!DOCTYPE html>
<title></title>
<body>

<div id="hoge2">
<a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a>
<a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a>
</div>

<div id="hoge1">
<a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a>
<a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a>
</div>

<div id="fuga1">
<a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a>
<a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a>
</div>

<div id="fuga2">
<a href="http://www.yahoo.co.jp/">abcdefgihjklmnop</a>
<a href="http://www.google.co.jp/">ABCDEFGHIJKLMNOPQR</a>
</div>

<script><!--

var oneLineScroller = function ( node, width, space, speed ) {
　var style = node.style;
　var i, n, wmax = 0;
　
　style.overflow = 'hidden';
　style.position = 'relative';
　style.width　　= width + 'px'
　style.height　 = '1.3em';

　
　for( i = 0; n = node.childNodes[i++];　)
　　if( 1 == n.nodeType ) {
　　　style = n.style;
　　　style.position = 'absolute';
　　　style.top = '0px';
　　　style.left = wmax + 'px';
　　　wmax += space + n.offsetWidth ;
　　}
　
　(function ( ) {
　　for(var i = 0, n, j; n = node.childNodes[i++];　)
　　　if( 1 == n.nodeType ) {
　　　　j = n.offsetLeft - speed;

　　　　if( 0 < speed ) {
　　　　　if( j + n.offsetWidth < 0)
　　　　　　j += wmax;
　　　　} else {
　　　　　if( node.offsetWidth < j)
　　　　　　j -= wmax;
　　　　}
　　　　n.style.left = j + 'px';
　　　}
　　setTimeout( arguments.callee, 30 );
　})()
};

oneLineScroller( document.getElementById( 'hoge2' ), 150, 16, -2 );
oneLineScroller( document.getElementById( 'hoge1' ), 150, 32, -1 );
oneLineScroller( document.getElementById( 'fuga1' ), 150, 32, 1 );
oneLineScroller( document.getElementById( 'fuga2' ), 150, 32, 2 );

//-->
</script>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

これくらいなら、マーキー　でスクロール


（ブラウザーがサポートしてる限りはつかっちゃえ！）
<style type="text/css">
marquee a{color:#ff3399;text-decoration:none;}
marquee a:hover{color:#ffcc00}
</style>
</head>
<body bgcolor="white">
<div style='height:2em;width:80px;cursor:hand;border:none;'>
<marquee>
<span>　</span>
<a href='http://www.yahoo.co.jp/'>　Yahoo!　</a>
<span>　</span>
<a href='http://www.google.co.jp/'>　Google!　</a>
</marquee>
<div>
</body>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

テキストのスクロールって好きになれませんけれど…



リンクは通常のリンクタグの機能で、ロールオーバーはCSSで行い、スクロールのみスクリプトにしています。
ご参考まで。（スクロールのストップ機能なしです）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
div#scroll { position:relative; width:15em; height:1.2em; overflow:hidden; }
div#scroll div { position:absolute; white-space:nowrap; }
div#scroll a { text-decoration:none; color:#f39; display:inlin-block; padding-right:2em; }
div#scroll a:hover { color:#fc0; }
</style>
</head>
<body>
<div id="scroll">
<div>
<a href="http://www.yahoo.co.jp/">text1(Yahoo)</a>
<a href="http://www.google.co.jp/">text2(Google)</a>
</div>
</div>

<script type="text/javascript">
<!--
(function() {
var scroll = document.getElementById("scroll");
var d, c, i, n, max = 0, tid;
if (!scroll) return;
d = scroll.firstChild;
while (d && d.nodeName != "DIV") d = d.nextSibling;
if (!d) return;
c = scroll.style, n = c.width, c.width = "auto";
max = d.scrollWidth, c.width = n;
c = d.childNodes, n = c.length;
for (i=0; i<n; i++) d.appendChild(c[i].cloneNode(true));
d.style.width = (max * 2) + "px";

n = 0;
(function R(){
n = (n - 2) % max, d.style.left = n + "px";
tid = setTimeout(R, 50);
})();
})();
//-->
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報