注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

idylledu的博客

I love nature

 
 
 

日志

 
 

网页制作代码编写学习(内容引用来至百度搜索,感谢分享)  

2011-10-19 15:03:08|  分类: 计算机教育 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1. 图片翻页特效:
效果:多张图片逐个翻页显示,也可用鼠标点击图片区域下方的页码手动翻页。每张图片上都可添加链接引向不同位置的帖子。
演示:在专刊盛世奥运之奢华盘点上半部分中间“华美谢幕”那部分有演示,请点击专刊查看。
代码:
这段代码不是原创,而是我从其他网页上截取的代码片断,根据自己需要做了修改,并且添加了注释。
绿色部分是注释,蓝色部分是Javascript代码
拷贝代码使用时,绿色注释部分可保留,不影响代码效果。因为搜狐论坛不能完整显示网页代码,因此我用中文尖括号<>替代英文尖括号<>,以便代码可以正常显示。拷贝代码使用时,所有尖括号<请替换成<,所有尖括号>请替换成>。
<script type="text/javascript">
<!--
 //定义图片展示区域宽度,图片制作时尺寸应与之吻合,具体宽度456可根据需要更改
 var focus_width = 465;  
 
 //定义图片展示区域高度,图片制作时尺寸应与之吻合,具体高度309可根据需要更改
 var focus_height = 309  
 //定义动画展示区域高度,无需修改,直接拷贝即可
 var swf_height = focus_height;  
 //定义图片地址,不同图片地址用竖线“|”分隔开,图1-图6将循环翻页显示
 //例:var pics='图1地址|图2地址|图3地址|图4地址|图5地址|图6地址'
 //图1-图6的具体图片地址可根据需要更改
 var pics='http://image1.club.sohu.com/pic/2c/bf/hxzy17bad114940ae70c.jpg|http:
//image1.club.sohu.com/pic/2a/2c/hxzy46b149bcbe0c5523.jpg|http://image1.
club.sohu.com/pic/ec/4c/hxzyc1b1753b537f6318.jpg|http://image1.club.sohu
.com/pic/77/be/hxzy6691c527216b9379.jpg|http://image1.club.sohu.com/pic/
6e/c8/hxzyc7fab6902cd7493b.jpg|http://image1.club.sohu.com/pic/87/63/
hxzy4adf549af5477b83.jpg'
 //定义图片链接到的帖子地址,不同帖子地址用竖线“|”分隔开,分别点击图1-图6将打开不同帖子
 //例:var links='帖子1地址|帖子2地址|帖子3地址|帖子4地址|帖子5地址|帖子6地址'
 //帖子1-帖子6的具体帖子地址可根据需要更改
 var links='http://club.yule.sohu.com/r-hot-905015-0-1-0.html|http://club.yule
