jq实现酷炫的鼠标经过图片翻滚效果

短短的十多行代码就实现了一个酷炫的图片翻滚代码，要实现这个效果并不难，只要思路对了，一切都好办，不多说了，直接上代码看效果！

html结构：


代码如下:

<ul class="list">
<li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>
<li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>

</ul>

css代码：


代码如下:

*{ margin:0; padding:0;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}
.list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}
.list li img{ float:left; width:150px; height:80px; border:none;}
.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}

jq代码（注意要引入jq库）：


代码如下:

$(function () {
$('.list li').hover(function () {
$(this).children('a,img').stop();
$(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
$(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);
});

}, function () {
$(this).children('a,img').stop();
$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);

});
});

});

是不是很简单的几句jq代码？亲，不妨copy下来看下效果呗！

赞 (0)

相关推荐

  • javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码

    HTML部分代码: 复制代码 代码如下: <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul> javascript部分代码: 当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的 复制代码 代

  • 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=&qu

  • 鼠标经过显示二级菜单js特效

    复制代码 代码如下: <!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=&qu

  • Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

    如下所示: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例</title>    <meta http-equiv=

  • 使用mouse事件实现简单的鼠标经过特效

    代码超级简单,这里就不多BB了,直接奉上 复制代码 代码如下: <!doctype html> <html lang="zh-cn"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">     body,ul,li{margin:0;

  • Javascript实现的鼠标经过时播放声音

    Js代码如下: 复制代码 代码如下: <script type="text/javascript" language="JavaScript"> function play() { //注意文件路径,且文件大小一般10kb以内 document.all.bgs.src="Notify.wav"; } </script> 在<body> 内加 <bgsound loop="1" id=&

  • CSS鼠标响应事件经过、移动、点击示例介绍

    几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 复制代码 代码如下: <html> <head> <title>CSS 鼠标响应事件</title> <meta http-equiv="Content-Type" content="text

  • js实现图片显示局部，鼠标经过显示全部的效果

    js实现图片显示局部，鼠标经过显示全部的效果

    这个是例如了CSS的margin负值和相对定位做的一个图片放大的效果.图片开始只是局部的,鼠标放上去显示整个图片. 无标题文档 body{ font-size:12px; } ul,li,ol{ margin:0; padding:0; list-style:none; } .box{ margin:100px; clear:both; border:1px solid #000; } .box ul li{ list-style:none; float:left; width:60px; he

  • jquery给图片添加鼠标经过时的边框效果

    一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s

  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片,鼠标经过显示上下页 适合宽和高都比较大的页面使用  演示 复制代码 代码如下: <div class="bannerbox"> <div id="focus"> <ul> <li><a href="http://www.freejs.net/" target="_blank"> <img src="../da

  • javascript中onmouse事件在div中失效问题的解决方法

    也就是说,移到对象的子对象上,也算onmouseout了.但这往往会达不到我们想要的预期效果.这是由于javascript自身的冒泡特性导致的(即在子元素上触发了事件,并冒泡到了父元素-堆栈后进先出算法).今天在网上搜了一下,找了以下的解决办法(兼容IE和Firefox). 在IE下解决问题很简单,用onMouseEnter.onMouseLeave来代替onMouseOver.onMouseOut就行了,他们的作用基本相同,但前者不会发生冒泡(如果用 jQuery的event事件,只要绑定mo

  • 鼠标经过tr时,改变tr当前背景颜色

    示例如下: 复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>鼠标经过给tr换颜色</title>    </head><body><table align="center" width="100%"

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    前段时间一直找这个的简短实现  网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});

  • 鼠标经过导航菜单时颜色改变效果

    非常酷的网页导航菜单,sky整理收集. /* 这是把事件动作绑定到菜单上的函数 */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i ">我们,站长必备的高质量网页特效和广告代码.jb51.net,站长js特效. 网站首页 站长特效 网页特效 广告代码 站内关键词 rss订阅 留言本 您自定义 您自定义 attachXMenu(xmenu0); //在上面这个table

  • jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快. 实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可

  • jQuery 鼠标经过(hover)事件的延时处理示例

    jQuery 鼠标经过(hover)事件的延时处理示例

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干

随机推荐