jquery动画 -- 6.制作带鼠标和键盘引导功能的图片浏览器-阿里云开发者社区

开发者社区> bill.kang> 正文

jquery动画 -- 6.制作带鼠标和键盘引导功能的图片浏览器

简介:   今天我们要介绍的jquery动画效果是,当移动鼠标或者按键盘的左右键时,图片走廊中的图片向相应方向转动。   先来看张效果图,教程最后附有demo,大家可以下载。   首先要做的工作是创建html文本。
+关注继续查看

  今天我们要介绍的jquery动画效果是,当移动鼠标或者按键盘的左右键时,图片走廊中的图片向相应方向转动。

  先来看张效果图,教程最后附有demo,大家可以下载。

  首先要做的工作是创建html文本。

<div id="proximity">
        <img src="img/proximity1.jpg" alt="CH-47 Chinook" />
        <img src="img/proximity2.jpg" alt="Mi-24W" />
        <img src="img/proximity3.jpg" alt="Mil Mi-24A" />
        <img src="img/proximity4.jpg" alt="AH-1J Cobra" />
        <img src="img/proximity5.jpg" alt="Mi-24P" />
        <img src="img/proximity6.jpg" alt="AH-1Z Viper" />
        <img src="img/proximity7.jpg" alt="AH-1W Cobra" />
        <img src="img/proximity8.jpg" alt="UH-1Y Huey" />
        <img src="img/proximity9.jpg" alt="AH-64 Apache" />
        <img src="img/proximity10.jpg" alt="AH-1W Super Cobra" />
        <img src="img/proximity11.jpg" alt="MI-28 Havoc" />
        <img src="img/proximity12.jpg" alt="AH-1W Super Cobra" />
    </div>

  内容很简单就是一个div,里面包含12张图片。接下来是添加css。

