迅雷新闻快讯以前原这样是flash,今天突然发现是js Coding出来。所以我就分析一下。以备后用。
文件下载:XunleiPicChange

1<div class="flashBox"> 
2  <div id="Switch_0" class="SwitchPic"> 
3     <a  href="xxx.html" onmouseover="pauseSwitch();" 
            onmouseout="goonSwitch();" blockid="938"> 
4        <img src="上方显示的大图片" alt="安室奈美惠"> 
5     </a> 
6   </div>
8.
10   <ul class="sPic">//而这部分则是负责显示下方的小图片 
11      <li id="LittleSwitch_0"> 
12       <a  href="javascript:goManSwitch(0);" target="_self" 
              title="安室奈美惠" blockid="938"> 
13           <img src="下方显示的小图片" alt="安室奈美惠" /> 
14       </a> 
15      </li>
17
19</div>
20
Code
1
2核心的JS代码,类于走马灯的效果,代码比较简单,看看即可
3
4<script>
5var SwitchTitles = new Array();
6SwitchTitles[0] = Array() ;
7SwitchTitles[0]['title'] = "安室奈美惠" ;
8SwitchTitles[0]['stitle'] = "不满儿子遭偷拍 起诉日八卦杂志" ;
9SwitchTitles[0]['link'] = "http://music.xunlei.com/contents/2b/22026.shtml" ;
10SwitchTitles[1] = Array() ;
11SwitchTitles[1]['title'] = "陈慧琳十月摆酒" ;
12SwitchTitles[1]['stitle'] = "十月二日在洲际酒店开席大宴亲朋" ;
13SwitchTitles[1]['link'] = "http://music.xunlei.com/contents/9a/22162.shtml" ;
14SwitchTitles[2] = Array() ;
15SwitchTitles[2]['title'] = "萧亚轩" ;
16SwitchTitles[2]['stitle'] = "着别致小礼服 内衣外穿展现性感一面" ;
17SwitchTitles[2]['link'] = "http://music.xunlei.com/contents/cf/22328.shtml" ;
18SwitchTitles[3] = Array() ;
19SwitchTitles[3]['title'] = "F4开演唱会" ;
20SwitchTitles[3]['stitle'] = "日本演唱会门票被炒高四倍" ;
21SwitchTitles[3]['link'] = "http://music.xunlei.com/contents/78/21906.shtml" ;
22
23var CurScreen = 0 ;
24var MaxScreen = 4 ;
25var g_pre_screen = -1 ;
26
27function switchPic(screen) {
28
29if (screen >= MaxScreen) {
30screen = 0 ;
31}
32if (g_pre_screen == -1) {
33if (screen == 0) {
34var pre_screen = MaxScreen - 1 ;
35}
36else {
37var pre_screen = screen - 1 ;
38}
39}
40else {
41var pre_screen = g_pre_screen ;
42}
43for (i=0;i<MaxScreen;i++) {
44document.getElementById("Switch_"+i).style.display = "none" ;
45}
46Effect.Appear("Switch_"+screen);
47
48switchLittlePic(screen);
49showSwitchTitles(screen);
50CurScreen = screen  ;
51g_pre_screen = -1 ;
52}
53function switchLittlePic(screen) {
54for (i=0;i<MaxScreen;i++) {
55document.getElementById("LittleSwitch_"+i).className = "" ;
56}
57document.getElementById("LittleSwitch_"+screen).className = "currA" ;
58}
59function showSwitchTitles(screen) {
60document.getElementById("SwitchTitle").innerHTML = '' ;
61Effect.BlindDown('SwitchTitle');
62document.getElementById("SwitchTitle").innerHTML = '<a href="'+SwitchTitles[screen]['link']+'" style="color:#fff;cursor:pointer;text-decoration:none;"><h6>'+SwitchTitles[screen]['title']+'</h6><p class="sm">'+SwitchTitles[screen]['stitle']+'</a></p>' ;
63}
64function reSwitchPic() {
65refreshSwitchTimer = null;
66switchPic(CurScreen+1);
67refreshSwitchTimer = setTimeout('reSwitchPic();', 3000);
68}
69function pauseSwitch() {
70clearTimeout(refreshSwitchTimer);
71}
72function goonSwitch() {
73clearTimeout(refreshSwitchTimer);
74refreshSwitchTimer = setTimeout('reSwitchPic();', 3000);
75}
76function goManSwitch(index) {
77clearTimeout(refreshSwitchTimer);
78CurScreen = index -1 ;
79reSwitchPic();
80}
81switchPic(CurScreen);
82refreshSwitchTimer = setTimeout('reSwitchPic();', 3000);
83</script>