.sohu.com/r-hot-905015-0-1-0.html|http://club.yule.sohu.com/r-hot-905015-
0-1-0.html|http://club.yule.sohu.com/r-hot-905015-0-1-0.html|http://club.
yule.sohu.com/r-hot-905015-0-1-0.html|http://club.yule.sohu.com/r-hot-905
015-0-1-0.html'
 //用Flash方式实现图片翻页动画,定义Flash控件宽度和高度,无需修改,直接拷贝即可
 document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
 //用Flash方式实现图片翻页动画,定义Flash控件模版
 //仅Flash背景颜色可根据需要更改,其他代码无需修改,直接拷贝即可
 //Flash背景颜色定义在以下代码末尾,这个便是<param name="bgcolor" value="#ff5f0a">,可根据需要将颜色编码#ff5f0a更改为其它颜色编码
 document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://mat1.qq.com/bb/flash/focus.swf"> <param name="quality" value="high"><param name="bgcolor" value="#ff5f0a">');
 //用Flash方式实现图片翻页动画,设置Flash上的图片和帖子链接,无需修改,直接拷贝即可
 document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
 document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'">');
 //用Flash方式实现图片翻页动画,定义Flash控件模版
 //仅图片翻页时Flash背景颜色可根据需要更改,其他代码无需修改,直接拷贝即可
 //图片翻页时Flash背景颜色定义在以下代码中部,这个便是bgcolor="#ff5f0a",可根据需要将颜色编码#ff5f0a更改为其它颜色编码
 document.write('<embed src="http://mat1.qq.com/bb/flash/focus.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'" menu="false" bgcolor="#ff5f0a" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');  
 document.write('</object>');
//-->
</script>
2. 图片滚动特效:
效果:多张图片自右向左循环滚动显示,当鼠标移动到图片上时图片停止滚动,当鼠标移到图片以外区域时,图片继续自右向左循环滚动。每张图片上都可添加链接引向不同位置的帖子。
演示:在专刊盛世奥运之奢华盘点底部“再见北京”那部分有演示,请点击专刊查看。
代码:
这段代码不是原创,而是我从其他网页上截取的代码片断,根据自己需要做了修改,并且添加了注释
绿色部分是注释,蓝色部分是Javascript代码,其余是html代码
拷贝代码使用时,绿色注释部分需删除,否则影响代码效果。因为搜狐论坛不能完整显示网页代码,因此我用中文尖括号<>替代英文尖括号<>,以便代码可以正常显示。拷贝代码使用时,所有尖括号<请替换成<,所有尖括号>请替换成>。
 //定义图片滚动区域宽度,具体宽度913可根据需要更改,但要保证所有小图片宽度之和大于滚动区域宽度。
 //注意id="scrollpic"这部分不要更改,会被下面的JavaScript代码用到
 <div id="scrollpic" style="overflow: hidden; width:913px;">
  
  <table cellspacing="0" cellpadding="0" align="center" border="0">
   <tr>
    //注意id="scrollpic1"这部分不要更改,会被下面的JavaScript代码用到
    <td id="scrollpic1">
     <table border="0" cellpadding="0" cellspacing="0">
      <tr>
      <tr>
       //定义图1地址,图1的具体图片地址可根据需要更改
       //例:src="图1地址"
       <td width="185" ><img src="http://image1.club.sohu.com/pic/02/06/hxzy38a37ad660911a22.jpg" /></td>
       //定义图2地址,图2的具体图片地址可根据需要更改
       //例:src="图2地址"
       <td width="185" ><img src="http://image1.club.sohu.com/pic/df/2e/hxzycd25c5d21ec914fa.jpg" /></td>
       //定义图3-图10地址,图3-图10的具体图片地址可根据需要分别更改
       //例:src="图3地址"
       <td width="185" ><img src="http://image1.club.sohu.com/pic/86/7c/hxzy1d6b9dbd31037dd7.jpg" /></td>
       <td width="185" ><img src="http://image1.club.sohu.com/pic/e4/87/hxzy8a23effe3f101f4b.jpg" /></td>
       <td width="185" ><img src="http://image1.club.sohu.com/pic/e5/f8/hxzy3c238da78778cd67.jpg" /></td>
       <td width="185" ><img src="http://image1.club.sohu.com/pic/74/78/hxzya257d79c0c8f5635.jpg" /></td>
       <td width="185" ><img src="http://image1.club.sohu.com/pic/95/09/hxzy89a7cc1d2f4444ea.jpg" /></td>
       <td width="185" ><img src="http://image1.club.sohu.com/pic/63/64/hxzy9644fc02748b3064.jpg" /></td>
       <td width="185" ><img src="http://image1.club.sohu.com/pic/54/7c/hxzy62056924145d076f.jpg" /></td>
       <td width="185" ><img src="http://image1.club.sohu.com/pic/b0/bc/hxzy3530eaebb527a0b8.jpg" /></td>
      </tr>
     </table>
    </td>
   //注意id="scrollpic2"这部分不要更改,会被下面的JavaScript代码用到
   <td id="scrollpic2"></td>
   </tr>
  </table>
 </div>
<script type="text/javascript">
 //定义图片滚动速度,具体速度15可根据需要更改
 var speed=15;
 //定义图片滚动方向,自右向左水平滚动,无需修改,直接拷贝即可
 scrollpic2.innerHTML=scrollpic1.innerHTML;
 function Marquee()
 {
  if(scrollpic2.offsetWidth-scrollpic.scrollLeft<=0)
   scrollpic.scrollLeft-=scrollpic1.offsetWidth;
  else
   scrollpic.scrollLeft++;
 }
 var MyMar=setInterval(Marquee,speed);
 scrollpic.onmouseover=function() {clearInterval(MyMar);}
 scrollpic.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script>

一、文章最新图片横向滚动(向左)
用以下代码
<div id=demo style="OVERFLOW: hidden; WIDTH: 575px; HEIGHT: 120px">
<table cellPadding=0 align=left border=0 cellspace="0">
   <tr>
     <td id=demo11 vAlign=top>
      <!--{$GetPicArticle(ChannelID,0,True,0,13,false,false,0,3,2,130,90,20,0,True,13)}--></td>
     <td id=demo12 vAlign=top></td>
   </tr>
</table>
</div>
<SCRIPT>
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
</SCRIPT>

替换动易原始首页模板最新图片代码中的<!--{$GetPicPhoto(3,0,true,0,4,false,false,0,1,1,130,90,20,0,true,4)}-->部分

注意:
1、WIDTH: 575px; HEIGHT: 120px要根据你版面的宽度和高度而调整。
2、代码中{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}的一些参数可参照动易图片调用标签中的参数自行设定(我这里是显示12张)

二、首页图片横向滚动(向右)
<div id=demo style=overflow:hidden;height:120;width:575;>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
   <td id=demo1 valign=top><!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--></td>
   <td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
    var speed=30
    demo2.innerHTML=demo1.innerHTML
    demo.scrollLeft=demo.scrollWidth
    function Marquee(){
     if(demo.scrollLeft<=0)
     demo.scrollLeft+=demo2.offsetWidth
     else{
     demo.scrollLeft--
     }
    }
    var MyMar=setInterval(Marquee, speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee, speed)}
