この記事では、JS模倣Tudouネットのフォーカス画像スイッチング効果をサムネイルと実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>フォーカス画像スイッチング模倣ポテトネットのサムネイルの効果</タイトル>
<style type = "text/css">
/ *リセットスタイル */
* {マージン:0;パディング:0;ワードブレイク:ブレークオール; }
ボディ{背景:#fff;色:#333;フォント:12px/1.6em helvetica、arial、sans-serif; }
H1、H2、H3、H4、H5、H6 {font-size:1em; }
{color:#039;テキスト装置:なし; }
A:Hover {Text-Decoration:underline; }
ul、li {list-style:none; }
Fieldset、IMG {border:none; }
em、strong、cite、th {font-style:normal; font-weight:正常; }
/ * Focus_Change Style */
#focus_change {position:relative;幅:450px;高さ:295px;オーバーフロー:隠し;マージン:20px 0 1px 60px; }
#focus_change_list {position:absolute;幅:1800px;高さ:295px; }
#focus_change_list li {float:left; }
#focus_change_list li img {width:450px;高さ:295px; }
.focus_change_opacity {position:absolute;幅:450px;高さ:70px;トップ:225px;左:0;背景:#000;フィルター:アルファ(不透明度= 50); -moz-opacity:0.5;不透明度:0.5; }
#focus_change_btn {position:absolute;幅:450px;高さ:65px;トップ:225px;左:0; }
#focus_change_btn ul {padding-left:5px; }
#focus_change_btn li {display:inline;フロート:左;マージン:0 15px;パディングトップ:12px; }
#focus_change_btn li img {width:76px;高さ:50px;国境:2pxソリッド#888; }
#focus_change_btn .current {background:url(/uploadfile/200901/1/6C164133877.gif)No-Repeat 37px 8px;}
#focus_change_btn .current img {border-color:#eee; }
</style>
<script type = "text/javascript">
function $(id){return document.getElementById(ID); }
function MoveElement(elementId、final_x、final_y、interval){
if(!document.getElementById)falseを返します。
if(!document.getElementByID(elementID))falseを返します。
var elem = document.getElementByID(elementID);
if(elem.movement){
ClearTimeout(Elem.Movement);
}
if(!elem.style.left){
elem.style.left = "0px";
}
if(!elem.style.top){
elem.style.top = "0px";
}
var xpos = parseint(elem.style.left);
var ypos = parseint(elem.style.top);
if(xpos == final_x && ypos == final_y){
trueを返します。
}
if(xpos <final_x){
var dist = math.ceil((final_x -xpos)/10);
xpos = xpos + dist;
}
if(xpos> final_x){
var dist = math.ceil((xpos -final_x)/10);
xpos = xpos -dist;
}
if(ypos <final_y){
var dist = math.ceil((final_y -ypos)/10);
ypos = ypos + dist;
}
if(ypos> final_y){
var dist = math.ceil((ypos -final_y)/10);
ypos = ypos -dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var Repeat = "MoveElement( '"+ElementId+"'、"+final_x+"、"+final_y+"、"+interval+")";
elem.movement = setimeout(繰り返し、間隔);
}
function classnormal(){
var focusbtnlist = $( 'focus_change_btn')。getelementsbytagname( 'li');
for(var i = 0; i <focusbtnlist.length; i ++){
focusbtnlist [i] .classname = '';
}
}
関数FocusChange(){
var focusbtnlist = $( 'focus_change_btn')。getelementsbytagname( 'li');
focusbtnlist [0] .onmouseover = function(){
MoveElement( 'Focus_Change_List'、0,0,5);
classnormal()
focusbtnlist [0] .classname = 'current'
}
focusbtnlist [1] .onmouseover = function(){
moveElement( 'focus_change_list'、-450,0,5);
classnormal()
focusbtnlist [1] .classname = 'current'
}
focusbtnlist [2] .onmouseover = function(){
moveElement( 'focus_change_list'、-900,0,5);
classnormal()
focusbtnlist [2] .classname = 'current'
}
focusbtnlist [3] .onmouseover = function(){
moveElement( 'focus_change_list'、-1350,0,5);
classnormal()
focusbtnlist [3] .classname = 'current'
}
}
setInterval( 'autofocuschange()'、5000);
var atuokey = false;
function autofocuschange(){
$( 'focus_change')。onmouseover = function(){atuokey = true}
$( 'focus_change')。onmouseout = function(){atuokey = false}
if(atuokey)return;
var focusbtnlist = $( 'focus_change_btn')。getelementsbytagname( 'li');
for(var i = 0; i <focusbtnlist.length; i ++){
if(focusbtnlist [i] .classname == 'current'){
var currentnum = i;
}
}
if(currentnum == 0){
moveElement( 'focus_change_list'、-450,0,5);
classnormal()
focusbtnlist [1] .classname = 'current'
}
if(currentnum == 1){
moveElement( 'focus_change_list'、-900,0,5);
classnormal()
focusbtnlist [2] .classname = 'current'
}
if(currentnum == 2){
moveElement( 'focus_change_list'、-1350,0,5);
classnormal()
focusbtnlist [3] .classname = 'current'
}
if(currentnum == 3){
MoveElement( 'Focus_Change_List'、0,0,5);
classnormal()
focusbtnlist [0] .classname = 'current'
}
}
window.onload = function(){
FocusChange();
}
</script>
</head>
<body>
<div id = "focus_change">
<div id = "focus_change_list" style = "top:0; left:0;">
<ul>
<li> <a href = "// www.vevb.com/"> <img src ="/images/m03.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"> <img src ="/images/m04.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"> <img src ="/images/m09.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"> <img src ="/images/m10.jpg "/> </a> </li>
</ul>
</div>
<div> </div>
<div id = "focus_change_btn">
<ul>
<li> <a href = "#"> <img src = "/images/s3.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s4.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s9.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s10.jpg"/> </a> </li>
</ul>
</div>
</div> <! - focus_change end->
<div style = "height:20px; background:#eee;"> </div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。