码迷,mamicode.com
首页 > 其他好文 > 详细

如何使用myFocus插件制作焦点图效果

时间:2014-08-04 13:26:47      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   java   使用   文件   代码   html   

焦点图分有:flash焦点图  js焦点图  css焦点图  jQ焦点图(其中jQ焦点图以代码量少,实现功能成为首选);

myFocus是一款专注于焦点图制作的js插件;

使用步骤:点击下载——Demo显示打包下载——点击 下载的链接——下载

注:在引用myFocus插件时只需要把下载后myFocus的整个js文件复制到自己的站点的js里即可;

js部分:

<script type="js/myfocus-2.0.1.min.js" type="text/javascript"></script>    //引用myfocus插件库

<script type="js/mf-pattern/mF-YSlider.js" type="text/javascript"></script>    //引入myfocus插件中所需的js效果

<link href="js/mf-pattern/mF-YSlider.css" type="text/css" rel="stylesheet"/>    //引入myfocus插件中所需的css样式

<script type="text/javascript">

  myFocus.set({

    id:‘picBox‘         //焦点图初始化,其Id名要与图片列表最外层的Id一致

  });

</script>

 

CSS部分:暂时不写

html部分:

<div class="ad" id="picBox">

  <div class="loading"><img src="images/loading.gif" alt="图片加载中"/></div>    //显示加载过程

  <div class="pic">     //为实现焦点图的切换效果,图片列表外面必须要包裹一个class为pic的div

    <ul>

      <li><img src="images/ad1.jpg"/></li>

      <li><img src="images/ad2.jpg"/></li>

      <li><img src="images/ad3.jpg"/></li>

    </ul>

  </div>

</div>

 

更多关于myFocus插件的使用到:http://demo.jb51.net/myfocus/tutorials.html

如何使用myFocus插件制作焦点图效果,布布扣,bubuko.com

如何使用myFocus插件制作焦点图效果

标签:style   http   color   java   使用   文件   代码   html   

原文地址:http://www.cnblogs.com/hsp09/p/3889540.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!