jquery-美女相册案例

美女相册案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>美女相册案例</title><link rel="stylesheet" href="css/bootstrap.min.css"><style>ul li img{width: 200px;height: 180px;}body img{width: 400px;}</style>
</head>
<body><ul class="nav nav-tabs"><li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529579282512&di=14ce7bd3868ca3fc84f85518dccb3841&imgtype=0&src=http%3A%2F%2Fstatics.glshimg.com%2Fforum%2Fdvbbs%2F2007-4%2F200742917262034114.jpg" alt=""></a></li><li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529579282507&di=da19b2832fff6104239c0debabaf4383&imgtype=0&src=http%3A%2F%2Fimg05.tooopen.com%2Fimages%2F20150807%2Ftooopen_sy_137154466295.jpg" alt=""></a></li><li><a href=""><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3261489058,2652671941&fm=27&gp=0.jpg" alt=""></a></li><li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529579343919&di=ee2136c68ae5c815a3cac31cd0f24667&imgtype=0&src=http%3A%2F%2Fimage.haha.mx%2F2015%2F06%2F02%2Fmiddle%2F1810886_d1a7993ae988a18b5241859f9819a2e1_1433219644.jpg" alt=""></a></li></ul><img src="" alt=""><span  style="font-size: 48px;color: red">美女1</span><span style="font-size: 48px;color: red">美女2</span><span style="font-size: 48px;color: red">美女3</span><span style="font-size: 48px;color: red">美女4</span><script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script><script>$(function(){$("a").attr('href', '#');   $("span").css('display', 'none');$('li').click(function(){var img=$(this).find('img').attr('src');$('body>img').attr('src', img);$("span").eq($(this).index()).css('display', 'inline-block').siblings('span').css('display', 'none');});     });
</script>
</body>
</html>

jquery-美女相册案例相关推荐

jQuery 美女画廊案例
源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
JQuery 入门 - 附案例代码
文章目录预备知识与后续知识及项目案例为什么要学jquery 体验jquery的使用 jquery到底是什么 jquery的版本问题 jquery的入口函数 jq对象和dom对象(重要) jquer ...
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+ajax幻灯相册php源码,仿门户网图片频道的jQuery幻灯相册轮播代码...
推荐 jquery画廊特效支持缩略图预览和全屏展示及图片描述这是款基于jquery的画廊相册特效,功能较全面,可支持缩略小图预览,幻灯图片全屏展示,可显示多种规格的图片,包括全屏显示高清大图,以及 ...
用原生js实现一个美女相册小案例
注意案例中使用的图片需要自己替换成本地文件: <!DOCTYPE html> <html> <head lang="en"><meta c ...
jQuery 属性操作——案例：购物车案例模块
案例:购物车案例模块-全选 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
jQuery 选择器之案例：淘宝服饰精品案例
案例:淘宝服饰精品案例 ①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏. ②需要得到当前小li 的索引号,就可以显示对应索引号的图片 ③jQuery 得到当前元素 ...

jquery-美女相册案例

jquery-美女相册案例相关推荐

最新文章

热门文章