jQuery案例：美女画廊

下面是我用jQueryjQuery的属性的获取和设置写的一个小案例：美女画廊
html部分

<div id="dv"><h1>美女画廊</h1><a href="img/1.jpg" title="美女A"><img src="img/1-small.jpg" alt="" title="美女A"></a><a href="img/2.jpg" title="美女B"><img src="img/2-small.jpg" alt="" title="美女B"></a><a href="img/3.jpg" title="美女C"><img src="img/3-small.jpg" alt="" title="美女C"></a><a href="img/4.jpg" title="美女D"><img src="img/4-small.jpg" alt="" title="美女D"></a>
</div>
<br>
<img src="img/1.jpg" alt="" class="image">
<br>
<p>选择一个图片</p>

css部分

body {background-color: #666;
}
#dv {margin: 0 200px;
}
#dv a img{width: 200px;height: 100px;
}
.image {width: 820px;height: 360px;margin: 0 200px;
}
p{margin: 0 200px;
}

jQuery部分

<script src="./jquery-1.12.4.min.js"></script>
<script>
// 需求：点击目录栏的小图，下面的大图会随之发生改变// p标签里的文本也会发生对应改变
// 入口函数
$(function(){// 点击a标签包裹的图片$("a").click(function(){// 把下面的img标签里的路径设置成对应a标签的路径$(".image").attr("src",$(this).attr("href"));// 把p标签的文本设置成a标签的title属性值$("p").text($(this).attr("title"));return false;});
});
</script>

jQuery案例：美女画廊相关推荐

jQuery 美女画廊案例
源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
美女画廊（点击上面的图片下面进行显示）
效果图: <!DOCTYPE html><html><head><meta charset="UTF-8"><title> ...
手风琴jQuery案例
此案例为手风琴jQuery案例,即是列表缩放使用jQuery方法使用点击事件完成此案例,以下将开始此次学习; 建立案例所需要的元素 <ul class="menu"> ...
通过原生js实现美女画廊
美女画廊 1.思路 : 2.静态页面代码展示 : 3.css样式: 4.js代码 1.思路 : 1.搭建静态页面2.获取元素3.遍历小图4.给每个小图绑定事件5.把小图的src属性赋值给大图的src6 ...
【jQuery案例】自动轮播图
[jQuery案例] 自动轮播图使用jQuery实现了图片自动轮播有左右按钮和底部小圆点选择功能源代码如下: <!DOCTYPE html> <html lang=" ...
jQuery案例（底部导航图片切换）
作为一个代码新手,最近我又学习了一些jQuery的相关知识,所以今天就做了一个小案例.如下: 通过点击图标切换并点亮图标,现在我们就开始做吧 ,首先说一下思路: 我是通过事件委托的方式做的,大致思路就 ...
jQuery初识 - jQuery案例练习
jQuery事件委托什么是事件委托请别人帮忙做事情,然后将做完的结果反馈给我们在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jQuery会遍历所有找到的元素,给 ...
[jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题
qq音乐案例案例效果展示案例效果结构划分整体布局歌曲条目部分顶部栏底部栏歌词显示部分案例实现功能 a. QQ音乐播放器静态页面布局 * 页面整体布局规划和实现 * 页面顶部布局和静态效 ...
[jQuery基础] jQuery案例 -- 新浪微博
新浪微博案例思路主要说说JavaScript的思路随时要监听内容的输入有内容输入添加,按钮可以点击没有内容输入禁止点击按钮监听点击发布按钮拿到用户输入的内容根据内容创建节点插入微 ...

jQuery案例：美女画廊

jQuery案例：美女画廊相关推荐

最新文章

热门文章