知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    仿QQ商城点击左右滚动jquery焦点图特效

    作者:佳明妈 来源:油脂设备 2012-03-06 人气:
    原作者: 54173BLOG 54173BLOG作者写的这个仿QQ商城点击左右滚动jquery焦点图特效插件灰常给力,不过作者并没有给封装成点击左右滚动的jquery插件。我们在建设网站的时候一个页面如果多次

    原作者:54173BLOG

    54173BLOG作者写的这个仿QQ商城点击左右滚动jquery焦点图特效插件灰常给力,不过作者并没有给封装成点击左右滚动的jquery插件。我们在建设网站的时候一个页面如果多次调用这个jquery特效的时候,就麻烦了,懒人建站,使用的时候随手做了一下简单的jquery插件封装,分享给大家,希望能再你建设网站的时候给你带来方便。

    修改的几个地方:1、隐藏了半透明背景条,2、把那个小常条滑块读出了1234这些数字。 你不喜欢这样你可以修改样式和自己改动下jquery代码。

    调用方法:很简单,$.focus("#focus001");  会css的都明白 #focus001 这是ID 一些参数设置,可以修改js中的设置,源作者已经注释的很清楚了。
    html结构如下:
    <div class="focus" id="focus001">
            <ul>
                <li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/03.jpg" alt="jquery特效" /></a></li>
                <li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/02.jpg" alt="懒人建站" /></a></li>
                <li><a href="http://www.51xuediannao.com/" target="_blank"><img src="img/03.jpg" alt="仿QQ商城点击左右滚动jquery焦点图特效" /></a></li>
            </ul>
        </div>

    调用js代码:
    <script type="text/javascript">
        $(document).ready(function(){
              $.focus("#focus001");
            $.focus("#focus002");
        });
    </script>

    压缩包中js/sl.js 是 jquery焦点图特效插件代码。

     

    ↓ 查看全文

    仿QQ商城点击左右滚动jquery焦点图特效由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    仿QQ商城点击左右滚动jquery焦点图特效-最新评论