转载于:https://www.cnblogs.com/RuiLei/archive/2008/06/27/1230748.html

迅雷新闻快讯区---JS代码剖析相关推荐

  1. 高仿【华为消费者业务官网】和精彩动画剖析:练习在低代码平台中嵌入JS代码

    本课程是华为消费者业务官网的仿站习作. 页面排版精美,照搬原站UI,一键导入HTML和CSS,还原度非常高,达到以假乱真的程度. 本课程重点是带领读者学习如何在众触低代码应用平台中嵌入JS代码,也有视 ...

  2. 科技类新闻快讯_新闻快讯—您可能使用了错误HTML。

    科技类新闻快讯 I've spent the past decade freelancing as an accessibility and efficiency consultant to webs ...

  3. 超级实用且不花哨的js代码大全

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();   event.src ...

  4. windows系统和linux系统可以使用相同的js代码吗_使用Sboxr自动发现和利用DOM(客户端)XSS漏洞...

    这一系列的博客文章将向你展示如何在单页或富JavaScript的应用程序上识别DOM XSS的问题.作为示例,我们将在DOM XSS playground(https://domgo.at)上解决10 ...

  5. php公告滚动源码,10行js代码实现上下滚动公告效果方法

    本文主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧.希望能帮助到大家 ...

  6. js图片转二进制流_V8是如何执行一段JS代码的?

    汇编器 编译器 解释器 解释执行和解释执行 什么是V8? V8执行Js代码的过程 汇编器 编译器 解释器 众所周知,计算机只能理解机器语言,而我们平时编程用的通常是高级语言,所以源代码通常都要经过层层 ...

  7. wxml代码支持js代码吗_如何取胜:代码支持者的建议

    wxml代码支持js代码吗 I had the honor of asking three of the world's most famous software engineers six ques ...

  8. 支持js代码的博客有哪些?

    1.支持js代码的博客谷歌博客, 雅虎奇摩,博客大巴,jimdo博客,和讯博客要等级(230000分). 2.现在新浪博客怎么才能有效的使用js呢 在新浪博客放广告,现在网络上主要流行的两种方法,这里 ...

  9. 代码流程图_助力理解js代码,进阶JavaScript代码能力——js2flowchart

    引言 js2flowchart 是一个可视化库,可将任何JavaScript代码转换为漂亮的SVG流程图.你可以轻松地利用它学习其他代码.设计你的代码.重构代码.解释代码.这样一个强大的神器,真的值得 ...

  10. html浏览器pc端禁止缩放,阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮 浏 ...

最新文章

  1. Flutter学习之”相对布局“
  2. kafka-python 停止消费
  3. 33:把数组排成最小的数
  4. 如何在java中实现跨线程的通讯
  5. EOS 智能合约源代码解读 (9)boot合约
  6. Vue中Web组态实现方案-WebTopo的使用
  7. java 手写阻塞队列_Java阻塞队列的实现
  8. 怎么安装python环境和编译器_Python环境安装以及PyCharm编译器的安装
  9. 计算机基础应用课件,中职计算机应用基础课件
  10. 韦根协议c语言,基于STM8系列的韦根协议门禁源代码 1.STM8系列开发源代码; 2.已做门禁开发:韦根协议刷卡门禁控制源代码; - 下载 - 搜珍网...
  11. julia安装源_Julia 国内镜像安装实测
  12. XXXX软件项目系统测试报告
  13. c# 实现的支付宝支付
  14. 解决win10下PPT打不开,显示内容有问题,提示修复但修复不成功
  15. 科技大佬的那些情史!
  16. 解决安卓手机点击有效,苹果手机点击事件无效的问题
  17. day.js插件处理日期
  18. Yii碰到“the file or directory to be published does not exist bower/jquery/dist”
  19. Android最实用的各种技能点的网址链接(每天都会更新,希望大家用的上)
  20. 图灵深度学习工作站介绍

热门文章

  1. iOS -[JYBDScanCardManage configIDScan] in JYBDScanCardManage.o等静态库问题
  2. 写函数,输入n个数字输出最大值和最小值
  3. Boost Log : Trivial logging with filters
  4. Light oj 1233 - Coin Change (III) (背包优化)
  5. 修改数据表DataTable某一列的类型和记录值
  6. CLP 中关闭自动落实的问题
  7. 土豆首页图片延迟加载的效果
  8. 中国诚信全球垫底?讲讲《Science》现在的论文有多不靠谱
  9. 漫画 | 硬核技术预测你有没有女朋友
  10. 微软回应github服务器中断,GitHub怎么了?连续3天出现严重宕机情况微软未回应...