当前目录: jquery制作
jquery 自动滚动新闻列表

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

[code]function domm(){ $('ul').children('li').first().appendTo('ul'); } var nihao = setInterval(domm,2000); $('li').hover(function(){ clearInterval(nihao); },function(){ nihao = setInterval(domm,2000); });[/code]   [code]<ul> <li><a href="#">111</a></li> <li><a href="#">222</a></li> <li><a href="#">333</a></li> </ul>[/code]

jquery 自动滚动效果详解

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

现在上网的jquery效果都有现成的可以自己调用就可以使用了,但是推荐如果一些简单的效果还是尽量自己写比较好,这里讲解下一些对于新手如果实现jquery的自动滚动效果。 首先,我们的html要写成这样: [code]<div id="slide"> <ul class="slideul1"> <li class="slideli1"> <ul class="slideul2"> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> <li><img src="images/5.jpg"/></li> </ul> </li> <li class="slideli2"></li> </ul> </div> <span><...

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 + ", ...