jQuery（6）---jQurey鼠标移上移下效果（凡客帆布鞋） -

mywebcode

浏览: 1003728 次

最近访客更多访客>>

u012363178

qq_33632159

cshui

dd_9921

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2181)

社区版块

存档分类

2014-04 ( 138)
2014-03 ( 64)
2014-02 ( 54)
更多存档...

jQuery（6）---jQurey鼠标移上移下效果（凡客帆布鞋）

页面如下：

源码如下：

demo3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo3.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/img.js" charset="GB2312"></script>
<style type="text/css">
ul{
     list-style-type: none;
}
ul li{
   float: left;
   margin-left: 10px;
}
img {
	border: 1px solid threedface;
}


</style>
  </head>
  
  <body>
  <h2 align="center">jQurey鼠标移上移下效果</h2><hr/>
   <div >
   	<ul>
   		<li>
   			<a href="../images/aa1.jpg" ><img alt="凡客帆布鞋" src="../images/aa.jpg"/></a>
   		</li>
   		<li>
   			<a href="../images/bb1.jpg" ><img alt="凡客帆布鞋" src="../images/bb.jpg"/></a>
   		</li>
   		<li>
   			<a href="../images/cc1.jpg" ><img alt="凡客帆布鞋" src="../images/cc.jpg"/></a>
   		</li>
   		
   	
   	
   	
   	</ul>
   
   
   </div>
  </body>
</html>

img.js

$(document).ready(function(){
	//声明创建的div
	var $div
	//添加一个鼠标移上去的事件
	$("li>a").mouseover(function(e){
		$(this).find("img").css({
			
			border : "1px solid red"

		});
		
		//创建
		$div = $("<div><img src='"+this.href+"'/><div>");
		// 设置显示的样式
		$div.css({
					position : "absolute",
					top : e.pageY+20 + "px",
					left : e.pageX+20+ "px"
				});

	
		//把这个div添加到文档中
		$("body").append($div);
	}).mouseout(function(){
		
		
		$div.remove();//删除
		$(this).find("img").css({
			border : "1px solid threedface"
		});

	});
	
	
});

分享到：