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 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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
destoon常用的安全设置概述
2014/06/21 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
js 编写规范
2010/03/03 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python中关于浮点数的冷知识
2019/09/22 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
网络安全方面的面试题
2015/11/04 面试题
《最可爱的人》教学反思
2014/02/14 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
餐厅开业活动方案
2019/07/08 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
MySQL的索引你了解吗
2022/03/13 MySQL
Python OpenCV实现图形检测示例详解
2022/04/08 Python