1. 首页
  2. 编程与技术

js插件-图片椭圆轮播效果示例

发布于 2015-05-25 09:57:01 | 222 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

插件效果图：

html 代码如下：

 <div id="container">
        <img src="images/cartoon/1.jpg" />
        <img src="images/cartoon/2.jpg" />
        <img src="images/cartoon/3.jpg" />
        <img src="images/cartoon/4.jpg" />
        <img src="images/cartoon/5.jpg" />
        <img src="images/cartoon/6.jpg" />
        <img src="images/cartoon/7.jpg" />
        <img src="images/cartoon/8.jpg" />
        <img src="images/cartoon/9.jpg" />
        <img src="images/cartoon/10.jpg" />
        <img src="images/cartoon/11.jpg" />
        <img src="images/cartoon/12.jpg" />
        <img src="images/cartoon/13.jpg" />
        <img src="images/cartoon/14.jpg" />
        <img src="images/cartoon/15.jpg" />

    </div>

css代码如下：

  
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #efd;
}
#container {
    width: 800px;
    height: 400px;
    position: relative;
    margin: 50px auto;
}

js Carousel类代码：

var Carousel = function (options) {

            this.settings = {
                imgs: [],
                imgWidth: 150,              //图片宽
                imgHeight: 100,             //图片高
                time: 0,
                rate: 0.5,                  //转动速度
                containerId: "container",   //包含图片容器id
                containerWidth: 800,        //包含图片容器宽
                containerHeight: 300,       //包含图片容器高
            };

            for (var item in options) {         //extend
                if (options.hasOwnProperty(item)) {
                    this.settings[item] = options[item];
                }
            }


            this.init.apply(this, arguments); //init
        };

        Carousel.prototype = {

            each: function (fn) {
                for (var index = 0; index < this.settings.imgs.length; index++)
                    fn.call(this.settings.imgs[index], index);
            },
            init: function () {
                var _this = this;

                this.settings.imgs = document.getElementById(this.settings.containerId).getElementsByTagName("img");

                this.each(function (index) {
                    this.style.width = _this.settings.imgWidth + "px";
                    this.style.height = _this.settings.imgHeight + "px";
                    this.style.position = "absolute";
                });

                document.onmousemove = function (event) {
                    var event = event || window.event, positionX;
                    var positionX = _this.getPageX(event);
                    console.log(positionX);
                    _this.settings.rate = (positionX - document.body.clientWidth / 2) / (document.body.clientWidth / 2) * 0.25;
                }
                this.play();
            },
            getPageX: function (event) {

                if (event.pageX) {
                    return event.pageX;
                } else {
                    return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
                }
            },
            play: function () {
                var _this = this;
                setInterval(function () {
                    var that = _this.settings;
                    that.count = _this.settings.imgs.length;
                    that.time += that.rate * 40 / 1000;
                    _this.each(function (index) {            //算法BaiDu所得
                        this.style.left = (Math.sin(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerWidth - that.imgWidth) / 2 + "px";
                        this.style.top = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerHeight - that.imgHeight) / 2 + "px";
                        this.style.width = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgWidth / 2 + that.imgWidth / 2 + "px";
                        this.style.height = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgHeight / 2 + that.imgHeight / 2 + "px";
                        this.style.zIndex = Math.floor((Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * 10);
                    })
                }, 40);
            }
        };

最后 调用代码：

window.onload = function () {
            new Carousel();
        }

页面最终代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #efd;
        }
        #container {
            width: 800px;
            height: 400px;
            position: relative;
            margin: 50px auto;
        }

    </style>
    <script>
        var Carousel = function (options) {

            this.settings = {
                imgs: [],
                imgWidth: 150,              //图片宽
                imgHeight: 100,             //图片高
                time: 0,
                rate: 0.5,                  //转动速度
                containerId: "container",   //包含图片容器id
                containerWidth: 800,        //包含图片容器宽
                containerHeight: 300,       //包含图片容器高
            };

            for (var item in options) {         //extend
                if (options.hasOwnProperty(item)) {
                    this.settings[item] = options[item];
                }
            }


            this.init.apply(this, arguments); //init
        };

        Carousel.prototype = {

            each: function (fn) {
                for (var index = 0; index < this.settings.imgs.length; index++)
                    fn.call(this.settings.imgs[index], index);
            },
            init: function () {
                var _this = this;

                this.settings.imgs = document.getElementById(this.settings.containerId).getElementsByTagName("img");

                this.each(function (index) {
                    this.style.width = _this.settings.imgWidth + "px";
                    this.style.height = _this.settings.imgHeight + "px";
                    this.style.position = "absolute";
                });

                document.onmousemove = function (event) {
                    var event = event || window.event, positionX;
                    var positionX = _this.getPageX(event);
                    console.log(positionX);
                    _this.settings.rate = (positionX - document.body.clientWidth / 2) / (document.body.clientWidth / 2) * 0.25;
                }
                this.play();
            },
            getPageX: function (event) {

                if (event.pageX) {
                    return event.pageX;
                } else {
                    return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
                }
            },
            play: function () {
                var _this = this;
                setInterval(function () {
                    var that = _this.settings;
                    that.count = _this.settings.imgs.length;
                    that.time += that.rate * 40 / 1000;
                    _this.each(function (index) {
                        this.style.left = (Math.sin(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerWidth - that.imgWidth) / 2 + "px";
                        this.style.top = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerHeight - that.imgHeight) / 2 + "px";
                        this.style.width = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgWidth / 2 + that.imgWidth / 2 + "px";
                        this.style.height = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgHeight / 2 + that.imgHeight / 2 + "px";
                        this.style.zIndex = Math.floor((Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * 10);
                    })
                }, 40);
            }
        };

        window.onload = function () {
            new Carousel();
        }

    </script>


</head>
<body>

    <div id="container">
        <img src="images/cartoon/1.jpg" />
        <img src="images/cartoon/2.jpg" />
        <img src="images/cartoon/3.jpg" />
        <img src="images/cartoon/4.jpg" />
        <img src="images/cartoon/5.jpg" />
        <img src="images/cartoon/6.jpg" />
        <img src="images/cartoon/7.jpg" />
        <img src="images/cartoon/8.jpg" />
        <img src="images/cartoon/9.jpg" />
        <img src="images/cartoon/10.jpg" />
        <img src="images/cartoon/11.jpg" />
        <img src="images/cartoon/12.jpg" />
        <img src="images/cartoon/13.jpg" />
        <img src="images/cartoon/14.jpg" />
        <img src="images/cartoon/15.jpg" />

    </div>

</body>
</html>


最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务