前端编程提高之旅（二）----站点常见特效的jquery实现

最新推荐文章于 2024-09-09 21:14:24 发布

adr5970

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量109

点赞数

文章标签：前端 javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/ljbguanli/p/6815811.html

版权

最好的编程语言是逻辑，前端各种交互特效的实现多能够用jquery实现。特效能够纷飞。内在逻辑则基本不变。这一篇文章主要介绍jquery实现常见特效背后的逻辑。

1.通过类名获取元素集合

首先来看一个js原生代码不支持的方法。通过类来获取元素集合。

document.getElementsByClassName=function(classname){
  var retnode = [];
  var myclass = new RegExp('\\b'+classname+'\\b');//匹配类名
  var elem = this.getElementsByTagName('*');//得到全部元素
  for (var j = 0; j < elem.length; j++)
   {
   var classes = elem[j].className;
   if (myclass.test(classes)){
    retnode.push(elem[j]);
   }
  }
  return retnode;
}//通过遍历整个文档元素类名。返回全部指定类名的数组

逻辑思路：

通过构造一个类名的正則表達式。选取全部标签，并通过正則表達式与全部标签类名属性进行匹配，从而返回一个类名数组，实现通过类名得到元素集合的目标。

实现这种方法的同一时候，也给在不使用jquery的情况下，选取特定序数的元素提供了便利。

2.二级联动菜单的构造

$("#select1").change( function() {	 //侦測一级菜单的change事件
  var id = $("#select1").val();
  if(id == 1){	 //通过id推断二级菜单
   $.get('index.php', null, function(data){	 //get方式传值
    $("span").empty();	 //清空标签
    $("span").append("<select><option>济南</opton><option>青岛	 </opton><option>临沂</opton></select>");	//填充相应的二级菜单
   });
   }else{
   $.get('index.php', null, function(data){	 //get方式传值
    $("span").empty();	 //清空标签
    $("span").append("<select><option>郑州</opton><option>安阳	 </opton><option>洛阳</opton></select>");	//填充相应的二级菜单
    });
   }
  });

逻辑思路：

依据须要设置联动菜单的元素值被改变的情况，通过ajax方法传空值给自身页面。追加对应的元素，在这里是二级菜单。

这里用到了jquery两个方法：change方法和empty方法。

change方法在选定标签值改变时，会被触发运行。

empty方法则是将标签中html内容清空。

3.链接样式和链接内容的显示隐藏

$(function(){
  $("li").each(function(index){	 //遍历用户控制区域
  $(this).mouseover(function(){	 //获取当前用户选择区域
   id = setTimeout(function(){	 //使用时间事件函数实现缓动效果 更好的用户体验
   $("li.tab").removeClass('tab');	 //移除默认的选项button的样式
   $(this).addClass("tab");	 //给当前选项button加入样式
   $("div.show").removeClass('show');	 //移除默认的显示区域的样式
   $("#tab1 div:eq("+index+")").addClass('show');	//依据选中的index索引加入样式
   },300);
  }).mouseout(function(){
  clearTimeout(id);	 //用户鼠标移除时同一时候移除时间事件
   });
  });
 });//链接相应相应内容的隐藏和显示

逻辑思路：

这里首先用到$()在当中书写函数，这里具体介绍了jquery构造函数的适用范围。通过遍历每一个导航链接。当鼠标移上相应元素。首先移除全部默认选项样式，在悬浮元素加上默认选中样式。

并移除当前显示样式，设置默认选项相应内容样式为显示状态。

这里的亮点在于使用了一个显示默认样式的缓动效果。用户体验更仔细。

4.“显示很多其它（more）”功能的实现

$(function(){
var $hideObj = $('ul li:gt(5):not(:last)');//选择index大于等于5的li元素。除去最后一个，隐藏掉
$hideObj.hide();
$('.showmore span').click(function(){
if(!$hideObj.is(":visible")){//推断是否可见is方法
$hideObj.show();
$('.showmore span').css("background","url(./images/up.bmp) no-repeat 0 -10");//切换状态更换图片
}else{
$hideObj.hide();
$('.showmore span').css("background","url(./images/down.bmp) no-repeat 0 0")
;//切换状态更换图片
}
});
});//选择一部分隐藏掉，再将部分推断是否显示，显示或者隐藏

