1. Вставьте слой в DreamWeaver и используйте этот слой в качестве области прокрутки. Установите параметры слоя следующим образом:
Установите номер слоя: slayer, который является атрибутом идентификатора слоя.
Левое и верхнее значения — это положение слоя на странице и могут быть установлены по мере необходимости, здесь они составляют 100 и 120 пикселей;
Ширина и высота — это размер слоя и также задаются по мере необходимости;
Клип относится к области отображения слоя, а часть за пределами клипа скрыта. Мы используем эту область отображения, чтобы скрыть правую часть слоя, а затем управляем движением слоя, одновременно управляя этой областью отображения, чтобы завершить прокрутку. Эффект площади, который мы хотим.
Справа установите ширину дисплея, здесь 340, низ равен высоте;
Ниже приведен код слоя:
< div id="slayer" style="position:absolute; сверху: 120 пикселей; слева: 100 пикселей; клип: rect(0 340 120 0); высота: 120 пикселей; цвет фона: #CCCCCC; цвет фона слоя: # CCCCCC; граница: 1 пиксель, нет #000000, ширина: 670 пикселей» >
Мы можем разместить несколько изображений на слое горизонтально, здесь вместо этого мы используем таблицу. Размера слоя, установленного выше, достаточно для размещения всех изображений.
2. Следующий код — это код прокрутки слоев, который мы вставляем под меткой слоя <div>:
При вставке обратите внимание, что значение LayerW — это значение в правой части клипа, которое здесь равно 340.
< язык сценария="javascript" >
< !-- //по hve
var LayerW=340 //Устанавливаем ширину области отображения
вар LayerH = parseInt (slayer.style.height);
вар LayerL = parseInt (slayer.style.left);
вар LayerT=parseInt(slayer.style.top);
вар шаг = 0; // значение прокрутки
функция movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
Мов (а);
movx=setTimeout("movstar("+a+","+time+")",time);
}
перемещение функции(){
ClearTimeout (movx);
}
функция mov(a){
slayer.style.left = (step+=a) + LayerL;
клипL=0-шаг;
clipR=layerW-шаг;
клипB=слойH;
клипТ=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /скрипт >
3. Вставьте еще один слой, чтобы разместить «кнопку управления».
Этот слой расположен ниже предыдущего слоя и используется для размещения «кнопок управления». Положение можно регулировать по мере необходимости, как показано ниже. В качестве кнопок управления здесь мы используем цветные блоки таблицы. Будет лучше, если мы сделаем две картинки в форме стрелок.
4. Добавьте следующие коды в теги «Кнопки управления».
Это добавляется в тег таблицы <td>. Если вы используете изображение в качестве кнопки, добавьте его в тег <img>.
Левая кнопка:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
Правая кнопка:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
Смысл приведенного выше кода в том, что при наведении мыши на кнопку действие начинается, нажатие и удержание кнопки ускоряется, мышь покидает кнопку, чтобы остановить действие, а знак - указывает на движение в обратном направлении.
5. Завершить
Когда мышь указывает на «Кнопку управления», она будет прокручиваться влево или вправо. Щелчок и удерживание мыши ускорит прокрутку.
Весь код: (можно скопировать и протестировать в области BODY)
< div id="slayer" style="position:absolute; сверху: 120 пикселей; слева: 100 пикселей; клип: rect(0 340 120 0); высота: 120 пикселей; цвет фона: #CCCCCC; цвет фона слоя: # CCCCCC; граница: 1 пиксель, нет #000000, ширина: 670 пикселей» >
< язык сценария="javascript" >
< !-- //по hve
var LayerW=340 //Устанавливаем ширину области отображения
вар LayerH = parseInt (slayer.style.height);
вар LayerL = parseInt (slayer.style.left);
вар LayerT=parseInt(slayer.style.top);
вар шаг = 0; // значение прокрутки
функция movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
Мов (а);
movx=setTimeout("movstar("+a+","+time+")",time);
}
перемещение функции(){
ClearTimeout (movx);
}
функция mov(a){
slayer.style.left = (step+=a) + LayerL;
клипL=0-шаг;
clipR=layerW-шаг;
клипB=слойH;
клипТ=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /скрипт >
< таблица cellpacing="10" border="0" cellpadding="0" >
<tr bgcolor="#FFCC99" >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
</tr >
</таблица>
</дел>
< div id="Layer1" style="position:absolute; width:344px; height:20px; z-index:1; слева: 97px; сверху: 244px" >
< ширина таблицы="100%" высота="100%" >
<тр>
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover()" ;movstar(1,20)" width="14" >< /td >
< тд >< /тд >
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover ();movstar(-1,20)" width="14" >< /td >
</tr >
</таблица>
</дел>