<style type="text/css">
    /* base classes (scripting disabled) */
    #proximity
    {
        width: 960px;
        margin: auto;
        border: 1px solid #000;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }
    #proximity img
    {
        border: 1px solid #000;
    }
    /* scripting enabled classes */
    #proximity.slider
    {
        width: 650px;
        height: 250px;
        position: relative;
        overflow: hidden;
    }
    .slider #scroller
    {
        position: absolute;
        left: 0;
        top: 0;
    }
    .slider #scroller img
    {
        display: block;
        width: 150px;
        height: 150px;
        margin: 50px 0 0 50px;
        float: left;
        color: #fff;
        background-color: #000;
    }
    .slider #scroller img:first-child
    {
        margin-left: 0;
    }
    #message
    {
        width: 100%;
        height: 30px;
        padding-top: 10px;
        margin: 0;
        -moz-border-radius: 0 0 8px 8px;
        -webkit-border-bottom-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        border-radius: 0 0 8px 8px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #000;
        color: #fff;
        text-align: center;
        font: 18px "Nimbus Sans L" , "Helvetica Neue" , "Franklin Gothic Medium" , Sans-serif;
    }
</style>

  css也很简单,border-radius是css3新增加的属性,可以为边框实现圆角效果,大家可以去网上查相关的api。

  html有了,css有了,现在就差js代码了。首先我们是定义一些我们需要使用到的js对象。

//获取总的容器对象
var prox = $('#proximity'),
//为图片创建一个新的容器对象
scroller = $('<div></div>', {
    id: 'scroller'
}),
//鼠标提示信息
pointerText = 'Use your pointer to scroll, moving to the edge scrolls faster!',
//键盘提示信息
keyboardMessage = "Use your arrow keys to scroll the images!",
//提示信息容器,默认显示键盘提示信息
message = $("<p></p>", {
    id: "message",
    text: keyboardMessage
});

//将新创建的图片容器对象scroller添加到prox里面,让他包含图片
//同时将提示文本信息添加到prox里面
prox.addClass('slider').wrapInner(scroller).append(message);

//计算prox的宽度的一半,存入变量middle
var middle = prox.width() / 2;

//获取新添加的scroller对象
scroller = $('#scroller');
//计算scroller的宽度,计算规则就是所有图片的宽度加上他的margin-left
scroller.width(function () {
    var total = 0;
    scroller.children().each(function (i, val) {
        var el = $(this);
        total = total + (el.outerWidth() + parseInt(el.css('marginLeft')));
    });
    return total;
})
//设置图片居中
.css('left', '-' + (scroller.width() / 2 - middle) + "px");

  接下来是定义图片移动函数goAnim()。

//定义图片移动函数
function goAnim(e) {
    //获取prox的偏移位置
    var offset = prox.offset(),
    //鼠标x轴坐标 减去 prox左偏移量 减去 prox的宽度的一半
    resetOffset = e.pageX - offset.left - middle,
    normalizedDuration = (resetOffset > 0) ? resetOffset : -resetOffset,
    //设置动画时间,实现的效果是鼠标越靠近prox的中间,图片运行越慢
    //鼠标越靠近prox的两边,图片运行越快
    duration = (middle - normalizedDuration) * 50;

    scroller.stop().animate({
        left: (resetOffset < 0) ? 0 : -(scroller.width() - prox.width())
    }, duration, 'linear');
}

  goAnim()通过计算鼠标的位置判断图片是应该向左还是向右滑动,并计算出图片的滑动速度。为了让大家更好的理解resetOffset,e.pageX ,offset.left ,middle这几个对象,我画了下面的简图,希望对大家有帮助。

  接下来要做的就是要设置鼠标移动和按键盘相关的事件方法了。

//设置鼠标进入事件
prox.mouseenter(function (e) {
    //渐隐提示文字
    message.text(pointerText)
            .delay(1000)
            .fadeOut('slow');
    //运行移动方法
    goAnim(e);

    //设置鼠标移动事件
    prox.mousemove(function (event) {
        //运行移动方法
        goAnim(event);
    });
});

//设置鼠标移出事件
prox.mouseleave(function () {
    //鼠标移出动画消失
    scroller.stop();
    //移出鼠标移动事件
    prox.unbind('mousemove');
});

//设置键盘事件
$(document).keydown(function (e) {
    //判断是否按下键盘左右键
    if (e.keyCode === 37 || e.keyCode === 39) {
        //提示文件渐隐
        message.fadeOut('slow');

        //当前没有动画
        if (!scroller.is(':animated')) {
            //设置动画效果,6秒钟完成图片移动到最左或最右
            //按下左键图片移动到最左,按下右键移动到最右
            //最左是通过left:0实现的,最右是通过left: -(scroller.width() - prox.width()
            scroller.stop().animate({
                left: (e.keyCode === 37) ? 0 : -(scroller.width() - prox.width())
            }, 6000, 'linear');
        }
    }
})
//键盘弹起,结束动画
.keyup(function () {
    scroller.stop();
});

  我注释写的比较多,希望对大家理解代码有帮助。有兴趣的朋友可以下载demo观看实际效果。

  demo下载地址:jquery.animate.proximity.rar

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
div加jquery实现iframe标签的功能
  由于最近项目需要,前端后台都完全采用div+css的方式布局。因而左思右想,有什么办法可以替代常用的iframe上下左右的布局方式,而且页面只是局部刷新。参考了许多前辈的资料,并加以整理,因而有了以下的方法。
590 0
C#使用系统的“显示桌面”功能(Shell.Application)
原文 C#使用系统的“显示桌面”功能(Shell.Application) 在 Windows 系统的 任务栏 上的 快速启动栏 里,通常有一个图标  ,点击这个图标,就会切换到桌面。这个图标实际是一个 “Windows Explorer Command” ,用记事本打开这个文件,我们看到如下的内容: [Shell] Command=2 IconFile=explorer.
875 0
仿酷狗音乐播放器开发日志二十——换肤功能背景图片控件的制作(附源码)
转载请说明原出处,谢谢~~           《仿酷狗音乐播放器开发日志二十》里做了换肤功能的一部分,今天完成其他的部分。酷狗的换肤窗口里的背景图可以让用户选择来换图,原酷狗的背景图的小图标,有normal、hover、down等多种状态,鼠标移动上去便会发生变化。
1282 0
C#获取桌面壁纸图片的路径(Desktop Wallpaper)
原文 C#获取桌面壁纸图片的路径(Desktop Wallpaper) 利用 Windows 的 API 获取桌面壁纸的实际路径,使用的是 SystemParametersInfo 这个API,此API的功能非常丰富,壁纸操作只是一斑 。
1062 0
teachable-machine:探索机器学习如何工作,浏览器中实时浏览
教学机器是一个实验,让所有人都非常方便的探索机器学习,在浏览器中实时浏览,不需要编程。学习更多实验,然后亲自尝试它 访问:https://teachablemachine.
812 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载