逻辑思路：

这里首先动用了选择器除去最后一个元素全部大于5的li元素选中。通过用户点击事件，推断是否显示或者隐藏，并联动改动被点击的图标。

亮点在选择器的掌控恰到优点，用jquery最主要的就要用熟选择器。这样会高速高效操作dom节点。这样也就不难理解css3为什么首要改革的就是选择器了，简化操作流程、正则化及语义化css选择器，使得前端project师读和写代码更便捷。

5.文本域“剩余字数”

$(document).ready(function(){
  var	tarea = $("#init");//
  tarea.focus(function(){
   $("#numtj").fadeIn(200);
  }).blur(function(){
   $("#numtj").fadeOut("slow");
  })//文本域获得焦点和失去焦点剩余字数显示或消失，用到渐入渐出

  $("#init").keyup(function() {
   var	text=$("#init").val();
   var	counter=text.length;
   $("#numtj var").text(110-counter);
  });// 按下键盘则实时改动剩余字数
 });

逻辑思路：

逻辑很easy。获得焦点剩余字数显示。失去焦点剩余字数消失。键盘按起计算还剩字数。

这里的亮点在于使用了fadeIn和fadeOut方法实现渐入渐出更加自然。体验更好。focus和blur事件也是针对有输入内容的元素常需处理的事件。keyup事件则与用户输入内容，实时交互有关系。

6.鼠标移动到图片放大

var	ShowImage =	function() {
  xOffset	= 10;
  yOffset	= 30;
  $("#imglist").find("img").hover(function(e)	{//给图片对象加入事件及触发函数
   $("<img	id='imgshow' src='"	+ this.src + "'	/>").appendTo("body");//在body上加入图片对象
   $("#imgshow")
    .css("top",	(e.pageY - xOffset)	+ "px")//定位body显示图片的y坐标 鼠标位置加人为设置偏移量
    .css("left", (e.pageX + yOffset) +	"px")//定位body显示图
    .fadeIn("fast");
   },function() {
    $("#imgshow").remove();
   });
   $("#imglist").find("img").mousemove(function(e)	{
    $("#imgshow").css("top",(e.pageY-xOffset) + "px")
    .css("left", (e.pageX + yOffset) +	"px");
   });
  };

逻辑思路：

这段代码的逻辑很具有普遍性，e代表鼠标事件，鼠标属性pageX和pageY代表鼠标的坐标位置。总体的思路即是通过鼠标触发悬浮事件。显示或者移除与鼠标位置有一个偏移的图片，并通过设置mousemove事件来实时移动放大图位置。

看了以上几个样例我们会发现，事件和选择器是总体交互效果核心。所以这里有必要再精通、再精通。

7.图片轮播

var	t =	0;
 var	n =	0;
 var	count;//全局变量沟通函数和click事件内变量
 $(document).ready(function(){
  count=$("#bannerList a").length;//获取用户控制a标签的总数
  $("#bannerList a:not(:first-child)").hide();//除了第一个元素都隐藏
  $("#banner li").click(function(){//给存放图片的列表加入单击事件
   var	i =	$(this).text() - 1;//获取Li元素内的值，即1，2，3。4
   n =	i;//i的值赋值给n
   if (i >= count){//推断是否大于a标签的总数
    return;
   }
   var	$a = $("#bannerList	a").filter(":visible").fadeOut(500);//显示的都隐藏掉
   $a.parent().children().eq(i).fadeIn(1000);//依据当前li元素的值显示图片
   //$("#banner").css("background","");//显示button样式
   $(this).toggleClass("show");//当前对象删除或者加入类show
   $(this).siblings().removeAttr("class");//当前对象删除类属性
  });
  //设置定时或消除定时
  t =	setInterval("showTime()", 3000);//每隔三秒运行一次方法
  $("#banner").hover(function(){//给button加入鼠标滑过事件
   clearInterval(t)},function(){//鼠标滑过停止播放
   t =	setInterval("showTime()", 3000);//鼠标滑出继续播放
  });
 })

 function showTime()
 {
  if(n>=(count-1)){
   n=0;
  }else{
   n=++n;
  }
  $("#banner li").eq(n).trigger('click');//代码触发click事件
 }

