这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
先看下前几天的动画是如何构造 JS 的:
一直让我困扰的是,我不知道如何去让这个效果 自动播放,或者费了很多周折。这可能叫初始化。
- var photo = function() {
- var index = 0,
- a, b, c, d;
- return {
- show: function() {},
- auto: function() {}
- }
- }
- var aa = photo();
- //基本上是 用return 返回了一些方法。
- // 1:无法初始化就执行 auto。
- // 2:在初始化的时候,我没办法把this指向aa。
- //上面两个问题,会很不方便。
1:我不愿意让自己去这洋写:
- var aa=photo("id");
- aa.auto()//多一句话,很不好看。
理想状态是我在 var aa=photo("id") 的时候就告诉程序是否自动播放。
2:如果有两个动画在同一个页面。比如:
- var aa=photo("id1");
- aa.auto()
- var bb=photo("id2");
- bb.auto()
那么他们都有用户控制动画的 A 标签,如何各自负责自己的动画。不互相干扰。(其实他涉及到私有变量的问题,还有 this 指向); 申明:网上有很多解决上面问题的方法。下面的只是我弄明白了。所以来给大家分享,高手见笑了。 不错,又是在公车上,我解决了这个问题。《javascript 语言精粹》第 52 页 5.4 函数化 我来看一下这个 函数化构造器的源代码: // 加粗表示强调 // 这个方法是 《javascript 语言精粹》第 52 页 5.4 函数化 上的。 var constructor = function (spec,my){var that, 其他的私有实例变量; my = my || {}; 把共享的变量和函数添加到 my 中 that = 一个新对象 添加给 that 的特权方法 return that; } 看下面的方法:
- var photo = function(spec) {
- var _this = {},
- index, a, c, d;
- //这里可以初始化用户控制的a标签
- //比如这洋
- a.onmouseover = function() {
- _this.go(); //可以调用哦
- }
- _this.show = function() {};
- _this.auto = function() {};
- _this.go = function() {};
- // 这里可以直接调用刚才申明好的方法
- _this.auto() //可以直接调用
- return _this;
- }
- var bb = photo({
- index: 1;
- });
- var aa = photo({
- index: 2
- });
- //上面创建了 bb aa 两个不同的动画,不会互相影响哦。
- // 如果我对javascript语言精粹 的函数化 理解有问题。还请指教...
最后这个动画就比较完美了。可是私有变量太多了。如果可以设置默认值,可以使用者选择性的传进来。会比较好 所以可以添加下面这个函数:(这是很多人都使用的啦)
- var Extend = function(destination, source) {
- for (var property in source) {
- destination[property] = source[property];
- }
- return destination;
- }
- // 看到 Extend 大家都知道 他是做什么用的了。
最后贴出我今天写的这个 图片轮换的源代码:
[Ctrl+A 全选 注:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- javascript 图片轮换
- </title>
- </head>
- <body>
- <style type="text/CSS">
- body,ul,li{ margin:0; padding:0;} #div{width:610px;height:210px;overflow:hidden;}
- #photo li{height:210px; overflow:hidden; background:#fff url(001.gif) no-repeat
- center center;} #photo2 li{height:210px; overflow:hidden; background:#fff
- url(001.gif) no-repeat center center;} .number-warp{position:absolute;margin-top:-50px;width:600px;
- text-align:right;} .number-warp a{border:1px solid #CCC; width:30px; height:30px;
- display:inline-block; height:100%;margin-left:5px; text-align:center; text-
- decoration:none;} .sel{background:#CCC;}
- </style>
- <div>
- <div>
- <ul id="photo" style="margin-top:0px;">
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_17/1490191193_9999.jpg"
- />
- </li>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_20/1490191195_5278.jpg"
- />
- </li>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_14/1490191196_6525.jpg"
- />
- </li>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_20/1490191197_1573.jpg"
- />
- </li>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_19/1490191198_7062.jpg"
- />
- </li>
- </ul>
- </div>
- <div>
- <a href="#">
- 1
- </a>
- <a href="#">
- 2
- </a>
- <a href="#">
- 3
- </a>
- <a href="#">
- 4
- </a>
- <a href="#">
- 5
- </a>
- </div>
- </div>
- <div>
- <div>
- <ul id="photo2" style="margin-top:0px;">
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_7/1490191200_4977.jpg"
- />
- </li>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_15/1490191201_1628.jpg"
- />
- </li>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_10/1490191202_2914.jpg"
- />
- </li>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_11/1490191203_1045.jpg"
- />
- </li>
- </ul>
- </div>
- <div>
- <a href="#">
- 1
- </a>
- <a href="#">
- 2
- </a>
- <a href="#">
- 3
- </a>
- <a href="#">
- 4
- </a>
- </div>
- </div>
- <script type="text/javascript">
- var Extend = function(destination, source) {
- for (var property in source) {
- destination[property] = source[property];
- }
- return destination;
- }
- var photo = function(spec) {
- var $ = function(id) {
- return document.getElementById(id);
- },
- _this = {},
- a = document.getElementById(spec["number"]).getElementsByTagName("A"),
- my = {
- $: "",
- change: -210,
- d: 50,
- num: 3,
- au: true,
- index: 0,
- x: null,
- v: null
- },
- tween = function(t, b, c, d) {
- return - c * (t /= d) * (t - 2) + b;
- },
- autoo = function() {
- _this.show(my.index + 1 > my.num ? 0 : my.index + 1);
- };
- Extend(my, spec) //用他更好一点
- for (var i = 0; i < a.length; i++) {
- a[i].onmouseover = (function(i) {
- return function() {
- _this.go(i)
- }
- })(i);
- a[i].onmouseout = (function(i) {
- return function() {
- _this.auto()
- }
- })(i);
- };
- _this.show = function(n) {
- if (typeof my.x == "number") {
- _this.stop();
- }
- var t = 0,
- n = n,
- b = parseInt(my.$.style.marginTop),
- c = n * my.change - b,
- o = function() {
- t++;
- if (t == my.d + 1) {
- _this.stop();
- } else {
- my.$.style.marginTop = tween(t, b, c, my.d) + "px";
- my.x = setTimeout(o, 10);
- }
- }
- a[my.index].className = "";
- a[n].className = "sel";
- my.index = n;
- o();
- };
- _this.stop = function() {
- clearTimeout(my.x);
- my.x = null;
- };
- _this.auto = function() {
- _this = this;
- my.v = setInterval(autoo, 3000);
- };
- _this.go = function(n) {
- clearInterval(my.v);
- this.show(n);
- };
- if (my.au) {
- _this.auto();
- };
- return _this;
- }
- var bb = photo({
- $: document.getElementById("photo2"),
- number: "number2",
- change: -210,
- num: 3
- });
- var aa = photo({
- $: document.getElementById("photo"),
- change: -210,
- number: "number",
- num: 4
- });
- </script>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0413/284897.html