各位大神，大佬们求俩小段JavaScript代码急用

qq_42247370 2018-06-15 03:19:17

第一个设置一个初始的div，宽高均为100，页面中部居中，背景演示为黑色。div上方有5个控制按钮，分别为变宽、变高、变色、隐藏、重置。分别对应为变宽为宽度+100，变高为高度+100，变色为背景演示转换为红色，隐藏为整体div消失，重置转换为初始状态。
第二个作一个循环滚动的导航链接，设计一个链接到外部地址的多链接，设置导航链接从左至右进行滚动循环，当鼠标悬停在链接上时，链接停止滚动，鼠标移出链接，则链接继续进行循环

...全文

1120 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

柴九小哥 2018-07-04

打赏
举报

好好学习哦。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>

$(function(){

var num = 0;

$("#bt button").click(function() {

	var id = $(this).html() ;

	if (id == '变宽') {

		$(".dir").width(200)

	} else if (id == '变高') {

		$(".dir").height(200)

	} else if (id == '变色') {

		$(".dir").css("background-color", "#F00")

	} else if (id == '隐藏') {

		$(".dir").hide()

	}

	else {

		$(".dir").width(100), $(".dir").height(100) ,$(".dir").css("background-color", "#000");

		$(".dir").show()

	}

});



function goLeft() {

	if (num == -750) {

		num = 0

	}

	num -= 1;

	$(".scroll").css({

		left: num

	})

}

var timer = setInterval(goLeft, 20);

$(".box").hover(function() {

	clearInterval(timer)

}, function() {

	timer = setInterval(goLeft, 20)

})

		

		

})

</script>

<style type="text/css">

div {display: block;}

ul li{ margin:0px;clear: both; padding:0px;outline: 0;list-style:none; float:left}

.box{margin:auto; width:600px; height:30px; line-height:30px; margin-top:50px; border:#F60 1px solid; padding:5px; position:relative; overflow:hidden}

.box ul{ margin:0px;}

.scroll {width:600px;position:absolute;left:0px;top:0px;}

.scroll a{width:100px;float:left;line-height:40px;text-align:center;}

</style>

</head>



<body>



<div id="bt"  style="width:600px; height:60px; margin:auto; line-height:60px; text-align:center">

<button>变宽</button> <button>变高</button> 

<button>变色</button> <button>隐藏</button>

<button>重置</button>

</div>





<div class="dir" style="color:#fff; margin:auto; background:#000; width:100px; height:100px; text-align:center; line-height:100px;">初始的div</div>

<div class="box">

<ul class="scroll">

<a href="http://www.baidud.com" target="_blank">链接1</a>

<a href="http://www.baidud.com" target="_blank">链接2</a>

<a href="http://www.baidud.com" target="_blank">链接3</a>

<a href="http://www.baidud.com" target="_blank">链接4</a>

<a href="http://www.baidud.com" target="_blank">链接5</a>

<a href="http://www.baidud.com" target="_blank">链接6</a>

<a href="http://www.baidud.com" target="_blank">链接7</a>

</ul>

</div>



</body>

</html>