jquery实现鼠标滑过小图查看大图的方法

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法。分享给大家供大家参考。具体实现方法如下：

1. CSS部分：

<style type="text/css">
ul{
  list-style:none;
}
li{
  float:left;
  margin-left:10px;
}
img{
  border:#CCCCCC solid 1px;
}
#max{
  position:absolute;
  display:none; /*隐藏层*/
}
</style>

2. HTML部分：

苹果产品列表：
<ul>
<li><a href="images/apple_1_bigger.jpg"><img src="images/apple_1.jpg" /></a>
<li><a href="images/apple_2_bigger.jpg"><img src="images/apple_2.jpg" /></a>
<li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" /></a>
<li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" /></a>
</ul>

3. javascript部分：

<script>
$(document).ready(function(){
  //e 事件对象，可以通过该事件对象获取事件的参数 e.pageX - X轴，距浏览器的左边的距离 e.pageY - y轴，距浏览器的顶端的距离
  $("a").mouseover(function(e){
  //鼠标移上去 向body追加大图元素
    //大图的路径：当前连接的href属性值为大图的路径
    var $imgSrc = $(this).attr("href");
    var $maxImg ="<div id='max'><img src='"+$imgSrc+"'></div>";
    //在body中添加元素
    $("body").append($maxImg);
    //设置层的top和left坐标，并动画显示层
    $("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow');
  }).mouseout(function(){
  //鼠标移开删除大图所在的层
    $("#max").remove();
  }).mousemove(function(e){
  //鼠标移动时改变大图所在的层的坐标
    $("#max").css("top", e.pageY+20).css("left",e.pageX+10);
  });
});
</script>

希望本文所述对大家的jquery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery实现移动端点击图片查看大图特效

    jquery实现移动端点击图片查看大图特效

    本文的需求很简单:点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css&quo

  • jQuery实现简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单 图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器 初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如

  • JQuery中form验证出错信息的查看方法

    JQuery中form验证出错,可以采用以下方式来查看具体input的出错信息 复制代码 代码如下: If(!$('form').valid()) { $($('form').validate().errorList).each(function (index, item) { Console.log($($(item).attr('element)).attr('name') + ' ' + $($(item).attr('element)).attr('message')); }); }

  • jQuery遍历页面所有CheckBox查看是否被选中的方法

    本文实例讲述了jQuery遍历页面所有CheckBox查看是否被选中的方法.分享给大家供大家参考.具体如下: $('#tbl').find(':checkbox').each(function(){ if ($(this).is(":checked")) { //操作 } }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • 基于jQuery实现的查看全文功能【实用】

    话不多说,请看具体实例 自己引用jQuery.js版本 查看全文---收起(文本内容少于四行,不显示查看全文---收起,超过五行时才显示出来并有此功能) <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery1.7.2.min.js"></s

  • jquery实现点击查看更多内容控制段落文字展开折叠效果

    jquery实现点击查看更多内容控制段落文字展开折叠效果

    本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能,在很多大网站都有在用,像一些电影简介.产品介绍有时候为了页面的布局效果,常常默认是隐藏了一部分,用户想看的时候可以点击后展开. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <

  • 基于jQuery实现表格的查看修改删除

    基于jQuery实现表格的查看修改删除

    效果图: HTML: <table id="table"> <tr> <th>姓名</th> <th>年龄</th> <th>职位</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td&

  • 查看大图功能代码jquery版

    复制代码 代码如下: /*查看大图*/ var screenheight = $(window).height(); var screenwidth = $(window).width(); var loadCSS = function(){ var screenwidth = $(window).width(); var screenheight = $(window).height(); $("div.lookBigPicture").css({"left":s

  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    使用jQuery还可以让我们从各大浏览器不兼容的噩梦中解脱出来,最新版的jQuery还增强的对HTML5的支持,使得我们更加应该使用它.但是jQuery的源码很长,有些地方的实现还很巧妙,使得我们仅仅会javascript也未必能很好的理解每个函数是怎么运行的.下面就让我分享我学习jQuery源码的时候使用的几个工具和应该了解的问题. 这个jquery源代码查看器,还不是很强大,只是能够简单的查看函数引用,但是不能返回. 我上这个网上下载下来了,准备改进一下,你们可以先下载来用一用,有什么意见和

  • jQuery输入城市查看地图使用介绍

    jQuery输入城市查看地图使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> //在这里要注意js引入的先后顺序 <link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" /> <link href=&qu

  • jQuery实现点击查看大图并以弹框的形式居中

    jQuery实现点击查看大图并以弹框的形式居中,实现的关键代码如下所示: *{margin:0;padding:0;} .tab_bg{display:none;width:100%;height:100%;background:#282829;z-index:99;position:absolute;} .tab_img{width:100px;height:100px;margin:20px;} .tab_img img{width:100%;height:100%;} .bigImg{di

  • jQuery根据纬度经度查看地图处理程序

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> //在这里要注意js的引入顺序 <link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" /> <link href="

随机推荐