jquery.focus-follow是一款鼠标悬浮方向感知选择插件-BFW插件库

jquery.focus-follow是一款鼠标悬浮方向感知选择插件

jquery.focus-follow是一款鼠标悬浮方向感知选择插件。

使用方式：

第一步引入jquery

第二步引入本插件并准备dom元素

<div class="wrapper">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" class="img">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" class="img">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" class="img">
    </br>
    <img src="//repo.bfw.wiki/bfwrepo/image/5e3240ab7f831.png" class="img">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" class="img">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" class="img">
    </br>
    <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" class="img">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" class="img">
    <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" class="img">
</div>

第三步配置参数

$(".img").focusFollow({
      wrapper: '#wrapper',//图片所在父元素
       color: '#00dcff',
       opacity:1.0,
       margin_horizontal: 8,
      margin_vertical: 8,
      speed: 300,
       timeout: 500
});

配置参数详解：

参数	类型	默认值	描述
color	string	"orange"	当前图片边框的颜色
opacity	float	1.0	边框的透明度，从0.0-1.0
speed	int	400	从上一张图片移动到下一张图片的时间，单位毫秒
margin	int	2	边框的margin
margin_horizontal	int	2	边框的水平margin
margin_vertical	int	2	边框的垂直margin
border_radius	int	auto	当前鼠标滑过图片边框的半径
wrapper	string	-	包裹容器的id或class选择器，如果不填该参数将不会有效果
timeout	int	200	鼠标滑过图片后边框出现的总时长，单位毫秒
z-index	int	-1	边框的z-index属性

完整代码：

<!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">


    <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="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" class="img">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" class="img">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" class="img">
        </br>
        <img src="//repo.bfw.wiki/bfwrepo/image/5e3240ab7f831.png" class="img">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" class="img" >
        <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" class="img">
        </br>
        <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" class="img">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" class="img">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" class="img">
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/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>

jquery.focus-follow是一款鼠标悬浮方向感知选择插件

网友评论0

colpick.js

jcdate.js

laydate.js

PCASClass.js

distpicker.js

mPicker.js

calendar.js

jquery.range.js

Mdate.js

dateRange.js