jquery select2的使用心得(推薦)
714
2024-02-10
這次分享的代碼是jQuery插件，HovertreeImg是一個圖片輪播jquery插件，使用方便，可以設置大小，圓點位置等，代碼簡潔
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<base target="_blank" />
<meta charset="utf-8" />
<style>#img {width:768px;height:66px;overflow:hidden}
#img img{width:100%;height:100%;}
#img #imgcontent{display:none}a{color:blue}</style>
</head>
<body>
<div id="img">
<a title="Img" target="_blank"><img src="http://www.gimoo.net/jq/img/img.jpg" alt="Img插件" /></a>
<div id="imgcontent">
<a title="HTML5百分比餅圖" target="_blank"><img src="http://www.gimoo.net/themes/img/easysector.gif" alt="EasySector插件" /></a>
<a title="見縫插針" target="_blank"><img src="http://www.gimoo.net/themes/img/jfcz.gif" alt="見縫插針" /></a>
</div>
</div>
<div>
<br /><br />
</div>
<script src="http://www.gimoo.net/ziyuan/jquery/jquery-1.12.0.min.js"></script>
<script src="http://www.gimoo.net/jq/hovertreeimg/jquery.img.js"></script>
<script>
$("#img").hovertreeimg({
"h_circlePosition": "",//left,right,center
"h_width": 768,
"h_height": 66,
"h_borderColor":"silver",
"h_circleWidth": 14
});
</script>
</body>
</html>
jquery.img.js
/*!
* HovertreeImg(jQuery Plugin)
* version: 1.0.0
* Copyright (c) 2016 HoverTree
*/
(function ($) {
$.fn.hovertreeimg = function (options) {
var settings = $.extend({
h_time:"3000",//切換時間
h_borderColor: "transparent",//邊框顏色
h_width: "500",//寬度
h_height: "200",//高度
h_circleWidth: "18",//方框邊長
h_circleColor:"silver",//圓點顏色
h_currentCircleColor: "red",//當前圓點顏色
h_circlePosition:"right"http://圓點位置
}, options);
var h_hovertreeimg = $(this);
if (h_hovertreeimg.length < 1)
return;
h_hovertreeimg.css({
"position": "relative", "border":"solid 1px "+ settings.h_borderColor
, "width": settings.h_width, "height": settings.h_height
, "overflow": "hidden"
})
var h_hovertreeimgcontent = h_hovertreeimg.find(">div#hovertreeimgcontent");
h_hovertreeimgcontent.hide();
var h_hovertreeimgcurrent = h_hovertreeimg.find(">a");
h_hovertreeimgcurrent.wrap("<div id='replaceframe'></div>");
h_replaceFrame = h_hovertreeimg.find("#replaceframe").css({ "width": "100%", "height": "100%" });
//構(gòu)造圓點框
$('<div class="hovertreeimgpoint"></div>').appendTo(h_hovertreeimg);
var h_hovertreeimgpoint = h_hovertreeimg.find(".hovertreeimgpoint");
h_hovertreeimgcontent.prepend(h_hovertreeimgcurrent.clone(true));//復制到總a集合
var h_hovertreeimgitems = h_hovertreeimgcontent.children();//所有a標簽集合
var h_hovertreeimglength = h_hovertreeimgitems.length;//所有輪播項數(shù)量
var h_isswitch = true;//是否輪播
var h_circleWidth = parseInt(settings.h_circleWidth);
//加邊框與間隔
var h_circleFrameWidth = (h_circleWidth + 4) * h_hovertreeimglength+2;
h_hovertreeimgpoint.css({
"height": (h_circleWidth + 4), "position": "absolute", "bottom": "0px",
"display": "inline-block"
})
//設置圓點位置
switch (settings.h_circlePosition) {
case 'right':
h_hovertreeimgpoint.css({
"right": "0px"
})
break;
case 'left':
h_hovertreeimgpoint.css({
"left": "0px"
})
break;
default:
h_hovertreeimgpoint.css({
"left": "0px",
"right": "0px",
"width": h_circleFrameWidth + "px",
"margin": "0px auto"
})
break;
}
//切換索引
var h_hovertreeimgindex = 1;
if (h_hovertreeimglength < 2)
h_hovertreeimgindex = 0;
//構(gòu)造圓點
for (var h_i = 0; h_i < h_hovertreeimglength; h_i++) {
h_hovertreeimgpoint.append("<div hovertreeimgdata='" + h_i + "' id='hovertreeimgpoint" + h_i + "'></div>");
}
h_pointset = h_hovertreeimgpoint.find("div");//圓點集合
h_pointset.css({
"background-color": settings.h_circleColor, "width": settings.h_circleWidth
, "height": settings.h_circleWidth
, "border": "1px solid white"
, "margin-left": "2px",
"display": "inline-block",
"border-radius": "50%"
})
h_pointset.eq(0).css({ "background-color": settings.h_currentCircleColor });
//設置當前圖片
function imgswitch(imgindex) {
h_replaceFrame.html(h_hovertreeimgitems.eq(imgindex));
h_pointset.css({ "background-color": settings.h_circleColor });
h_pointset.eq(imgindex).css({ "background-color": settings.h_currentCircleColor });
}
h_replaceFrame.find("img").css({
"width": settings.h_width
, "height": settings.h_height
})
//圓點操作
h_pointset.hover(function () {
h_isswitch = false;//光標懸停到圓點停止切換
imgswitch($(this).attr('hovertreeimgdata'));
}
, function () {
h_isswitch = true;
}
)
//切換
setInterval(function () {
if (!h_isswitch)
return;
imgswitch(h_hovertreeimgindex);
h_hovertreeimgindex = (h_hovertreeimgindex + 1) % h_hovertreeimglength;
}, settings.h_time)
//光標懸停到圖片停止切換
h_replaceFrame.hover(function () { h_isswitch = false; }, function () { h_isswitch = true; })
}
}(jQuery));
