当前目录: jquery制作
jquery如何实现禁止追加动画效果

2013年12月14日  jquery制作,前端资源   

在使用jquery制作移动特效的时候,如果反复的触发移动事件我们会发现既是我们立刻停止了事件的触发,但之前的触发事件的效果还在继续追加。 其实我们要用到一句话来判断当前是否还在进行着动画, [code]if(!移动对象.is(':animated')){ }[/code] 对于一些人可能理解需要一点时间,这里一起来分析一下。 判断的条件前面加了感叹号!表示否的意思,意思就是如果当前没有动画就满足条件执行里面的代码;如果当动画在进行时,还在继续触发事件的话就不满足条件跳出代码,说白了就是要一个触发事件一个动画慢慢来别急的意思。

jquery 简易的图片切换

2013年12月11日  jquery制作,前端资源   

CSS代码: [code]<style type="text/css"> *{ margin:0; padding:0;} .wrap_tv_tit{ height:50px;margin-bottom:10px;} .wrap_tv_tit_l{ float:left;} .wrap_tv_tit_r{ float:right;} .wrap_tv_tit_r span{background:yellow; margin-right:10px; cursor:pointer} .wrap_tv{ border:1px solid red; height:140px; width:500px; overflow:hidden;} li{ list-style-type:none; float:left; margin-right:25px;} ul{ position:absolute; height:50px; width:2000px;} .wrap_tv_bg{ position:relative;width:100%;} .name{ display:block;} .mun_page{ background:red;} </style>[/code] jquery部分: [code]<script type="text/javascript"> $(function(){ var page = 1; //当前版面页码 $('div.wrap_...

jquery 鼠标移动到缩略图上侧边有放大图片效果

2013年12月11日  jquery制作,前端资源   

jquery 鼠标移动到缩略图上侧边有放大图片效果 CSS样式如下: [code]<style type="text/css"> body{ position:relative;} li{ float:left; margin-right:10px;} #toopimg{ position:absolute; z-index:1;} </style>[/code] JS部分代码: [code]$(function(){ $('ul li a img').mouseover(function(){ var toopimg ='<div id="toopimg"><img src="'+this.src+'"><div>'+this.alt+'</div></div>'; $(toopimg).prependTo($(this).parents('li')); }).mouseout(function(){ toopimg.remove(); }).mousemove(function(e){ $('#toopimg').css({'left':20+e.pageX+'px', 'top':20+e.pageY+'px' }); }); $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", ...

jquery自定义a标签title提示效果并跟随鼠标移动

2013年11月26日  jquery制作,前端资源   

jquery自定义a标签title提示效果并跟随鼠标移动,这样可以美化和彰显自己有个性的博客。 首先是css样式: [code]<style type="text/css"> #tooptip{position:absolute; z-index:200;word-wrap:break-word;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; border:1px solid #d5d5d5; background:#efefef; color:#7e5025;} </style>[/code] 接下来是自己写的jquery: [code]<script type="text/javascript"> $(function(){ $('.main_content_list .main_content_list_tit h2 a').mouseover(function(){ this.mytitle = this.title; this.title = ''; var tooptip = '<div id="tooptip">'+this.myt...

jquery 二级导航

2013年11月15日  jquery制作,前端资源   

<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> .son{ margin-left:10px; width:48px;} li{ list-style-type:none; float:left;} li li{ float:none; background:pink; text-align:left;} ul ul{ display:none; background:yellow; padding:0; margin:0;} .ul_hover{ display:block;} .wrap_nav{ background:red; height:17px;} .son2{ position:relative;} .son2_hover{display:block; position:absolute;...