// JavaScript Document
//copyright c by zhangxinxu 2009-10-17
//http://www.zhangxinxu.com
/*由于大图绑定在href属性中,故一般而言,需使用a标签的href指向大图。仅支持png,gif,jpg,bmp四种格式的图片。用法是:目标.preview();
例如:<a href="xx.jpg">图片</a>
$("a").preview();就可以了
*/
(function($){
$.fn.preview = function(){
var xOffset = 10;
var yOffset = 20;
var w = $(window).width();
$(this).each(function(){
$(this).hover(function(e){
if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("href"))){
$("body").append("<div id='preview'><div><img src='"+$(this).attr('href')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
}else{
$("body").append("<div id='preview'><div><p>"+$(this).attr('title')+"</p></div></div>");
}
$("#preview").css({
position:"absolute",
padding:"4px",
border:"1px solid #f3f3f3",
backgroundColor:"#eeeeee",
top:(e.pageY - yOffset) + "px",
zIndex:1000
});
$("#preview > div").css({
padding:"5px",
backgroundColor:"white",
border:"1px solid #cccccc"
});
$("#preview > div > p").css({
textAlign:"center",
fontSize:"12px",
padding:"8px 0 3px",
margin:"0"
});
if(e.pageX < w/2){
$("#preview").css({
left: e.pageX + xOffset + "px",
right: "auto"
}).fadeIn("fast");
}else{
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");
}
},function(){
$("#preview").remove();
}).mousemove(function(e){
$("#preview").css("top",(e.pageY - xOffset) + "px")
if(e.pageX < w/2){
$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
}else{
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
}
});
});
};
})(jQuery);
//copyright c by zhangxinxu 2009-10-17
//http://www.zhangxinxu.com
/*由于大图绑定在href属性中,故一般而言,需使用a标签的href指向大图。仅支持png,gif,jpg,bmp四种格式的图片。用法是:目标.preview();
例如:<a href="xx.jpg">图片</a>
$("a").preview();就可以了
*/
(function($){
$.fn.preview = function(){
var xOffset = 10;
var yOffset = 20;
var w = $(window).width();
$(this).each(function(){
$(this).hover(function(e){
if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("href"))){
$("body").append("<div id='preview'><div><img src='"+$(this).attr('href')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
}else{
$("body").append("<div id='preview'><div><p>"+$(this).attr('title')+"</p></div></div>");
}
$("#preview").css({
position:"absolute",
padding:"4px",
border:"1px solid #f3f3f3",
backgroundColor:"#eeeeee",
top:(e.pageY - yOffset) + "px",
zIndex:1000
});
$("#preview > div").css({
padding:"5px",
backgroundColor:"white",
border:"1px solid #cccccc"
});
$("#preview > div > p").css({
textAlign:"center",
fontSize:"12px",
padding:"8px 0 3px",
margin:"0"
});
if(e.pageX < w/2){
$("#preview").css({
left: e.pageX + xOffset + "px",
right: "auto"
}).fadeIn("fast");
}else{
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");
}
},function(){
$("#preview").remove();
}).mousemove(function(e){
$("#preview").css("top",(e.pageY - xOffset) + "px")
if(e.pageX < w/2){
$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
}else{
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
}
});
});
};
})(jQuery);
解决方案 »
- 看js框架源码里面好多语法看不懂,希望大家能推荐一款较全的javascript语法手册或教程
- 谁有javascript的技术手册,或者教程(chm格式的最好)
- 请教高手,利用javascript如何遍历注册表的目录
- 大哥们帮忙,跪求execCommand("AbsolutePosition",false,true)如何用的?
- jQuery easyui怎么获取datagrid某一列的值之和呢?
- 动态插入行
- 难道无人能解决JSP如何连接数据库吗?
- 我的浏览器被不明代码封住了一些功能,怎么办?
- 如何读取本地磁盘驱动器?
- 刷新的问题
- 怎么屏蔽国外免费空间的广告?
- 高手请进,jquery一个函数IE下不能执行
用法是:目标.preview();
例如:<P href="xx.jpg">图片</a>
$("P").preview();例二、
用法是:目标.preview();
例如:<SPAN href="xx.jpg">图片</a>
$("SPAN").preview();
var yOffset = 20;
調整大圖位置部份,調整這兩個參數!