使用方法很简单，将下面的 JS 脚本与 JQuery 一同载入，在需要做 Tip 效果的链接上添加一个 tips 属性，属性值就是 Tip 框里要显示的内容。
比如：<a href="javascript:void(0)" tips="这个是提示内容！" />测试提示</a>
想要美化 Tip 框的话完全可以在 tips 属性里加入用来修饰的 html 标签，然后在 CSS 文件里针对 #tip 以及其子元素定义 CSS 就可以了。
比如：<a href="javascript:void(0)" tips="<h3>提示标题</h3><div class='content'>这个是提示内容！</div>" />测试提示</a>
<script type="text/javascript">
$().ready(function(){
$('body').append('<div id="tip"></div>');
$('#tip').css({display:'none',left:'0',top:'0',position:'absolute'});
$('a[tips]').hover(
function(e){
var mouse = $.mousePos(e);
if(mouse.x > $('body').width() - $('#tip').width()){
$('#tip').css('left', $('body').width() + $(document).scrollLeft() - $('#tip').width() - 10 + 'px');
}else{
$('#tip').css('left', mouse.x + 10 + 'px');
}
$('#tip').css('top', mouse.y + 10 + 'px');
$('#tip').html($(this).attr('tips'));
$('#tip').show();
},
function(){
$('#tip').hide();
}
);
});
$.extend({
mousePos:function(e){
var x,y;
var e = e||window.event;
return{
x:e.clientX + $('body').scrollLeft() + $(document).scrollLeft(),
y:e.clientY + $('body').scrollTop() + $(document).scrollTop()
};
}
});
</script>
Magki Javascript jquery
在做一个刷淘宝信用的网站时，需要一个跑马灯的广告效果。网上找的那种用 table 的不太好用，便自己动手写一个。因为程序是用 PHPCMS，其自带了 JQuery，自然也用 JQuery 来实现了。暂时写了个简单的，以后有时间再完善吧。
html 部分：
<div id="marqee">
<div id="leftButton"></div>
<div id="marqeeArea">
<ul>
<li><img src="1.gif" /></li>
<li><img src="2.gif" /></li>
<li><img src="3.gif" /></li>
</ul>
</div>
<div id="rightButton"></div>
</div>
CSS 部分：
#marqee{ width:960px; height:61px;}
#marqee #leftButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #rightButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #marqeeArea{ position:relative; width:912px; height:61px; overflow:hidden; float:left;}
#marqee #marqeeArea ul{ position:relative; display:block; height:61px; overflow:hidden; list-style:none;}
#marqee #marqeeArea ul li{ width:121px; height:61px; float:left; text-align:center;}
阅读全文...
Magki Javascript jquery
img {
vertical-align: middle;
max-width:100px; /* FF IE7 */
max-height:80px; /* FF IE7 */
width:expression(this.width > 100 && this.width > this.height ? 100 : true);
height:expression(this.height > 80 && this.height > this.width ? 80 : true);
overflow:hidden;
}
这个样式就是将超过 100x80 的图片按比例自动缩小，支持 IE6,IE7,IE8,FF。里面的 vertical-align: middle; 是垂直居中，不过这个仅当图片在 table 里才有效。
Magki Resources
这个缩略图生成类是根据从 PHPCMS 挖出来的相关函数简单修改而来的。自觉使用起来挺方便的，呵呵。
用法也简单，范例如下：
$thumb = new thumb(str_replace("\\","/",dirname(__FILE__))."/"); \\定义根物理路径
$thumb->get('images/107.jpg'); \\输入图片路径生成缩略图并返回缩略图路径
以上写法也可以改成
$thumb = new thumb();
$thumb->get('E:/htdocs/magki/include/images/107.jpg');
不过前一种返回的是缩略图的相对路径，而后一种是返回缩略图的绝对物理路径。
缩略图的命名只定义了三个标签如下：
%maxwidth% get 方法中所定义的缩略图的最大宽度，默认 100
%maxheight% get 方法中所定义的缩略图的最大高度，默认 100
%basename% 所要生成缩略图的原图文件名
类中默认使用的缩略图命名是 thumb_%maxwidth%_%maxheight%_%basename% 像上面范例中所生成的缩略图命名就是根据默认来生成的，所得到的缩略图文件名为 thumb_100_100_107.jpg。有需要的可以自己扩展更多的缩略图命名标签。
另外，这个类的 get 方法还有一个参数是 autocut，如果赋值为 1 （默认值）则如果原图高宽比例和所指定的缩略图高宽比例不一致则会进行裁剪而非变形拉伸。
阅读全文...
Magki PHP 代码片段