中文字幕天堂在线,99re在线播放视频,91免费在线视频

用Javascript仿flash焦點圖片效果支持IE與火狐

http://bbs.blueidea.com 2009/4/16 20:25:37 深山行者字體:大中小瀏覽 17248

以下為詳細代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
/*
power by: http://www.wxwdesign.cn
*/
//主函數
var s=function(){
var interv=2000; //切換間隔時間
var interv2=10; //切換速速
var opac1=50; //文字背景的透明度
var source="fade_focus" //焦點輪換圖片容器的id名稱
//獲取對象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制圖層透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦點按鈕
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//漸顯
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//漸隱
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滾動文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
</script>
<title>用Javascript仿flash焦點圖片效果支持IE與火狐</title>
</head>
<body>
<div id="fade_focus">
    <div class="loading">Loading...<br /><img src="http://www.wxwdesign.cn/attachments/month_0809/v2008925193118.gif" width="100" height="100" /></div>
    <ul>
      <li><a  target="_blank"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/1.jpg" width="443" height="209" alt="展示圖片1" /></a></li>
      <li><a  target="_blank"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/2.jpg" width="443" height="209" alt="展示圖片2" /></a></li>
      <li><a  target="_blank"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/3.jpg" width="443" height="209" alt="展示圖片3" /></a></li>
      <li><a  target="_blank"><img src="http://www.wxwdesign.cn/Down/flash/flash_show/images/4.jpg" width="443" height="209" alt="展示圖片4" /></a></li>
    </ul>
</div>
</body>
</html>

前一頁:留言動態顯示圖片

后一頁:圖片鏈接默認鏈接為灰色，鼠標放上去變彩色css效果代碼

相關閱讀: 中國簽證行業領導者--91出國簽證網; 旅行社管理系統商業版3.0發布; 留言板留言板V7.21; uni.openLocation打開地圖導航沒反應解決方式（參數都設置對就是打不開）; 一個利用radio單選選擇框進行變色的網頁效果; 聚散客旅游網; asp設置cookies過期時間的幾種方法; Javascript JS 限制復選框的選擇個數(2)

共有0條關于《用Javascript仿flash焦點圖片效果支持IE與火狐》的評論: 發表評論

正在加載評論......

返回頂部發表評論

呢稱:
表情:
內容:	評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼:

網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇: 百度小程序開發; 微信小程序開發; 微信公眾號開發; uni-app; asp函數庫; ASP; DIV+CSS; HTML; python

更多>>同類信息: div+css黑色焦點圖(幻燈片效果非常不錯); javascript實現圖片預覽功能; 比較實用的利用javascript按比例相應縮放圖片大小; 一個效果非常不錯圖片載入loading等待效果; 利用css實現圖片選中后顯示文字與圖片效果; 利用CSS里面的A:hover鼠標滑過縮略圖時放大圖片

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動端自動化測試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來做投票; 火狐Mozilla Firefox出現：無法載入您的Firefox配置文件它可能已經丟失或是無法訪問問題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過代碼修改pip下載源讓下載庫飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機抽取信息: 我們使用的42個著名搜索引擎; asp導出內容到excel表并自定義命名后下載（非打開）; 利用javascript來靜態添加表格行; IE中奇怪的左右border斷線現象; javascript根據內容轉換為拼音; 沙漠玫瑰旅行社

更多標簽熱門標簽

設計偽類首字母日期 margin 小偷風格管理系統 div CSS 絕對定位定律 text 滑動文件 shift 采集許愿右擊強度人生分辨率 V3.1 圓角 getElementById 記錄標注 list 深山旅游網站管理系統V1.0 翻頁用戶體驗 imprt 間隔導出關鍵詞 csss 垂直設置淘寶 flash 透明目標 html 添加改變 border 留言次數 function outerHTML 青春經典 qq right

伦理片hd-伦理片 在线播放-伦理片 在线-伦理免费在线观看-综合图片区-综合婷婷

用Javascript仿flash焦點圖片效果支持IE與火狐

伦理片hd-伦理片在线播放-伦理片在线-伦理免费在线观看-综合图片区-综合婷婷