账号通
    

账号  

密码  

272928

查看

706

回复
主题:分享一个世上最全面的幻灯片效果,并附上标签,超级简单!23种样式,自定义高宽,任意切换样式,申精!!! [收藏主题] 转到:  
蝎子 当前离线

149

主题

0

广播

4

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

用户积分:576 分
登录次数:49 次
注册时间:2010/11/1
最后登录:2019/2/25
蝎子 发表于:2011/3/22 13:06:59   | 显示全部帖子 查看该作者主题 楼主 
做在线知识付费 选科汛云开店

分享一个世上最全面的幻灯片效果,并附上标签,超级简单!申精!!!



myFocus一共有23款幻灯片风格,一定会有你喜欢的,而且可以随意更换幻灯片样式,就如同切换论坛风格似的,也可以自定义宽度、高度、添加任意多的图片甚至是各种动画缓冲效果,如果你不满意他自带的效果,你还可以自定义动画,厉害吧?



演示地址:http://705e.ul.tcp.cc/myfocus/demo.html



演示效果:

点击查看原图

点击查看原图

点击查看原图

点击查看原图



首先得感谢JS的作者koen lee,关于myFocus的介绍如下:



myFocus是一个专注于焦点图/轮换图制作的JS库(或是叫工具集比较合适?),它小巧而且是完全独立的JS库,大概是6~7KB左右的大小(min版),用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左右),功能也十分的完备,因为是轻量级,其运行效率也比常见的焦点图要高点,最重要的一点是,用myFocus制作出的焦点图使用十分的简单方便,而且每个焦点图的接口/结构都是通用的,这样,只用1~2秒时间就给网站换不同风格的焦点图成为了可能。



关于如何在科讯CMS中使用myFocus,只需要四步!



Step 1、在html的<head>标签内引入myFocus库和风格应用文件

  1. <script type="text/javascript" src="myfocus-1.0.4.min.js"></script><!--首先引入myFocus库-->
  2. <script type="text/javascript" src="pattern/mF_name.js"></script><!--引入风格应用js-->
  3. <link rel="stylesheet" href="pattern/mF_name.css" /><!--引入风格应用css-->

(为了使用方便,myFocus库文件和风格应用文件都已托管在谷歌code,大家可以直接引入使用)



Step 2、创建标准的(myFocus)html结构,并填充你的内容(tip1:例子li数为5,实际可随意增减,但至少为2)



  1. <div id="boxID"><!--焦点图盒子-->
  2. {LB_幻灯片}</div>



Step 3、在step1代码之后的任意一个位置调用(建议在<head>标签结束前调用)



  1. //你可以简单参数调用:
  2. <script type="text/javascript">
  3. myFocus.set({
  4. id:'boxID',//焦点图盒子ID
  5. pattern:'mF_name',//风格应用的名称
  6. time:3,//切换时间间隔(秒),省略设置即不自动切换
  7. width:450,//设置宽度(主图区)
  8. height:296//设置高度(主图区)
  9. });
  10. </script>
  1. //或详细一点的参数调用(推荐):
  2. <script type="text/javascript">
  3. myFocus.set({
  4. id:'boxID',//焦点图盒子ID
  5. pattern:'mF_name',//风格应用的名称
  6. time:3,//切换时间间隔(秒),省略设置即不自动切换
  7. trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停),默认'click'
  8. width:450,//设置宽度(主图区)
  9. height:296,//设置高度(主图区)
  10. txtHeight:'default'//文字层高度设置,'default'为默认高度,0为隐藏,默认'default'
  11. });
  12. </script>



Step 4、在科讯后台中新建标签,命名为幻灯片,具体代码如下:



以下内容只有回复后才可以浏览,请先登录!

点评 3

说得很好:5.0     
licaifuwu 已经做出插件 无需这么麻烦 http://bbs.kesion.com/forumthread-486751.html 威望+1 发表于 2012/7/2 16:01:00 
yelom 说得很好:5
支持好东西! 威望+1 发表于 2011/10/24 10:26:00 
 
  支持(44) | 反对(39) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.07813秒 powered by KesionCMS 9.0