逻辑思路：

这段图片轮播的代码，大体能够分为三个模块：初始化模块、单击事件模块、鼠标悬浮模块、自己主动触发模块。初始化模块意在初始化開始轮播图片序数。单击时间模块意在确定单击事件运行被单击对象显示其它对象隐藏操作。鼠标悬浮模块意在清除或者恢复自己主动触发模块，以便运行单击操作。自己主动触发模块用于模拟单击事件。

这段代码混乱之处在于设置的i和n都为全局变量，在函数和运行语句中游走。trigger这个事件居然模拟了单击事件，鼠标悬浮hover用的恰到优点，不会造成与click事件的冲突。

8.选择城市插件

jQuery.fn.selectCity = function(targetObj){
 var _self = this;//获取当前对象，使用此插件的选择器内对象
 var targetObj = $(targetObj);//依据參数获取对象
 this.click(function(){//当前对象触发单击事件
  var _top=$(this).offset().top + $(this).outerHeight(true);//获取对象相对顶部真实高度
  var _left=$(this).offset().left;//获取对象相对左側真是高度
  targetObj.bgiframe();//调用插件的方法bgiframe()
  targetObj.show().css({"position":"absolute","top":_top+"px" ,"left":_left+"px"});//显示定位
 });//依据被选对象的位置，将隐藏的显示出来并设置隐藏的下方位置
 targetObj.find("#selectItemClose").click(function(){
  targetObj.hide();//用户单击关闭button隐藏选择区域
 });
 targetObj.find("#selectSub :checkbox").click(function(){
  targetObj.find(":checkbox").attr("checked",false);//将全部的多选框设置为未被选中
  $(this).attr("checked",true);
  _self.val($(this).val());
  targetObj.hide();//设置点击选中。并传递给input对象值，隐藏选中框
 });
 $(document).click(function(event){
  if(event.target.id!=_self.selector.substring(1)){//鼠标在页面单击时隐藏复选框对象
   targetObj.hide();
  }
 });
 targetObj.click(function(e){
  e.stopPropagation(); //阻止事件的传递
 });
    return this;
}

逻辑思路：

页面单击对象时，则设置须要显示的对象到被单击对象的下方。

并设置关闭button。将全部多选框设置未被选中。以选中特定栏。当鼠标单击页面时，须要显示的对象消失。

这里比較新颖的是当鼠标不点击显示区域和单击对象时的处理。才採用了一个target.id的推断达到效果。

9.分页插件

