WebBuild

Javascript 焦点图[JS][CSS]

作者:parno 日期:2011-09-07

字体大小: 小中大

从新浪专题页面 k 来的焦点图代码，用 Javascript 实际了类似 Flash 的效果。
图片资源：
numberbg.png：

triangle.png：

HTML代码

.Pixviewer .Triangle{width:21px;height:17px;position:absolute;z-index:49;background:url(download.asp?id=75) no-repeat 0 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop, src='download.asp?id=75');_background:none;}

.Pixviewer .BorderHack1{background-color:#707070;position:absolute;z-index:51;height:1px;top:0px;left:0px;font-size:0px;overflow:hidden;}
.Pixviewer .BorderHack2{background-color:#707070;position:absolute;z-index:51;width:1px;top:0px;right:0px;font-size:0px;overflow:hidden;}
.Pixviewer .BorderHack3{background-color:#707070;position:absolute;z-index:51;height:1px;left:0px;font-size:0px;overflow:hidden;}
.Pixviewer .BorderHack4{background-color:#707070;position:absolute;z-index:51;width:1px;left:0px;top:0px;font-size:0px;overflow:hidden;}
.Pixviewer .Title{background-color:#cccccc;}
-->
</style>

<div id="cont_m_1_box" class="contBox">
<div class="Pixviewer" id="Pixviewer_cont_m_1">
	<div class="PvBigPic" id="BigPic_cont_m_1"><a href="<a href="http://www.sina.com.cn/" target="_blank" rel="external">http://www.sina.com.cn/</a>" target="_blank">新浪网</a></div>
	<div class="PvNumber" id="Number_cont_m_1"></div>
	<div class="PvNumberBg" id="NumberBG_cont_m_1"></div>
	<div class="PvTitleBox" id="Title_cont_m_1" style="background:#ccc"></div>
</div>
<div id="focusData_cont_m_1" style="display:none">
	<dl>
		<dt><a href="<a href="http://slide.news.sina.com.cn/w/slide_1_20612_18954.html" target="_blank" rel="external">http://slide.news.sina.com.cn/w/slide_1_20612_18954.html</a>" target="_blank">卡扎菲住所内部照片曝光</a></dt>
		<dd><a href="http://i1.sinaimg.cn/dy/slidenews/1_img/2011_34/20612_117206_646851.jpg" target="_blank" rel="external">http://i1.sinaimg.cn/dy/slidenews/1_img/2011_34/20612_117206_646851.jpg</a></dd>
	</dl>
	<dl>
		<dt><a href="<a href="http://slide.news.sina.com.cn/w/slide_1_20612_18920.html" target="_blank" rel="external">http://slide.news.sina.com.cn/w/slide_1_20612_18920.html</a>" target="_blank">利比亚反对派占领阿齐齐亚兵营</a></dt>
		<dd><a href="http://i3.sinaimg.cn/dy/2011/0824/U4161P1DT20110824073901.jpg" target="_blank" rel="external">http://i3.sinaimg.cn/dy/2011/0824/U4161P1DT20110824073901.jpg</a></dd>
	</dl>
	<dl>
		<dt><a href="<a href="http://slide.news.sina.com.cn/c/slide_1_20612_18904.html" target="_blank" rel="external">http://slide.news.sina.com.cn/c/slide_1_20612_18904.html</a>" target="_blank">北京利比亚驻华大使馆升起反对派国旗</a></dt>
		<dd><a href="http://i3.sinaimg.cn/dy/2011/0823/U4161P1DT20110823093015.jpg" target="_blank" rel="external">http://i3.sinaimg.cn/dy/2011/0823/U4161P1DT20110823093015.jpg</a></dd>
	</dl>
	<dl>
		<dt><a href="<a href="http://slide.news.sina.com.cn/w/slide_1_20612_18894.html" target="_blank" rel="external">http://slide.news.sina.com.cn/w/slide_1_20612_18894.html</a>" target="_blank">反对派撕扯卡扎菲政权旗帜</a></dt>
		<dd><a href="http://i3.sinaimg.cn/dy/2011/0823/U4161P1DT20110823072117.jpg" target="_blank" rel="external">http://i3.sinaimg.cn/dy/2011/0823/U4161P1DT20110823072117.jpg</a></dd>
	</dl>
	<dl>
		<dt><a href="<a href="http://slide.news.sina.com.cn/w/slide_1_20612_18870.html" target="_blank" rel="external">http://slide.news.sina.com.cn/w/slide_1_20612_18870.html</a>" target="_blank">利比亚班加西反对派庆祝战事进展</a></dt>
		<dd><a href="http://i0.sinaimg.cn/dy/2011/0822/U4161P1DT20110822081839.jpg" target="_blank" rel="external">http://i0.sinaimg.cn/dy/2011/0822/U4161P1DT20110822081839.jpg</a></dd>
	</dl>
</div>
<script type="text/javascript">
var pixviewer_cont_m_1 = new Pixviewer("Pixviewer_cont_m_1","BigPic_cont_m_1","Number_cont_m_1", "NumberBG_cont_m_1", 300, 200);
pixviewer_cont_m_1.TimeOut = 5000;
pixviewer_cont_m_1.TitleID = "Title_cont_m_1";
pixviewer_cont_m_1.titleHeight = 20;
pixviewer_cont_m_1.htmlData = document.getElementById('focusData_cont_m_1').getElementsByTagName('dl');
for(var i=0;i<pixviewer_cont_m_1.htmlData.length;i++){
	var jsonData = {
		title : pixviewer_cont_m_1.htmlData[i].getElementsByTagName('a')[0].innerHTML,
		url : pixviewer_cont_m_1.htmlData[i].getElementsByTagName('a')[0].href,
		pic : pixviewer_cont_m_1.htmlData[i].getElementsByTagName('dd')[0].innerText || pixviewer_cont_m_1.htmlData[i].getElementsByTagName('dd')[0].textContent
	};
	pixviewer_cont_m_1.Add(jsonData);
};
pixviewer_cont_m_1.begin();
</script>
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 parno 于 2011-10-15 10:15 PM 更新]

上一篇: 恢复 Win7 系统栏音量图标[REG]

下一篇: 批处理重启 Explorer.exe[BAT]

文章来自: 网络

引用通告: 查看所有引用 | 我要引用此文章

Tags: javascript CSS

相关日志:

评论: 0 | 引用: 0 | 查看次数: 12754

发表评论

昵　称:	记住我的信息
密　码:	游客发言不需要密码.
邮　箱:	邮件地址支持Gravatar头像,邮箱地址不会公开.
网　址:	输入网址便于回访.
内　容:	正在加载编辑器...
验证码:	点击获取验证码
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号. 字数限制 500 字 \| UBB代码关闭 \| [img]标签关闭

Javascript 焦点图[JS][CSS]

作者:parno 日期:2011-09-07

User Panel

Category

Recent Comments

Support