jQuery邮票人 --＞ 案例
jQuery邮票人 @Draven
- 效果预览
- html代码
- css代码
- js代码
效果预览
html代码
<div class="wrap"><ul><li><a href="#"><img src="img/01.jpg" alt=""/></a></li><li><a href="#"><img src="img/02.jpg" alt=""/></a></li><li><a href="#"><img src="img/03.jpg" alt=""/></a></li><li><a href="#"><img src="img/04.jpg" alt=""/></a></li><li><a href="#"><img src="img/05.jpg" alt=""/></a></li><li><a href="#"><img src="img/06.jpg" alt=""/></a></li></ul>
</div>
css代码
<style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style>
js代码
<script>$(function () {//鼠标经过的时候，让自己的透明度为1，其余为0.5$(".wrap li").hover(function () {$(this).stop().fadeTo(300,1).siblings().stop().fadeTo(300,0.4)}, function () {//鼠标离开的时候，所有图片透明度恢复为1$(".wrap li").stop().fadeTo(300,1)})})
</script>
jQuery邮票人 --＞ 案例相关推荐
- jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- jQuery选择器经典案例
jQuery选择器经典案例 具体讲解内容参照上一篇: 选择器详细讲解 基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...
- JavaScript -- jQuery网页开发案例笔记
视频地址:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili 视频代码地址:JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识.视频网址: ...
- jQuery 属性操作——案例：购物车案例模块
案例:购物车案例模块-全选 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
- jQuery 选择器 之 案例：淘宝服饰精品案例
案例:淘宝服饰精品案例 ①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏. ②需要得到当前小li 的索引号,就可以显示对应索引号的图片 ③jQuery 得到当前元素 ...
- java多态猫狗吃骨头_javaSE学习（6）：面向对象：多态的两个经典案例（猫狗案例和南北方人案例）...
1.猫狗多态案例 /* 2019年5月19日9点48 @author 潇雷 猫狗案例多态版: */ class Animal{ public void eat(){ System.out.printl ...
- jQuery动画＋案例
语法: hide()隐藏 show()隐藏 $(selector).animate(styles,speed,easing,callback) 案例: //掉落￥<style>*{marg ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- JQuery 入门 - 附案例代码
文章目录 预备知识与后续知识及项目案例 为什么要学jquery 体验jquery的使用 jquery到底是什么 jquery的版本问题 jquery的入口函数 jq对象和dom对象(重要) jquer ...
最新文章
- 地形图绘制过程中的自然斜坡、陡坎、斜坡的区别
- 猴年如何抢红包？错过这秘籍可能错过几个亿！
- CreateFileMapping共享内存时添加Global的作用
- Android实例-屏幕操持常亮(XE8+小米2)
- eclipse 最全快捷键（网络收集）
- Docker实践 -- 安装Docker
- word2vec数学原理详解
- Passthrough技术简介
- SPSS作业-卡方检验-列联表
- 用python求3的阶乘_Python 阶乘实例 - Python 3 基础教程
- rust语言和cargo介绍
- 如何向iphone手机里导入音乐？
- 【论文整理】风格迁移中格拉姆矩阵（Gram Matrix）的使用
- Java final String类的详细用法还有特性说明,自己也在学习.
- 注意力CBMA到底在网络中做了什么事
- 【OpenCV入门学习--python】Image Segmentation with Distance Transform and Watershed Algorithm图像分割
- 【无标题】奥的斯故障223 1TH-Fault 2TH Fault故障分析
- 关于win10 睡眠或关屏恢复后卡顿的问题
- 最近面试SAR ADC总是被问到DAC 单位电容的取法
- Cocos2d-x利用xxtea进行图片资源加密