jquery实现的按鼠标滑过方向增加元素边框html页面源码

最新推荐文章于 2023-09-05 17:10:23 发布

mazai5080

最新推荐文章于 2023-09-05 17:10:23 发布

阅读量801

点赞数

分类专栏：前端源码文章标签： html 前端 css

本文链接：https://blog.csdn.net/mazai5080/article/details/124560266

版权

前端源码专栏收录该内容

100 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，jquery实现的按鼠标滑过方向增加元素边框html页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

按鼠标经过的方向控制背景方块元素移动（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10151，需要的朋友，点击下面的链接后，搜索10151，即可获取。

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery插件--鼠标滑过(方向)图片边框特效</title>

	<style type="text/css">
		body{background-color: #272727}
		.wrapper{width: 680px;margin: 50px auto;}
		.img{margin: 10px;width:200px;height:200px;}
	</style>
</head>
<body>

		<div class="wrapper">
			<img src="static/picture/t1.png" class="img">
			<img src="static/picture/t2.png" class="img">
			<img src="static/picture/t3.png" class="img">
			<br>
			<img src="static/picture/t3.png" class="img">
			<img src="static/picture/t1.png" class="img" style="border-radius: 40px; -moz-border-radius : 40px;">
			<img src="static/picture/t2.png" class="img">
			<br>
			<img src="static/picture/t1.png" class="img">
			<img src="static/picture/t2.png" class="img">
			<img src="static/picture/t3.png" class="img">
		</div>

	<script src="static/js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="static/js/jquery.focus-follow.js"></script>
	<script>
		$(function() {
			$(".img").focusFollow({
				wrapper: '#wrapper',
				color: '#00dcff',
				opacity: 0.5,
				margin_horizontal: 8,
				margin_vertical: 8,
				speed: 300,
				timeout: 500
			});
		});
	</script>
</body>
</html>

本源码编码：10151，需要的朋友，点击下面的链接后，搜索10151，即可获取。

mazai5080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现的按鼠标滑过方向增加元素边框html页面源码

大家好，今天给大家介绍一款，jquery实现的按鼠标滑过方向增加元素边框html页面源码（图1）。送给大家哦，获取方式在本文末尾。图1按鼠标经过的方向控制背景方块元素移动（图2）图2源码完整，需要的朋友可以下载学习（图3）图3本源码编码：10151，需要的朋友，点击下面的链接后，搜索10151，即可获取。<!doctype html><html lang="zh"><head> <meta charset="UTF-8
复制链接

扫一扫