一、主要的jquery代码
- (function($){
- $.fn.preview = function(){
- var xOffset = 10;
- var yOffset = 20;
- var w = $(window).width();
- $(this).each(function(){
- $(this).hover(function(e){
- if(/.png$|.gif$|.GIF$|.jpg$|.JPG$|.bmp$|.BMP$/.test($(this).attr("bigpic"))){
- $("body").append("<div id='preview'><div><img src='"+$(this).attr('bigpic')+"' /><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);
二、html代码
- <a class="preview" href="150.html" bigpic="http://show.icarlus.com//Upload/photos/4135314.jpg" title="史贝贝"><img src="http://show.icarlus.com//Upload/photos/4135314.jpg" /></a>
- <a class="preview" href="97.html" bigpic="http://show.icarlus.com//Upload/photos/419267.jpg" title="李贤玲"><img src="http://show.icarlus.com//Upload/photos/419267.jpg" /></a>
