使用JQuery快速高效制作网页交互特效第三章所有课后

最新推荐文章于 2021-01-22 16:11:54 发布

不觉清倦

最新推荐文章于 2021-01-22 16:11:54 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：计算机文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_44269168/article/details/95206327

计算机专栏收录该内容

47 篇文章

订阅专栏

本教程详细讲解了如何使用JQuery高效地创建网页交互特效，包括多个简答部分，涵盖了样式调整和代码实现，帮助开发者提升网页动态效果的制作能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简答三
样式


.scroll {
    width: 360px;
    height: 190px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

a {
    font-size: 14px;
    color: #39F;
    height: 18px;
    width: 20px;
    border: 1px solid #39F;
    text-decoration: none;
    display: block;
    float: left;
    margin-right: 5px;
    text-align: center;
    background-color: #FFF;
    line-height: 20px;
}

a:hover {
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #39F;
    border: 1px solid #39F;
    text-decoration: none;
    display: block;
}

#num {
    position: absolute;
    width: 180px;
    height: 25px;
    z-index: 2;
    left: 100px;
    top: 165px;
}

代码

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>图片轮换</title>
	<link rel="stylesheet" href="../Css/scroll.css">
</head>

<body>
<div class="scroll">
	<div id="num">
		<a href="#" onclick="change1()">1</a>
		<a href="#" onclick="change2()">2</a>
		<a href="#" onclick="change3()">3</a>
		<a href="#" onclick="change4()">4</a>
		<a href="#" onclick="change5()">5</a>
	</div>
	<img src="../Image/1.gif" alt="图片" id="photo"/>
</div>
<script type="text/javascript">
	//替换图片
	var img = document.getElementById("photo")
	function change1() {

		img.src = "../Image/1.gif";
	}

	function change2() {
  		img.src = "../Image/2.gif";
	}

	function change3() {
  		img.src = "../Image/3.jpg";
	}

	function change4() {
 		img.src = "../Image/4.jpg";
	}
	function change5() {
 		img.src = "../Image/5.gif";
	}
</script>
</body>
</html>

简答四
代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>上传文件</title>
    <style>
        #main{margin:0 auto; width: 500px;}
        dl{clear: both; width: 100%;}
        dt{
            float: left;
            width: 100px;
            text-align: right;
        }
    </style>

</head>

<body>
<div id="main">
    <dl id="upload">
        <dt>文件路径：</dt>
        <dd><input name="fileImages" type="file" /></dd>
    </dl>
    <div id="addBtn"><input id="up" type="button" value="再上传一个文件" onclick="addInput()"/></div>
</div>
<script type="text/javascript">
    function addInput() {
        var dl = document.createElement("dl");
        var dt = document.createElement("dt");
        var dd = document.createElement("dd");
        var input = document.createElement("input");
        dl.appendChild(dt);
        dl.appendChild(dd);
        dd.appendChild(input);
        dt.innerHTML="文件路径：";
        input.setAttribute("type","file");
        document.getElementById("main").insertBefore(dl,document.getElementById("addBtn"));

    }

</script>
</body>
</html>

简答五
样式

* {
    margin: 0;
    padding: 0;
    font-family: "Arial", "微软雅黑";
    font-size: 12px;
    line-height: 23px;
}

ul, li {
    list-style: none;
}

li {
    float: left;
    margin-right: 1px;
}

.div_bg {
    background-image: url(../Image/bg.jpg);
    background-repeat: no-repeat;
    width: 169px;
    height: 290px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 50px 0 0 15px;
}

.div_bg div {
    clear: both;
    padding-top: 10px;
}

.white {
    font-size: 12px;
    color:  white;
    padding-top: 2px;
    cursor: pointer;
    border: 1px solid red;
    border-radius: 20%;
    background-color: red;

}

.white:hover {
    font-size: 12px;
    color: black;
    padding-top: 2px;
    cursor: pointer;
}

a {
    color: #06329b;
    text-decoration: none;
    line-height: 24px;
}

a:hover {
    color: #cc0000;
    text-decoration: none;
    line-height: 24px;
}

.bg {
    background-image: url(../Image/menu1.gif);
    background-repeat: no-repeat;
    height: 23px;
    width: 47px;
    text-align: center;
}

.nobg {
    background-image: url(../Image/menu2.gif);
    background-repeat: no-repeat;
    height: 23px;
    width: 47px;
    text-align: center;
}

代码

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>TAB切换</title>
	<link href="../Css/tab.css" rel="stylesheet">
</head>

<body>
<div class="div_bg">
	<ul>
		<li id="bg1" onmouseover="change(1)">&nbsp;&nbsp;&nbsp;<a class="white">小说</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
		<li id="bg2" onmouseover="change(2)"><a class="white">非小说</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
		<li id="bg3" onmouseover="change(3)"><a class="white">少儿</a></li>
	</ul>
	<div id="book1">
		<a  href="#" target=_blank>1.时间旅行者的妻子</a><br>
		<a   href="#" target=_blank>2.女心理师（下）</a><br>
		<a   href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
		<a   href="#" target=_blank>4.女心理师（上）</a><br>
		<a   href="#" target=_blank>5.小时候</a><br>
		<a   href="#" target=_blank>6.追风筝的人</a><br>
		<a   href="#" target=_blank>7.盗墓笔记2</a><br>
		<a   href="#" target=_blank>8.输赢</a>
	</div>
	<div id="book2"  >
		<a   href="#" target=_blank>1.人生若只如初见</a><br>
		<a   href="#" target=_blank>2.高效能人士的七个..</a><br>
		<a   href="#" target=_blank>3.求医不如求己</a><br>
		<a   href="#" target=_blank>4.人体使用手册</a><br>
		<a   href="#" target=_blank>5.孩子，把你的手给我</a><br>
		<a   href="#" target=_blank>6.别笑！我是英文单词书</a><br>
		<a   href="#" target=_blank>7.人体经络使用手册</a><br>
		<a   href="#" target=_blank>8.股市稳赚</a>
	</div>
	<div id="book3" >
		<a   href="#" target=_blank>1.斯凯瑞金色童书・..</a><br>
		<a   href="#" target=_blank>2.哈利・波特与“混..</a><br>
		<a   href="#" target=_blank>3.不一样的卡梅拉（..</a><br>
		<a   href="#" target=_blank>4.它们是怎么来的</a><br>
		<a   href="#" target=_blank>5.五・三班的坏小子..</a><br>
		<a   href="#" target=_blank>6.男生日记</a><br>
		<a   href="#" target=_blank>7.哈利・波特与魔法石</a><br>
		<a   href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
	</div>
</div>
<script type="text/javascript">
	var num = 1;
	function change(num) {
		var div1 = document.getElementById("book1");
		var div2 = document.getElementById("book2");
		var div3 = document.getElementById("book3");
		switch (num) {
			case 1:
				div1.style.display = "block";
				div2.style.display = "none";
				div3.style.display = "none";
				break;
			case 2:
				div1.style.display = "none";
				div2.style.display = "block";
				div3.style.display = "none";
				break;
			case 3:
				div1.style.display = "none";
				div2.style.display = "none";
				div3.style.display = "block";
				break;
		}
	}
	window.onload="change(1)";
</script>
</body>
</html>