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


Posted in Javascript onMarch 12, 2014

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

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下来看下效果呗!
Javascript 相关文章推荐
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
js实现简单放大镜效果
Mar 07 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
jquery、js操作checkbox全选反选
Mar 12 #Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 #Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 #Javascript
判断一个对象是否为jquery对象的方法
Mar 12 #Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 #Javascript
Jquery实现自定义弹窗示例
Mar 12 #Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 #Javascript
You might like
PHP生成随机密码类分享
2014/06/25 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
Node.js实现数据推送
2016/04/14 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python创建和删除目录的方法
2015/04/29 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
详解Python IO口多路复用
2020/06/17 Python
python 实现图片裁剪小工具
2021/02/02 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
施工安全承诺书
2014/05/22 职场文书
运动员口号
2014/06/09 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
大学生团员个人总结
2015/02/14 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python