[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面
前面写过一篇文章《[JQuery]用InsertAfter实现图片走马灯展示效果》，自从写过那样的也算是使用面向对象的写法吧，代码实在丑陋，自从写过那样的代码，就是自己的一块心病，总感觉不完美，心里一直惦记着那件事，也是在我写过那篇文章之后，没多久，在博客园首页看到了一篇文章较复杂js的书写格式，这里的代码看着比较简介，就想着抽时间将之前的那段js代码进行重构。说做就做，不想一想起之前写过那样的代码，心里就有疙瘩。所以也就有了这篇文章。
$.extend
在开始重构之前，需要先学习一下$.extend()方法，之前虽然见过它，但并不了解它，为了加深彼此的了解，所以先对它进行初步的学习，并在以后的项目中，经常的去使用它，达到彼此熟悉。
extend的意思就是扩展，$.extend()就是jquery的扩展方法。
$.extend()方法原型
$.extend(dest,src1,src2,src3....);
含义：将src1,src2,src3...合并到dest中,返回值为合并后的des,由此可以看出该方法合并后，是修改了des的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
<script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
var result = $.extend({},{ name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy" });
alert("name:" + result.name + " age:" + result.age + " sex:" + result.sex);
</script>
结果：
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值，如果为后面的对象添加一个age属性并设置为11，则结果如下：
<script type="text/javascript">
var result = $.extend({}, { name: "Tom", age: 21 }, { name: "Jerry",age:11, sex: "Boy" });
alert("name:" + result.name + " age:" + result.age + " sex:" + result.sex);
</script>
结果
省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
<script type="text/javascript">
$.extend({ hello: function () { alert('hello'); } });
$.hello();
</script>
结果
就是将hello方法合并到jquery的全局对象中。
$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
单击按钮，调用扩展方法hello。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.extend({ hello: function () { alert('hello'); } });
$(function () {
//jquery实例对象$("#btn")
$("#btn").hello();
});
</script>
</head>
<body>
<input type="button" name="name" value="按钮" id="btn" />
</body>
</html>
结果
页面加载，调用按钮jquery对象实例的hello方法。
几个例子
<script type="text/javascript">
//这是在jquery全局对象中扩展一个net命名空间。
$.extend({ net: {} });
//这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
$.extend($.net, {
hello: function () {
alert("net.hello");
}
});
//调用net下的hello
$.net.hello();
结果为弹出“net.hello”
jquery.extend()另外一个原型
$.extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
<script type="text/javascript">
var result = $.extend(true, {},
{
name: "John",
location:
{ city: "Boston", county: "USA" }
}, {
last: "Resig",
location:
{ state: "MA", county: "China" }
});
</script>
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
<script type="text/javascript">
var result = $.extend(true, {},
{
name: "John",
location:
{ city: "Boston", county: "USA" }
}, {
last: "Resig",
location:
{ state: "MA", county: "China" }
});
alert("name:" + result.name
+ "\r\nlast:" + result.last
+ "\r\nlocation.state:" + result.location.state
+ "\r\nlocation.county:" + result.location.county
+ "\r\nlocation.city:" + result.location.city)
</script>
结果
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
var result = $.extend(false, {},
{
name: "John",
location:
{ city: "Boston", county: "USA" }
}, {
last: "Resig",
location:
{ state: "MA", county: "China" }
});
参考文章：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
重构代码
学习了上面的extend方法，那么下面就对上篇文章中的图片走马展示的js进行重写。
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Css/Style.css" rel="stylesheet" />
<script src="Script/jquery-1.10.2.js"></script> <script type="text/javascript">
var Tearchers = [{
"id": "1",
"T1": "萌萌雨1",
"T2": "上海复旦大学硕士学位1",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师1",
"imgsrc": "imges/teach_1.png"
},
{
"id": "2",
"T1": "萌萌雨2",
"T2": "上海复旦大学硕士学位2",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师2",
"imgsrc": "imges/teach_2.png" },
{
"id": "3",
"T1": "萌萌雨3",
"T2": "上海复旦大学硕士学位3",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师3",
"imgsrc": "imges/teach_3.png"
}, {
"id": "4",
"T1": "萌萌雨4",
"T2": "上海复旦大学硕士学位4",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师4",
"imgsrc": "imges/teach_4.png"
}, {
"id": "5",
"T1": "萌萌雨5",
"T2": "上海复旦大学硕士学位5",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师5",
"imgsrc": "imges/teach_5.png"
}
, {
"id": "6",
"T1": "萌萌雨6",
"T2": "上海复旦大学硕士学位6",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师6",
"imgsrc": "imges/teach_6.png" }, {
"id": "7",
"T1": "萌萌雨7",
"T2": "上海复旦大学硕士学位7",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师7",
"imgsrc": "imges/teach_7.png" }, {
"id": "8",
"T1": "萌萌雨8",
"T2": "上海复旦大学硕士学位8",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师8",
"imgsrc": "imges/teach_8.png" }, {
"id": "9",
"T1": "萌萌雨9",
"T2": "上海复旦大学硕士学位9",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师9",
"imgsrc": "imges/teach_9.png" },
]; //滚动图片对象
var srcollImages = {
//timer句柄
timerHandle: null, //初始化操作
init: function (options) {
var newoptions = this.setOptions(options);
//设置高亮li
this.getHightLightLi(newoptions);
//开启定时器
this.timerStart(newoptions);
//鼠标悬停操作
this.hoverElement(newoptions);
//单击操作处理
this.clickElement(newoptions);
},
//设置参数
setOptions: function (options) {
var defaultoptions = {
interval: 1000,//定时器时间间隔
//容器
"scrollContainer": null,
}
//扩展默认配置进行扩展
return $.extend({}, defaultoptions, options || {})
},
//开启定时器
timerStart: function (options) {
var self = this;
self.timerHandle = setInterval(function myfunction() {
self.firstInsertAfterLast();
var $hightli = self.getHightLightLi(options.scrollContainer);
$hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent");
},options.interval)
},
//停止定时器
timerStop: function (options) {
clearInterval(this.timerHandle);
},
hoverElement: function (options) {
//得到当前对象
var self = this;
$("ul li").hover(function () {
self.timerStop(options);
}, function () {
self.timerStart(options);
})
},
clickElement: function (options) {
$("ul li").each(function () {
$(this).click(function () {
var selfclik = $(this);
//停止定时器
clearInterval(self.timerHandle);
//只对普通的照片进行处理，高亮居中的照片不再处理
if ($(this).hasClass("Zzhao")) {
//index()方法用来获取jquery对象的位置索引
var currentIndex = $(this).index();
//高亮图片的索引位置，以中间高亮图片为原点
var hightIndex = $(".Zzhao_cent").index();
//currentIndex > hightIndex说明单击的图片在高亮图片右边
if (currentIndex > hightIndex) {
//移动的步数
var step = currentIndex - hightIndex;
$(this).removeClass("Zzhao").addClass("Zzhao_cent");
$(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
//移动多少次
for (var i = 0; i < step; i++) {
srcollImages.firstInsertAfterLast();
}
} else {
//中间高亮图片之前的单击处理
//移动的步数
var step = currentIndex + hightIndex + 1;
$(this).removeClass("Zzhao").addClass("Zzhao_cent");
$(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
//移动多少次
for (var i = 0; i < step; i++) {
srcollImages.firstInsertAfterLast();
}
}
for (var i = 0; i < Tearchers.length; i++) {
var teacher = Tearchers[i];
if (teacher) {
if (selfclik.find("img").attr("src") == teacher.imgsrc) {
$(".T1").html(teacher.T1);
$(".T2").html(teacher.T2);
$(".T3").html(teacher.T3);
}
}
}
}
});
});
},
//将第一个li插在最后一个ul之后
firstInsertAfterLast: function () {
$("ul li:first").insertAfter($("ul li:last"));
},
/*
获得高亮显示的li
$containerObject：ul容器jquery对象
$result：高亮显示的li
*/
getHightLightLi: function (options) {
var $lis = $("ul li", options.scrollContainer);
var $result = null;
$lis.each(function (index, element) {
if ($(this).attr("class") == "Zzhao_cent") {
$result = $(element);
$.each(Tearchers, function (index) {
//当前对象
var teacher = this;
if ($result.find("img").attr("src") == teacher.imgsrc) {
index = index + 1;
//对最后一张图片的处理
if (index >= (Tearchers.length - 1)) {
teacher = Tearchers[0];
} else {
teacher = Tearchers[index];
}
$(".T1").html(teacher.T1);
$(".T2").html(teacher.T2);
$(".T3").html(teacher.T3);
}
})
}
});
return $result;
}
};
$(function () {
//初始化滚动对象
srcollImages.init({ "scrollContainer": $(".Teac") ,interval: 2000 });
}); </script>
</head> <body>
<div class="teacher">
<div class="Teac">
<ul>
<li class="Zzhao">
<a href="#"><img src="imges/teach_1.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_2.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_3.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_4.png" /></a>
</li>
<li class="Zzhao_cent">
<a href="#"><img src="imges/teach_5.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_6.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_7.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_8.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_9.png" /></a>
</li>
</ul>
<div class="Jjie">
<span class="T1">萌萌雨5</span>
<span class="T2">上海复旦大学硕士学位5</span></br>
<p class="T3">
追求完美与一身的现代化教师女性，才华横溢
一表人才，优秀教师5
</p>
</div>
</div>
</div>
</body>
</html>
Index.html
总结
每天逛博客园已经是一种习惯，的确收获不少，看到了然后就动手实践，也就有了这篇js重构的文章，虽然看起来仍有点乱，但是通过这次重构，让我对jquery的扩展方法的用法有了一个深入的学习。但如果将这个功能插件化，还得进一步深入学习，然后再次重构，通过这次重构，收获还是有的，我会在以后的项目中更多的采用面向对象的方式去写js或者jquery，也会将extend方法使用起来。
[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构的更多相关文章
- [JQuery]用InsertAfter实现图片走马灯展示效果
写在前面 最近一个搞美工的朋友让我给他写一个图片轮播的特效. 需求: 图片向左循环滚动. 图片滚动到中间高亮显示,并在下方显示照片人物对应的信息. 鼠标悬停止滚动. 鼠标离开开始滚动. 单击图片,图片 ...
- 3-5 编程练习：jQuery实现简单的图片对应展示效果
3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...
- IE6-能让png图片有透明效果的js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- 【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
- Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
随机推荐
- Ansible在节点间传输文件
1. 在控制节点(the control machine )与远程节点( the current remote host)之间传输文件 1.1 如果需要传输文件,可以使用copy模块,注意copy模块 ...
- python+msf 制作 windows远控
最近分析的一个远控,后发现是meterpreter rever http shell,文件是个打包的python(打包成exe),感谢wstone的指导~ 创建dll ./msfpayload win ...
- python 文件操作 r w a
python基础-文件操作 一.文件操作 对文件操作的流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 打开文件时,需要指定文件路径和以何等方式打开文件, ...
- Django-随机验证码
Python生成随机验证码,需要使用PIL模块. 安装: 1 pip3 install pillow 基本使用 1. 创建图片 from PIL import Image img = Image.ne ...
- [Leetcode Week1]Longest Substring Without Repeating Characters
Longest Substring Without Repeating Characters题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/longes ...
- 在opensuse 中安装视频解码器
最近由于需要32位的linux系统使用,很多版本的linux都不再发布32的安装镜像了,有一些又不是很熟悉,我熟悉的manjaro发布的32镜像又不是kde桌面,最后发现opensuse的滚动版本,即 ...
- stylus安装以及使用命令行生成css文件
Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的.动态的.富有表现力的CS ...
- 关于transform的属性
transfrom的出现让许多静态的东西动了起来,让网页更加具有生命力. 在transform属性中,transform-origin属性仅是其中之一,要彻底理解transform属性,这是不够的,必 ...
- 实现类似微信聊天功能的mysql表设计
前言: 最近设计了一套聊天功能,此功能支持人对人聊天.发送图片.查看聊天记录.按时间展示聊天列表.最后一条聊天数据及未读消息数 下面分享一下表结构及实现逻辑: 表结构: 1.聊天主表 id(主键id) ...
- 基于opencv的摄像头的标定
四个坐标系分别为:世界坐标系(Ow),摄像机坐标系(Oc),图像物理坐标系(O1,单位mm),图像像素坐标系(O,位于视野平面的左上角,单位pix). 空间某点P到其像点p的坐标转换过程主要是通过这四 ...