账号通
    

注册

找回密码

账号  

密码  

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

41871

查看

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) 回到顶部顶端 回到底部底部
joder 当前离线

2

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:230 分
登录次数:3 次
注册时间:2009/6/29
最后登录:2009/7/10
joder 发表于：2009/7/10 14:22:00   | 只看该作者 查看该作者主题 沙发 
有生源 找课程 就上科汛课堂街!
good,very good
 
做官网 就用科汛智能建站系统!
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
cnhuangpeng 当前离线

898

主题

0

广播

0

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

用户积分:4530 分
登录次数:550 次
注册时间:2009/5/23
最后登录:2012/5/24
cnhuangpeng 发表于：2009/6/12 0:03:00   | 只看该作者 查看该作者主题 藤椅 
做在线知识付费 选科汛云开店
有课程 找生源 就上科汛课堂街
a
 
做官网 就用科汛智能建站系统!
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
bdz0565 当前离线

101

主题

0

广播

1

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

用户积分:1356 分
登录次数:139 次
注册时间:2007/10/30
最后登录:2014/5/12
bdz0565 发表于：2009/3/27 22:46:00   | 只看该作者 查看该作者主题 板凳 
科汛在线网校系统
做考试题库 就用#科汛在线考试系统!

胡扯,我添了很多都看不到效果

 
 
有课程 找生源 就上科汛课堂街
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
po119 当前离线

41

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:518 分
登录次数:38 次
注册时间:2009/3/3
最后登录:2015/2/28
po119 发表于：2009/3/17 17:13:00   | 只看该作者 查看该作者主题 报纸 
科汛智能建站系统
有课程 找生源 就上科汛课堂街

好贴！谢谢@
 
有课程 找生源 就上科汛课堂街
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
po119 当前离线

41

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:518 分
登录次数:38 次
注册时间:2009/3/3
最后登录:2015/2/28
po119 发表于：2009/5/1 9:36:00   | 只看该作者 查看该作者主题 地板 
有生源 找课程 就上科汛课堂街!

求解！

以前还可以显示~从昨天开始就不显示了

是怎么回事？

我什么都没动~

急求解答！谢谢！小林~
 
科汛商学院助您快速入门
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
licuanyu21 当前离线

25

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:370 分
登录次数:14 次
注册时间:2008/12/3
最后登录:2010/10/23
licuanyu21 发表于：2009/3/8 12:44:00   | 只看该作者 查看该作者主题 7楼 
科汛在线网校系统
一分钟快速开通线上知识店铺

ding

 
 
做新职业技能培训平台 就选#科汛网校
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
mt56 当前离线

4985

主题

53

广播

17

粉丝
添加关注
级别:版主

用户积分:23430 分
登录次数:1621 次
注册时间:2007/2/10
最后登录:2022/9/28
mt56 发表于：2009/3/28 15:28:00   | 只看该作者 查看该作者主题 8楼 
做考试题库 就用#科汛在线考试系统!

<script src="http://www.beijing2008.cn/upload/cms_owrp2/column_cn/beijing2008_flashobj.js"

type="text/javascript"></script>  
<div id="sasFlashFocus27"></div>
<script>
var sohuFlash2 = new sohuFlash("demo7.swf", "27", 522, 245, "7");
sohuFlash2.addParam("quality", "high");
sohuFlash2.addParam("wmode", "opaque");
sohuFlash2.addVariable

("image","http://img10.beijing2008.cn/20080824/Img214583321.jpg|http://img09.beijing2008.cn/20080824/Im

g214584189.jpg|http://img03.beijing2008.cn/20080824/Img214584321.jpg|http://img06.beijing2008.cn/200808

24/Img214584398.jpg");
sohuFlash2.addVariable

("image2","http://img03.beijing2008.cn/20080824/Img214583314.jpg|http://img03.beijing2008.cn/20080824/I

mg214584193.jpg|http://img04.beijing2008.cn/20080824/Img214584357.jpg|http://img00.beijing2008.cn/20080

824/Img214584410.jpg");
sohuFlash2.addVariable

("url","http://www.beijing2008.cn/ceremonies/headlines/n214582800.shtml|http://www.beijing2008.cn/cerem

onies/headlines/n214583588.shtml|http://www.beijing2008.cn/ceremonies/headlines/n214584910.shtml|http:/

/www.beijing2008.cn/ceremonies/headlines/n214583501.shtml");
sohuFlash2.addVariable("info", "北京奥运会闭幕式文艺表演|北京奥运会圣火熄灭|奥林匹克会旗交接|2012年相约

伦敦");

sohuFlash2.addVariable("stopTime","5000");
sohuFlash2.write("sasFlashFocus27");
</script>

 

 

不知道这个效果怎么写？
 
科汛商学院助您快速入门
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
view360 当前离线

51

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:272 分
登录次数:26 次
注册时间:2008/11/13
最后登录:2009/12/16
view360 发表于：2009/3/7 16:06:00   | 只看该作者 查看该作者主题 9楼 
科汛在线考试系统(NET)
做考试题库 就用#科汛在线考试系统!
不是啦  
 
做考试题库 就用#科汛在线考试系统!
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
view360 当前离线

51

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:272 分
登录次数:26 次
注册时间:2008/11/13
最后登录:2009/12/16
view360 发表于：2009/3/7 16:06:00   | 只看该作者 查看该作者主题 10楼 
科汛在线商城系统(NET)
有课程 找生源 就上科汛课堂街
哇,还有这个,刚刚看到
 
做官网 就用科汛智能建站系统!
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
＜上一主题 | 下一主题 ＞
<< 返回列表
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.29297秒 powered by KesionCMS 9.0