【javascript】菜单滚动至顶部...-继续分享一个我自己写的 ToolT...-Javascript图像处理之虚拟边缘

当前位置: 编程技术>WEB前端

本页文章导读:

▪【javascript】菜单滚动至顶部后固定现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部。其实就是改变 position 的值。html 代码：<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="U.........

▪继续分享一个我自己写的 ToolTip提示插件继续分享一个我自己写的 ToolTip提示插件，希望大家支持我，给我点评论，哪怕骂我的也好啊，让我知道有人在关注我“小豆” 嘿嘿。废话不多说上代码！ 1 $.fn.ToolTip = function (option) { .........

▪Javascript图像处理之虚拟边缘　　原理来自Justany_WhiteSnow的Javascript图像处理——虚拟边缘一文。　　/* * BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh * BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba * BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedc.........

[1]【javascript】菜单滚动至顶部后固定

来源: 发布时间: 2013-11-06

现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部。其实就是改变 position 的值。

html 代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/blog_article/css/base.css" media="all"/>
<style type="text/css">
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
.header{height:150px;}
#nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
</style>
</head>
<body>
<div >
<div ></div>
<div id="nav">
<a href="#">11111</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>
<a href="#">55555</a>
</div>
</div>
</bo

[2]继续分享一个我自己写的 ToolTip提示插件

来源: 发布时间: 2013-11-06

继续分享一个我自己写的 ToolTip提示插件，希望大家支持我，给我点评论，哪怕骂我的也好啊，让我知道有人在关注我“小豆” 嘿嘿。废话不多说上代码！

1 $.fn.ToolTip = function (option) {
2 var defaults = {
3 direction: "down",
4 star: function () { },
5 from: $(this),
6 url: '../images/arrow.png'
7 };
8
9 //方法内基础变量
10 var opt = $.extend(defaults, option),
11 dirarray = ['up', 'down', 'left', 'right'],
12 left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0';
13
14 //开始遍历
15 $(this).each(function () {
16 var obj = $(this);
17 obj.on({
18 mouseenter: function () {
19 GetPos(obj);
20 var objtip = $("<div ></div>").css({
21 position: "absolute",
22 top: top,
23 left: left,
24 border: "solid 1px #ccc",
25 width: $("#" + obj.attr("data-tooltip")).outerWidth(true),
26 height: $("#" + obj.attr("data-tooltip")).outerHeight(true),
27 'border-radius': '8px 8px',
28 'background-color': '#fff',
29 'z-index': 999
30 }).appendTo(obj);
31 var objtiphead = $("<div></div>").css({
32 width: arrow_w == 30 ? objtip.outerWidth(true) : 15,
33 height: arrow_h == 30 ? objtip.outerHeight(true) : 15,
34 position: "absolute",
35 top: _top,
36 left: _left
37 }).appendTo(objtip);
38
39 var objtiparrow = $("<div></div>").css({
40
41 width: arrow_w,
42 height: arrow_h,
43 "background-image": "url("/blog_article/opt.url")",
44 "background-repeat": "no-repeat",
45 "background-position": arrow
46 }).appendTo(objtiphead);
47 objtip.append($("#" + obj.attr("data-tooltip")).clone().show());
48
49 objtip.on({
50 mouseenter: function () {
51
52 obj.data({
53 attip: true
54 });
55 }, mouseleave: function () {
56
57 $(".tooltip").remove();
58 obj.removeData("attip");
59 }
60 });
61 }
62 , mouseleave: function () {
63 if (!obj.data("attip"))
64 $(".tooltip").remove();
65 obj.removeData("attip");
66 }
67
68 });
69 });
70 //得出位置
71 var GetPos = function (obj) {
72 var objtip = $("#" + obj.attr("data-tooltip"));
73 var tooltippos = {
74 up: function () {
75 arrow_w = 30; arrow_h = 15;
76 top = obj.position().top - 12 - objtip.outerHeight(true

[3]Javascript图像处理之虚拟边缘

来源: 发布时间: 2013-11-06

　　原理来自Justany_WhiteSnow的Javascript图像处理——虚拟边缘一文。　　

/*
* BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh
* BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba
* BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedcba
* BORDER_WRAP: efgh|abcdefgh|abcd
* BORDER_CONSTANT: iiiiiiii|abcdefgh|iiiiiiii with some specified 'i'(default value [0, 0, 0, 255])
*/

(function () {
function imageVariousBorder(iCanvas, url, borderType, orientation, value) {
this.canvas = iCanvas;
this.iCtx = this.canvas.getContext("2d");
this.url = url;
this.borderType = borderType;
this.orientation = orientation || "bottom";
this.value = value || [0, 0, 0, 255];
}

imageVariousBorder.prototype = {
imread: function (_image) {
var width = _image.width,
height = _image.height;
this.iResize(width, height);
this.iCtx.drawImage(_image, 0, 0);
var imageData = this.iCtx.getImageData(0, 0, width, height),
tempMat = new Mat(height, width, imageData.data);
imageData = null;
this.iCtx.clearRect(0, 0, width, height);
return tempMat;
},
iResize: function (_width, _height) {
this.canvas.width = _width;
this.canvas.height = _height;
},
RGBA2ImageData: function (_imgMat) {
var width = _imgMat.col,
height = _imgMat.row;
var imageData = this.iCtx.createImageData(width, height);
imageData.data.set(_imgMat.data);
return imageData;
},
render: function () {
var img = new Image();
var _this = this;
img.onload = function () {
var myMat = _this.imread(img);
var width = myMat.col;
var height = myMat.row;
if (_this.borderType == "BORDER_WRAP") {
width = width/2;
height = height/2;
}
var strOrientation = {
"left": [0, width, 0, 0],
"right": [0, 0, 0, width],
"bottom": [0, 0, height, 0],
"top": [height, 0, 0, 0],
"left_right": [0, width, 0, width]
};
var newImage = copyMakeBorder(myMat,
strOrientation[_this.orientation][0],
strOrientation[_this.orientation][1],
strOrientation[_this.orientation][2],
strOrientation[_this.orientation][3],
_this.borderType,
_this.value);
var newIamgeData = _this.RGBA2ImageData(newImage);
var newWidth = newImage.col;
var newHeight = newImage.row;
_this.iResize(newWidth, newHeight);
_this.iCtx.putImageData(newIamgeData, 0, 0);
};
img.src = this.url;
}
};

function Mat(_row, _col, _data, _buffer) {
this.row = _row || 0;
this.col = _col || 0;
this.channel = 4;
this.buffer = _buffer || new ArrayBuffer(_row * _col * 4);
this.data = new Uint8ClampedArray(this.buffer);
_data && this.data.set(_data);
this.bytes = 1;
this.type = "CV_RGBA";
}

function copyMakeBorder(_src, _top, _left, _bottom, _right, _borderType, _value) {
if (_src.type != "CV_RGBA") {
console.log("not support this type");
} else if (_borderType == "BORDER_CONSTANT") {
return copyMakeConstBorder_8U(_src, _top, _left, _bottom, _right, _value);
} else {
return copyMakeBorder_8U(_src, _top, _left, _bottom, _right, _borderType);
}
}

function borderInterpolate(_p, _len, _borderType) {
if (_p < 0 || _p >= _len) {
switch (_borderType) {
case "BORDER_REPLICATE":