Linkkarussel
Verfasst: Di 26. Mai 2020, 11:12
Hier der CSS-Abschnitt:
Hier das Script:
Demoseite: https://hapes-javascript-demo-page.hpag ... ussel.html
Code: Alles auswählen
<!-- S-T-A-R-T O-F C-O-D-E F-O-R M-E-S-S-A-G-E C-A-R-O-U-S-E-L -->
<!-- START OF STYLE-CONFIGURATION ZONE -->
<!-- CONFIGURE a.textstyle AND a.textstyle:hover AND a.textstyle:hover -->
<!-- DO NOT CHANGE .boxstyle -->
<style>
a.textstyle {
font-family:Arial;
font-size:10pt;
font-weight:normal;
font-style:normal;
color:blue;
text-decoration:none;
background-color:white;
padding:4px;
}
a.textstyle:visited {
color:blue;
}
a.textstyle:hover {
color:red;
text-decoration:none;
background-color:black;
color:white;
}
.boxstyle {
position:absolute;
visibility:visible;
}
</style>
<!-- END OF STYLE-CONFIGURATION ZONE -->
Code: Alles auswählen
<script>
// CREDITS:
// Magic Carousel Ticker
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured
var rotatingtext=new Array()
var rotatinglink=new Array()
///////////////////////////////////////////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION ZONE
//////////////////////////////////////////////////////////////////////////////////////
// Your messages. Add as many as you like
rotatingtext[0]="imagine"
rotatingtext[1]="there's no heaven"
rotatingtext[2]="it's easy"
rotatingtext[3]="if you try"
rotatingtext[4]="no hell below us"
rotatingtext[5]="above us only sky"
rotatingtext[6]="imagine"
rotatingtext[7]="all the people"
rotatingtext[8]="living for today"
rotatingtext[9]="imagine"
rotatingtext[10]="there's"
rotatingtext[11]="no countries"
rotatingtext[12]="It isn't hard"
rotatingtext[13]="to do"
rotatingtext[14]="nothing to kill"
rotatingtext[15]="or die for"
rotatingtext[16]="and"
rotatingtext[17]="no religion too"
rotatingtext[18]="imagine"
rotatingtext[19]="all the people"
rotatingtext[20]="living life"
rotatingtext[21]="in peace"
// The links corresponding to the messages above.
// Each message has a link of its own
// If no link is reqired add "#" instead of a URL (see smaple below)
rotatinglink[0]="http://www.hotscripts.com"
rotatinglink[1]="http://www.scripts.com"
rotatinglink[2]="http://www.google.com"
rotatinglink[3]="http://www.fabulant.com"
rotatinglink[4]="http://www.dynamicdrive.com"
rotatinglink[5]="http://www.hotscripts.com"
rotatinglink[6]="http://www.hotscripts.com"
rotatinglink[7]="http://www.hotscripts.com"
rotatinglink[8]="#"
rotatinglink[9]="#"
rotatinglink[10]="#"
rotatinglink[11]="http://www.hotscripts.com"
rotatinglink[12]="http://www.hotscripts.com"
rotatinglink[13]="http://www.hotscripts.com"
rotatinglink[14]="http://www.hotscripts.com"
rotatinglink[15]="http://www.hotscripts.com"
rotatinglink[16]="http://www.hotscripts.com"
rotatinglink[17]="http://www.hotscripts.com"
rotatinglink[18]="http://www.hotscripts.com"
rotatinglink[19]="http://www.hotscripts.com"
rotatinglink[20]="http://www.hotscripts.com"
rotatinglink[21]="ihttp://www.hotscripts.com"
// Set the width of the inner-circle (pixels)
var textwidth=330
// Set the height of the inner-circle (pixels)
var textheight=120
// Set the number of words that will be displayed at once
var displaymax=9
// Set the speed! Tha values may range from 0.1 to 1.0
var step = 0.02;
/////////////////////////////////////////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION ZONE
// Do not edit below
////////////////////////////////////////////////////////////////////////////////////
var maxopacity=new Array()
var i_wordcounter=0
var segment=360/(displaymax);
var tmr
var decrement=0;
textwidth=textwidth/2
textheight=textheight/2
var opacitystep=Math.round(100/textheight)
var spc="\&"+"nbsp;"
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
for (i=0;i<rotatingtext.length;i++) {
rotatingtext[i]=rotatingtext[i].replace(/[" "]/g,spc)
}
for (i=0;i<displaymax;i++) {
maxopacity[i]=1
}
function getpagesize() {
windowwidth=parseInt(document.body.clientWidth)
windowheight=parseInt(document.body.clientHeight)
twidth=Math.floor(textwidth)
theight=Math.floor(textheight)
rotatetext()
}
function rotatetext() {
for (i=0; i<displaymax; i++) {
var thisspan=eval("document.getElementById('span"+i+"').style")
thisspan.left=twidth*Math.sin(decrement+i*segment*Math.PI/180)+textwidth;
thisspan.top=theight*Math.cos(decrement+i*segment*Math.PI/180)+textheight;
thisspan.zIndex=parseInt(thisspan.top)
var op=parseInt(100/textheight*(parseInt(thisspan.top)*0.5))
if (op<5 && maxopacity[i]==1) {
if (i_wordcounter>=rotatingtext.length) {
i_wordcounter=0
}
document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_wordcounter]+"' class='textstyle' onMouseover='stoprotating(this)' onMouseout='restartrotating()'>"+rotatingtext[i_wordcounter]+"</a>"
maxopacity[i]=-1
i_wordcounter++
}
if (op>90) {
maxopacity[i]=1
}
var thisfilter=eval("span"+i)
if (ie) {
thisfilter.filters.alpha.opacity=op
}
else {
thisspan.opacity=op/100
}
}
decrement-=step;
tmr=setTimeout('rotatetext()', 20);
}
function stoprotating(thisobj) {
clearTimeout(tmr)
zoomobj=thisobj
}
function restartrotating() {
rotatetext()
}
document.write('<div id="roof" style="position:relative;width:'+(2*textwidth)+'px;height:'+(2*textheight)+'px;">');
for (i=0;i<displaymax;i++) {
document.write('<div id="span'+i+'" class="boxstyle" style="filter:alpha(opacity=100);opacity:1"></div>');
}
document.write('</div>');
window.onload=getpagesize;
</script>
<!-- E-N-D O-F C-O-D-E F-O-R M-E-S-S-A-G-E C-A-R-O-U-S-E-L -->