</script>

三、首页图片纵向滚动(向上)
<DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 575px; HEIGHT: 120px">
<DIV id=rolllink1>
    <TABLE cellSpacing=5 width="100%">
      <tr>
       <td id=demo11 vAlign=top>
         <!--{$GetPicPhoto(3,0,true,0,12,false,false,0,1,1,130,90,20,0,true,4)}--></td>
       <td id=demo12 vAlign=top></td>
      </tr>
    </TABLE>
</DIV>
<DIV id=rolllink2></DIV>
</DIV>
<SCRIPT>
var rollspeed=40
rolllink2.innerHTML=rolllink1.innerHTML
function Marquee(){
if(rolllink2.offsetTop-rolllink.scrollTop<=0)
rolllink.scrollTop-=rolllink1.offsetHeight
else{
rolllink.scrollTop++
}
}
var MyMar=setInterval(Marquee,rollspeed)
rolllink.onmouseover=function() {clearInterval(MyMar)}
rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}
</SCRIPT>

注:如果是调用其他频道的图片那就只用改变标签就行,另外滚动代码还可以用到频道的首页,方法请大家自己参照

四、首页图片(包括其他内容)切换特效效果代码(切换效果演示请看本站首页:灯火工作室)

操作步骤:

(一)、添加CSS样式定义:
  进入后台依次打开“系统设置”->“网站风格管理”,修改网站风格,在里面添加以下的CSS样式定义:
/* 图文调用页面特效定义 */
.clsImg{filter: revealTrans(transition=4,duration=2); width: 750px; position: absolute; margin-top:-62px;}
.clsImgList{width:750px;}

注意:其中filter: revealTrans(transition=4,duration=2)定义了切换特效的内容,transition表示设置或检索转换所使
用的方式(4为向上擦除,共有23种切换效果参数),duration表示设置或检索转换完成所用的时间。position:
absolute;表示将对象从文档流中拖出。margin-top:-62px表示区块上缩进-62px,用以定位内容。

(二)、修改模板:
  依次打开“系统设置”->“网站通用模板页管理”,修改网站首页模板,在里面添加以下内容:

  1、在<body>中添加定义 onload="playPage()",
比如:<body onload="playPage()" leftmargin=0 topmargin=0 onmousemove='HideMenu()'>

  2、在需要显示切换特效的地方添加以下代码:
<div id='page1' onmouseover='setbFlag(false)' onmouseout='setbFlag(true)' style='VISIBILITY: visible' class='clsImg' >
<div class='clsImgList'>切换内容一</div>
</div>
<div id='page2' onmouseover='setbFlag(false)' onmouseout='setbFlag(true)' style='VISIBILITY: hidden' class='clsImg'>
<div class='clsImgList'>切换内容二</div>
</div>     
<script language="javascript">
<!--
        var tmpDiv1 = document.getElementById("page1");
        var tmpDiv2 = document.getElementById("page2");

        var bFlag = true;
        var bShowDiv = true;
       
        function playPage()
        {
                if(bFlag)
                {
                        if(bShowDiv)
                        {
                                nextPage(tmpDiv1, true);
                                nextPage(tmpDiv2, false);
                        }
                        else
                        {
                                nextPage(tmpDiv1, false);
                                nextPage(tmpDiv2, true);
                        }
                        setTimeout('playPage()',5000);
                }
                else
                {
                        setTimeout('playPage()',1000);
                }
                bShowDiv = !bShowDiv;
                return;
        }
        function setbFlag(b)
        {
                bFlag = b;
                return;
        }
        function nextPage(whichDiv, bShowDiv){
                if(whichDiv != null)
                {
                        //whichDiv.filters.revealTrans.Transition=Math.floor(Math.random()*23);
                        whichDiv.filters.revealTrans.apply();
                         if(bShowDiv)
                         {
                                 whichDiv.style.visibility = 'hidden';
                         }
                         else
                         {
                                 whichDiv.style.visibility = 'visible';
                         }
                        whichDiv.filters.revealTrans.play()
                }
                return;
        }
//-->
</script>

注意:把“切换内容一”和“切换内容二”换成你想要调用显示内容的有关标签

  评论这张
 
阅读(130)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017