var	page_all = $('.page');//获取所有须要分页显示的区域，全局变量
 var	user_nav = $('#page_nation');//用户分页操作区域。全局变量，函数内更改也会更改值
 function createActionLinks(){//动态生成分页操作区域
  user_nav.append('<a	href="javascript:void(0)" id="prev">上一页</a>');
  for(var	i=0;i<$('.page').length;i++){//显示区域的范围内遍历
   user_nav.append('<a	href="javascript:void(0)" class="numlink">'+(i+1)+'</a>');
  }
  user_nav.append('<a	href="javascript:void(0)" id="next">下一页</a>');
 }
 function changeAction(page,preBtn,nextBtn){//分页实现函数
  $('.page:eq('+page+')').css('display','block');//显示当前分页内容
  $('.numlink:eq('+page+')').addClass('current');//当前页button高亮显示
  var	pageSize = parseInt($('.page').length -	1);//获取最大页数
  if(page	== 0){//显示在第一页时
   preBtn.hide();//上一页button隐藏
   nextBtn.show();//下一页button显示
  }else if(page==pageSize){//显示在最后一页时
   preBtn.show();//上一页button隐藏
   nextBtn.hide();//下一页button显示
  }else{
   preBtn.show();//上一页button显示
   nextBtn.show();//下一页button显示
  }
 }
 function hideObj(){
  page_all.css('display','none');//隐藏所有分页
  $('.numlink').removeClass('current');//去除所有分页的样式
 }
 $(document).ready(function(){
  $('.page:eq(0)').css('display','block');//默认显示第一页
  createActionLinks();//初始化创建用户操作区域
  $('.numlink:eq(0)').addClass('current');//给第一个button加入样式
  var	nextBtn	= $('#next');//获取下一页button对象
  var	preBtn = $('#prev');//获取上一页button对象
  var	linkAction = $('.numlink');//获取超级链接对象集合
  preBtn.hide();//默认显示第一页并隐藏上一页操作button
  var	page =	parseInt($('.numlink').index($('.current')));//返回当前分页值，这一句话非常关键



  //三种点击动作
  nextBtn.click(function(){//给下一页button加入单击事件
    hideObj();//隐藏所有分页部分
    changeAction(page+1,preBtn,nextBtn);//函数每运行一次page的值减1
    page =	parseInt($('.numlink').index($('.current')));//返回page的值
  });
  preBtn.click(function(){//给上一页button加入单击事件
   hideObj();//隐藏所有分页部分
   changeAction(page-1,preBtn,nextBtn);//函数每运行一次page的值加1
   page = parseInt($('.numlink').index($('.current')));//返回page的值
  })
  linkAction.click(function(){//给分页页码链接加入单击事件
   var	that = $(this);//获取当前对象
   hideObj();//隐藏所有分页部分
   var	index =	that.index() - 1;//获取当前下标值
   changeAction(index,preBtn,nextBtn);//调用分页函数
   page = parseInt($('.numlink').index($('.current')));//返回page的值
  })
 })

逻辑思路：

分页属于老生长谈了，这里的实现主要从分页button生成模块、切换页面模块、隐藏模块、并通过ready后。初始化设置初始状态，对对应button加上交互操作即click事件，并调用切换页面模块实现点击切换。

类似MVC架构。

10.自己定义插件注意要点

(function($){
 $.fn.changeTab = function(options){//插件须要附加到jquery.fn对象上
  var defaults = {
   FontSize:"50px",
   Color:'red',
   FontWeight:'bold'
  }//设置默认的參数
  var options = $.extend(defaults,options);//对參数更新
  this.each(function(){
   var lis = $(this);//保留this操作
   lis.hover(function(){
   $(this).css({ "fontSize": options.FontSize, "color": options.Color ,"fontWeight":options.FontWeight});
   },function(){
   $(this).css({ "fontSize": '', "color": '',"fontWeight":''});
   })
  })
 }
  })(jQuery)// 插件内避免使用$ ,插件应返回一个jquery对象 便于链式操作

  $(function(){
 var options={
 FontSize:'16px',
 Color:'blue',
 FontWeight:'bold'
 }//设置个性化參数
 $('li').changeTab(options);//引用插件
 
  })

逻辑思路：

1.插件须要附件到jquery.fn上。

2.插件内返回jquery对象便于链式操作。

3.设定默认參数，并通过传參调用extend对象对參数更新。

以上总结均为项目中常见特效的情形，能够看出来事件和选择器是须要掌握扎实的，一些编程技巧也要学会。

其次这篇文章能够作为一个程序库。供使用时查看。

转载于:https://www.cnblogs.com/ljbguanli/p/6815811.html

adr5970

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端编程提高之旅（二）----站点常见特效的jquery实现

最好的编程语言是逻辑，前端各种交互特效的实现多能够用jquery实现。特效能够纷飞。内在逻辑则基本不变。这一篇文章主要介绍jquery实现常见特效背后的逻辑。1.通过类名获取元素集合首先来看一个js原生代码不支持的方法。通过类来获取元素集合。document.getElementsByClassName=function(classnam...
复制链接

扫一扫