账号通
    

注册

找回密码

账号  

密码  

话题
互动
会员
服务
<<返回列表上一个主题 下一个主题 打印本帖 复制本帖地址

44258

查看

66

回复
主题：[经典教程]利用SQL标签制作幻灯特效(2008-12-19科汛论坛首发) [收藏主题] 转到：  
小林 当前离线

233

主题

0

广播

2

粉丝
添加关注
级别:二年级

用户积分:2186 分
登录次数:88 次
注册时间:2008/7/19
最后登录:2014/1/11
小林 发表于：2008/12/19 19:04:00   | 显示全部帖子 查看该作者主题 楼主 
科汛在线网校系统
有课程 找生源 就上科汛课堂街

   很多用户对科汛系统提供的SQL函数标签并不能很好的运用,如果您能真正掌握及灵活使用该标签的话,她几乎可以完成98%以上的页面显示效果.今天给大家介绍如何利用SQL标签来制作网页常见的特效.


   对于初识科汛的用户,我们在科汛的系统函数标签里提供了4种的幻灯特效,虽然可以满足一般的网站需求,但由于网上我们经常看到的幻灯样式种类之多,如果还局限于使用系统自带的4种特效,可能就没有多大创意了.如果您已对系统有一定的了解,不妨跟我一起来DIY如何使用sql标签的来制作这样的标签吧^_^


 


 今天我们要完成的目标效果如下图


 


 



此主题相关图片如下：1.jpg
1.jpg


上图的特效是来自迅雷网的这个页面 http://movie.xunlei.com/topic/gougou_vid/gougou_picnews.html


 


这里我们查看他的源代码,可以得到如下代码


 


 


