ホームページ >ウェブフロントエンド >jsチュートリアル >Javascript CSSでFlashダイナミックニュースエフェクト(ppオリジナル)_画像特殊効果を実現

Javascript CSSでFlashダイナミックニュースエフェクト(ppオリジナル)_画像特殊効果を実現

WBOYオリジナル: 2016-05-16 18:59:591230ブラウズ

.pp_portal_imgNew { 
position:absolute; 
}

/* 图片样式 */ 
.pp_portal_imgNew img { 
width:100%; 
height:165px; 
border:0; 
}

/* 文字标题样式 */ 
.pp_portal_imgNew_title { 
text-align:center; 
margin-top:5px; 
}

.pp_portal_imgNew_title a{ 
display:block; 
color:#000; 
text-decoration: none; 
font-size: 14px; 
font-weight: bold; 
text-align:center; 
}

/* 导航提示位置 */ 
.pp_portal_navLink { 
position:absolute; 
display:block; 
right:0px; 
bottom:5px; 
}

/* 导航提示样式(未选择) */ 
.pp_portal_navLink a { 
color:#fff; 
text-align:center; 
text-decoration: none; 
}

.pp_portal_navLink li { 
display:inline; 
text-align:center; 
background-color:#333; 
width:15px; 
margin-left:1px; 
} 
</style>
<div id="id_portal_imgNews" class="pp_portal_imgNews">

<div id="id_portal_imgNew1" class="pp_portal_imgNew" style="display:block;">
<a href="#">
<img alt="Javascript CSSでFlashダイナミックニュースエフェクト(ppオリジナル)_画像特殊効果を実現" src="http://files.jb51.net/upload/20081011185509111.jpg"></a><div class="pp_portal_imgNew_title">
<a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml"></a>写真ニュース 1</div>
</div>
<div id="id_portal_imgNew2" class="pp_portal_imgNew" style="display:none;">
<a href="#">
<img alt="Javascript CSSでFlashダイナミックニュースエフェクト(ppオリジナル)_画像特殊効果を実現" src="http://files.jb51.net/upload/20081011185509111.jpg"></a><div class="pp_portal_imgNew_title">
<a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml"></a>ピクチャーニュース2</div>
</div>
<div id="id_portal_imgNew3" class="pp_portal_imgNew" style="display:none;">
<a href="#">
<img alt="Javascript CSSでFlashダイナミックニュースエフェクト(ppオリジナル)_画像特殊効果を実現" src="http://files.jb51.net/upload/20081011185509111.jpg"></a><div class="pp_portal_imgNew_title">
<a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml"></a>ピクチャーニュース 3</div>
</div>
<div id="id_portal_imgNew4" class="pp_portal_imgNew" style="display:none;">
<a href="#">
<img alt="Javascript CSSでFlashダイナミックニュースエフェクト(ppオリジナル)_画像特殊効果を実現" src="http://files.jb51.net/upload/20081011185509111.jpg"></a><div class="pp_portal_imgNew_title">
<a href="http://sports.sina.com.cn/f1/2008-10-11/14014001153.shtml"></a>ピクチャーニュース 4</div>
</div>
<div id="id_portal_navLinks" class="pp_portal_navLink">
<ul>
<li id="id_portal_navLink1">
<a href="javascript:void(0)" onclick="pp_portal_selectPicNew(1)"></a> 1 </li>
<li id="id_portal_navLink2">
<a href="javascript:void(0)" onclick="pp_portal_selectPicNew(2)"></a> 2 </li>
<li id="id_portal_navLink3">
<a href="javascript:void(0)" onclick="pp_portal_selectPicNew(3)"></a> 3 </li>
<li id="id_portal_navLink4">
<a href="javascript:void(0)s" onclick="pp_portal_selectPicNew(4)"></a> 4 </li>
</ul>
</div>
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Javascript_javascript スキルでの Eval 関数の使用手順次の記事：Javascript_javascript スキルでの Eval 関数の使用手順

続きを見る

Javascript CSSでFlashダイナミックニュースエフェクト(ppオリジナル)_画像特殊効果を実現

関連記事