zoukankan      html  css  js  c++  java
  • 鼠标滑过显示图片

    当鼠标滑过某个制定位置,弹出div图片。移出,图片消失。

    1、js 

    $(function() {
    
    	    $("#div_Content").mouseover(function() {
    	        $(this).show();
    	    });
    
    	    $("#div_Content").mouseleave(function() {
    	        $(this).hide();
    	    });
    
    
    	    //初次加载
    	    Loading();
    
    	    //鼠标经过
    	    $(".a_float").mousemove(function() {
    
    	        var _showDiv = $(this).attr("rel");
    	        
    	        $("#" + _showDiv + " img").eq(0).attr("src","<%=path %><spring:message code="head.weChatFocus"/>" );
    
    	        //替换完成
    
    	        $(this).mouseover(function() {
    
    	            var _l = getLeft(this);
    	            var _t = getTop(this) + $(this).height();
    	            $("#" + _showDiv).css("top", _t); $("#" + _showDiv).css("left", _l);
    	            $("#" + _showDiv).show();
    	        });
    	        $(this).mouseleave(function() {
    
    	            $("#" + _showDiv).hide();
    	        });
    
    	    });
    
    	});
    
    	//鼠标经过
    
    	function getTop(e) {
    	    var offset = e.offsetTop;
    	    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    	    return offset;
    	}
    	function getLeft(e) {
    	    var offset = e.offsetLeft;
    	    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    	    return offset;
    	}
    
    
    	function Loading() {
    
    	    $(".a_float").each(function() {
    	        var _showDiv = $(this).attr("rel");
    
    	        $("#" + _showDiv + " img").eq(0).attr("src", "<%=path %><spring:message code="head.weChatFocus"/>");
    
    	        //替换完成
    
    	        $(this).mouseover(function() {
    	            var _l = getLeft(this);
    	            var _t = getTop(this) + $(this).height();
    	            $("#" + _showDiv).css("top", _t); $("#" + _showDiv).css("left", _l);
    	            $("#" + _showDiv).show();
    	        });
    	        $(this).mouseleave(function() {
    	            $("#" + _showDiv).hide();
    	        });
    
    	    });
    	}

     2、页面引入

    <!--浮动产品模板开始-->
    	<div id="div_Content" class="jy_recom div_style"><a href="#" target="_blank"><img src="img/wechart.jpg" alt="" width="206" height="262" /></a>
    	</div>
    	<!--浮动产品模板结束-->
  • 相关阅读:
    Newtonsoft.Json 处理多态类型的反序列化
    33条C#和.NET经典面试题目及答案
    转:原码,反码,补码详解
    使用OpenXML操作Office文档
    WPF的Binding学习笔记(二)
    WPF的Binding学习笔记(一)
    M6: 使用摄像头(CameraCaptureUI)
    M5: 使用StorageFile
    NYOJ144_小珂的苦恼_C++
    搜索水题四连发_C++
  • 原文地址:https://www.cnblogs.com/pigga/p/10098248.html
Copyright © 2011-2022 走看看