<style type="text/css">
* { margin:0;padding:0;}
html { background:#FFFFFF;}
body { text-align:left;font:normal 12px/1.6em simsun, Verdana, Lucida, Arial, Helvetica, sans-serif;color:#353535;}
ol,ul { list-style:none;}
a { text-decoration:none;color:#353535;}
a:hover { color:#CD0102;}
img { border:0 none;}


.flashNews { position:relative;width:370px;height:225px;margin-bottom:12px;overflow:hidden;}
.flashNews img { display:block;width:370px;height:225px;overflow:hidden;}
.flashNews .bg { position:absolute;left:0;bottom:0;_bottom:-1px;width:370px;height:73px;background:#000000;filter:alpha(opacity=39);-moz-opacity:0.39;opacity:0.39;}
.flashNews h3 { position:absolute;left:10px;top:155px;width:354px;height:35px;line-height:35px;z-index:2;}
.flashNews h3 a { font-size:20px;font-family:"黑体";font-weight:normal;color:#FFFFFF;}
.flashNews h3 a:hover { color:#F20000;}
.flashNews p { position:absolute;left:10px;top:185px;width:354px;height:20px;line-height:20px;;z-index:2;}
.flashNews p a { color:#FFFFFF;}
.flashNews p a:hover { color:#F20000;}
.flashNews .pager { position:absolute;right:0;bottom:0;_bottom:-1px;padding-left:47px;_padding-left:46px;background:url(img/flashPage_bg.png) 0 0 no-repeat;z-index:2;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/flashPage_bg.png',sizingMethod='crop')}
.flashNews .pager a { float:left;width:15px;height:18px;font-size:10px;font-family:Tahoma;font-weight:bold;color:#FFFFFF;text-align:center;margin-left:1px;background:#000000;}
.flashNews .pager a:hover, .flashNews .pager a.currA { color:#F20000;}
</style>
<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/prototype.js"></script>
<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/effect_switcher_1104.js"></script>
<title>资讯推荐</title>
<base target="_blank">
</head>


<body>
<div class="flashNews">
 <div id="SwitchPicContainer"></div>
 <h3 id="SwitchTitle_title"></h3>
    <p id="SwitchTitle_stitle"></p>
 <div id="FlashSwitchPageNav" class="pager"></div>
 <div class="bg"></div>
</div>
<script>
 var PicData = new Array() ;
 var i = 0 ;
PicData[i] = new Array() ;
PicData[i]['img'] = 'http://images.movie.xunlei.com/gallery/496/0cdd77e83cc7d4633a540e53b66aee13.jpg' ;
PicData[i]['title'] = '巩俐全新《时尚芭莎》写真' ;
PicData[i]['stitle'] = '冷艳艺妓造型' ;
PicData[i]['link'] = 'http://ent.xunlei.com/star/contents/f5/323634.shtml' ;
PicData[i]['blockid'] = '1727' ;
i++
PicData[i] = new Array() ;
PicData[i]['img'] = 'http://images.movie.xunlei.com/gallery/496/fa52113f72185831fa825be7d4aa6cfa.jpg' ;
PicData[i]['title'] = '盘点影视剧中的美艳女妖' ;
PicData[i]['stitle'] = '勾魂夺魄妖媚不可方物' ;
PicData[i]['link'] = 'http://ent.xunlei.com/star/contents/df/323318.shtml' ;
PicData[i]['blockid'] = '1727' ;
i++
PicData[i] = new Array() ;
PicData[i]['img'] = 'http://images.movie.xunlei.com/gallery/496/ef904d3dc496b7dc53b67580e1e22390.jpg' ;
PicData[i]['title'] = '悉数那些令人难忘的电视剧' ;
PicData[i]['stitle'] = '80后美好的回忆' ;
PicData[i]['link'] = 'http://ent.xunlei.com/star/contents/bb/321978.shtml' ;
PicData[i]['blockid'] = '1727' ;
i++
PicData[i] = new Array() ;
PicData[i]['img'] = 'http://images.movie.xunlei.com/gallery/496/50efe419a3b1e000ba22bfb71b74a2ad.jpg' ;
PicData[i]['title'] = '芙蓉姐姐最新照震撼曝光' ;
PicData[i]['stitle'] = '大鹏展翅秀兰花指' ;
PicData[i]['link'] = 'http://ent.xunlei.com/star/contents/a0/321731.shtml' ;
PicData[i]['blockid'] = '1727' ;
i++
PicData[i] = new Array() ;
PicData[i]['img'] = 'http://images.movie.xunlei.com/gallery/496/0e6d0b490c80d9d8dab42a1d7058a842.jpg' ;
PicData[i]['title'] = '铃木亚美超可爱粉红写真' ;
PicData[i]['stitle'] = '俏丽动人粉嫩魅惑' ;
PicData[i]['link'] = 'http://ent.xunlei.com/star/contents/dd/321189.shtml' ;
PicData[i]['blockid'] = '1727' ;



 FlashSwitch.init({
        Container:"SwitchPicContainer" ,
        Data:PicData,
        PageNav:"FlashSwitchPageNav",
        Titles:['title','stitle'],
        TimeIntval:3000
       }) ;
  </script>


 


 


经分析上面的红色代码我们可以看得出此代码具有一定的规律性,完全可以用sql标签来得到红色部分的代码.该幻灯特效的每对脚本数组由图片(img)+标题(title)+简短标题(stitle)+文章的链接(link)+文章ID号(blockid)组成,这里我们以文章模型为例来构造sql语句


 


sql语句: select top 5 id,title,intro,picurl from KS_Article Where picnews=1 and slide=1 and verific=1 order by id desc


 


以上的sql语句中表示仅查询出具有幻灯属性并且是含有首页图片的文章.


 


sql语句的条件说明



  • top 5          ---查询出5条

  • picnews=1   ---图片文章

  • slide=1       ---具体幻灯属性

  • verific=1     ---已通过审核的文章

  • order by id desc ---按文章ID号降序,即最后添加的文章,排列在最前面

在建立sql标签时,标签名称请自取,ajax输出请选择否,点击下一步,输入上面的sql语句.再点击下一步,到了填写循环体这一步


 


 


以下更精彩...


 


 
 
一分钟快速开通线上知识店铺
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
小林 当前离线

233

主题

0

广播

2

粉丝
添加关注
级别:二年级

用户积分:2186 分
登录次数:88 次
注册时间:2008/7/19
最后登录:2014/1/11
小林 发表于：2008/12/19 19:10:00   | 显示全部帖子 查看该作者主题 沙发 
科汛智能建站系统
做线上考试培训 就选#科汛网校

到了这一步,也是关键的一步,就是制作标签的循环体了.


我们可以将以上代码直接放在sql标签的循环体里.也可以将样式css和及脚本js直接放在模板里分别调用.


 


<style type="text/css">
* { margin:0;padding:0;}
html { background:#FFFFFF;}
body { text-align:left;font:normal 12px/1.6em simsun, Verdana, Lucida, Arial, Helvetica, sans-serif;color:#353535;}
ol,ul { list-style:none;}
a { text-decoration:none;color:#353535;}
a:hover { color:#CD0102;}
img { border:0 none;}


.flashNews { position:relative;width:370px;height:225px;margin-bottom:12px;overflow:hidden;}
.flashNews img { display:block;width:370px;height:225px;overflow:hidden;}
.flashNews .bg { position:absolute;left:0;bottom:0;_bottom:-1px;width:370px;height:73px;background:#000000;filter:alpha(opacity=39);-moz-opacity:0.39;opacity:0.39;}
.flashNews h3 { position:absolute;left:10px;top:155px;width:354px;height:35px;line-height:35px;z-index:2;}
.flashNews h3 a { font-size:20px;font-family:"黑体";font-weight:normal;color:#FFFFFF;}
.flashNews h3 a:hover { color:#F20000;}
.flashNews p { position:absolute;left:10px;top:185px;width:354px;height:20px;line-height:20px;;z-index:2;}
.flashNews p a { color:#FFFFFF;}
.flashNews p a:hover { color:#F20000;}
.flashNews .pager { position:absolute;right:0;bottom:0;_bottom:-1px;padding-left:47px;_padding-left:46px;background:url(img/flashPage_bg.png) 0 0 no-repeat;z-index:2;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/flashPage_bg.png',sizingMethod='crop')}
.flashNews .pager a { float:left;width:15px;height:18px;font-size:10px;font-family:Tahoma;font-weight:bold;color:#FFFFFF;text-align:center;margin-left:1px;background:#000000;}
.flashNews .pager a:hover, .flashNews .pager a.currA { color:#F20000;}
</style>
<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/prototype.js"></script>
<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/effect_switcher_1104.js"></script>
<title>资讯推荐</title>
<base target="_blank">
</head>


<body>
<div class="flashNews">
 <div id="SwitchPicContainer"></div>
 <h3 id="SwitchTitle_title"></h3>
    <p id="SwitchTitle_stitle"></p>
 <div id="FlashSwitchPageNav" class="pager"></div>
 <div class="bg"></div>
</div>
<script>
 var PicData = new Array() ;
 var i = 0 ;
[loop=5]
PicData[i] = new Array() ;
PicData[i]['img'] = '{$Field(picurl,Text,0,...,0,/images/nopic.gif)}' ;
PicData[i]['title'] = '{$Field(title,Text,0,...,0,)}' ;
PicData[i]['stitle'] = '{$Field(intro,Text,50,...,2,)}' ;
PicData[i]['link'] = '{$Field(id,GetInfoUrl,1,1)}' ;
PicData[i]['blockid'] = '{$Field(id,GetInfoUrl,1,2)}' ;
i++
[/loop]


 FlashSwitch.init({
        Container:"SwitchPicContainer" ,
        Data:PicData,
        PageNav:"FlashSwitchPageNav",
        Titles:['title','stitle'],
        TimeIntval:3000
       }) ;
  </script>


您只需要简单的将上面部分代码放到循环里,最后保存即可.


 


请注意上面红色粗体字的构造.这里放了


[loop=5]


...


[/loop]


 


即表示将红色那部分代码循环5次输出,最终得到如一楼所讲的完整代码。


 


最后一步就是在你的模板里调用这个标签了,调用方式为:{SQL_标签名称()},如果你看不到效果,可能是由于你没有添加具体幻灯属性并且包含图片的文章,请先添加再测试。


 


为避免迅雷网站将以下两个JS文件删除,我已将它下载下来,您只需把它放在ks_inc目录下,并将以下代码


<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/prototype.js"></script>
<script type="text/javascript" src="http://images.movie.xunlei.com/jsframe/effect_switcher_1104.js"></script>


更改为


<script src="/ks_inc/ks_slide.js"></script>


 


 下载信息  [文件大小：1.63 KB 下载次数： 次]
点击下载文件:ks_slide


 


 


希望以上教程对您能起到抛砖引玉的作用。


 


 
 
做新职业技能培训平台 就选#科汛网校
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
＜上一主题 | 下一主题 ＞
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.09570秒 powered by KesionCMS 9.0