DHTML Fading Slide Show

最新推荐文章于 2019-10-11 16:40:02 发布

xuehouniao

最新推荐文章于 2019-10-11 16:40:02 发布

阅读量840

点赞数

分类专栏： DHTML 文章标签： scroll javascript microsoft function image internet

本文链接：https://blog.csdn.net/xuehouniao/article/details/288153

版权

DHTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DHTML Fading Slide Show

View Live Demo

Using this script you can scroll an image in the "left" or "right" direction.

To use this Javascript,view the source of this document. Copy the <script> section and place it wherever you want it in your page.

img_path : The image path ("qiksearch.gif" here) time_length : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second) begin_pos : Beginning position of your scrollable content. (265 here)

Select All Code

<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/scrolling_image.htm
//*********************************************
//* Scrolling Image                           *
//* Created 20/04/02                          *
//* Scrolls an image in both directions       *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.com/                 *
//* E-mail : premshree@hotmail.com            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************

window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);

//------------------C U S T O M I S E------------------------

 var img_path="images/codetoad3.gif";
 var time_length =50; //Scroll delay in milliseconds
 var begin_pos = 265; //Start position of scroll hint

//-----------------------------------------------------------

var i=begin_pos;
var j=i; 
var scroll_length = 350; //The scroll length
var original_time=time_length;

if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}

//SCROLL RIGHT
function scroll_right(layerName)
{
 if (NS4 || IE4)
 { 
   if(i<(begin_pos+scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
    i++;
    j++;
   }
  if(i==j)
  {
   setTimeout("scroll_right('"+layerName+"')",time_length);
  }
 }
}

//SCROLL LEFT
function scroll_left(layerName)
{
 if (NS4 || IE4)
 {
   if(i>(begin_pos-scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
    i--;
    j--;
   }
  if(i==j)
  {
   setTimeout("scroll_left('"+layerName+"')",time_length);
  }
 }
}

function scroll_out()
{
 time_length=10000000000000;
}

function reset()
{ 
 time_length=original_time;
}

document.write('<div id="prem_hint" style="position:relative; left:' + begin_pos + '" class="prem_hint"><img src="' + img_path + '"><br><font size="-1"><b>You can even scroll a Text<br><font color="#003399">You can scroll multiple lines.</font></b></font></div><center><a href="#" class="link" οnmοuseοver="javascript:reset(); scroll_left('prem_hint');" οnmοuseοut="javascript:scroll_out();"><b><< Scroll Left</b></a> <b>|</b> <a href="#" class="link" οnmοuseοver="javascript:reset(); scroll_right('prem_hint');" οnmοuseοut="javascript:scroll_out();"><b>Scroll Right >></b></a></center>');

</script>
<!--END REQUIRED-->