文档章节

jQuery图片轮播加悬停效果

mymlucifer
 mymlucifer
发布于 2015/03/18 14:17
字数 655
阅读 49
收藏 0

jQuery图片轮播加悬停效果

dreamweaver免费视频教程:

51RGB Dreamweaver板块

加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货!

 

使用方法

1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面中链接到这个样式表文件

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

2.添加jquery.SuperSlide2.js

<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>

3.添加图片效果js(可根据实际情况整理到外部js文件中)

$(document).ready(function () {

     

    /* 图片滚动效果 */

    $(".mr_frbox").slide({

        titCell: "",

        mainCell: ".mr_frUl ul",

        autoPage: true,

        effect: "leftLoop",

        autoPlay: true,

        vis: 4

    });

     

    /* 鼠标悬停图片效果 */

    $(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());

    $("li").mouseout(function (e) {

        if ((e.pageX < $(this).offset().left || e.pageX > ($(this).offset().left + $(this).width())) || (e.pageY < $(this).offset().top || e.pageY > ($(this).offset().top + $(this).height()))) {

            $(this).find('.mr_zhe_i').show();

            $(this).find('.mr_zhe_hover').hide().stop().animate({ top: '190px' }, { queue: false, duration: 190 });

            return false;

        }

 

    });

    $('.mr_zhe').mouseover(function (event) {

        $(this).find('.mr_zhe_i').hide();

        $(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });

        return false;

    });

     

});

 

4.html部分

<div class="friend">

    <div class="mr_frbox">

        <img class="mr_frBtnL prev" src="images/mfrl.gif" />

        <div class="mr_frUl">

            <ul id="mr_fu">

                <li><a href="http://www.jq22.com/">

                    <img src="images/i.jpg" />

                </a>

                    <div class="mr_zhe">

                        <div class="mr_zhe_i">

                            <h1>

                                I</h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                        <div class="mr_zhe_hover">

                            <h1>

                                <img src="images/plus.gif"></h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                    </div>

                </li>

                <li><a href="http://www.jq22.com/">

                    <img src="images/i2.jpg" />

                </a>

                    <div class="mr_zhe">

                        <div class="mr_zhe_i">

                            <h1>

                                E</h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                        <div class="mr_zhe_hover">

                            <h1>

                                <img src="images/plus.gif"></h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                    </div>

                </li>

                <li><a href="http://www.jq22.com/">

                    <img src="images/i3.jpg" />

                </a>

                    <div class="mr_zhe">

                        <div class="mr_zhe_i">

                            <h1>

                                S</h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                        <div class="mr_zhe_hover">

                            <h1>

                                <img src="images/plus.gif"></h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                    </div>

                </li>

                <li><a href="http://www.jq22.com/">

                    <img src="images/i4.jpg" />

                </a>

                    <div class="mr_zhe">

                        <div class="mr_zhe_i">

                            <h1>

                                A</h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                        <div class="mr_zhe_hover">

                            <h1>

                                <img src="images/plus.gif"></h1>

                            <div class="mr_zhe_p">

                                <h3>

                                    <span>家居软装设计概念</span>Introduction soft home design</h3>

                            </div>

                        </div>

                    </div>

                </li>

            </ul>

        </div>

        <img class="mr_frBtnR next" src="images/mfrr.gif" />

    </div>

</div>

 

代码压缩包下载地址:

http://www.51rgb.com/nbbs/thread-1712-1-1.html

光看文字怎么够 来看在线视频 手把手教你做网站!

Adobe官方讲师万晨曦指导 轻松幽默学习网站开发

Dreamweaver视频直达网址 51RGB Dreamweaver板块

 

 


© 著作权归作者所有

mymlucifer
粉丝 7
博文 61
码字总数 26911
作品 0
南昌
私信 提问
2013 年最好的 20 款免费 jQuery 插件

互联网上面有很多 jQuery 插件,这里我们收集的是 2013 年最好的 20 款免费 jQuery 插件,这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现今互联网市场上提供很多 jQuery...

oschina
2014/01/11
12.9K
24
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
7 个简单实用的 jQuery 图片播放器

在网页特效中,我们经常会遇到需要循环播放图片的情况,比如首页上的广告轮播或者相册浏览等。如何简单的实现一款漂亮平滑的图片播放插件呢?下面就介绍几款非常不错的jQuery图片播放插件,希...

tp_wire
2012/08/14
7.3K
5
6 个效果震撼的 jQuery 图片播放器

很多时候,尤其是当我们需要展示或者宣传自己的产品时,我们都会用到图片轮播的特效,但是,选择什么样的图片播放器更实用、更美观、更大气呢?下面就给大家推荐几款简单实用却又美观大气的j...

tp_wire
2012/07/04
6.3K
10

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
7
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
6
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
9
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部