<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
width: 390px;
height: 220px;
} ul li {
width: 390px;
height: 220px;
border: 1px solid orange;
} ul li img {
width: 384px;
height: 214px;
} .opacity_li {
opacity: 0.5;
} div img {
width: 608px;
height: 424px;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$("ul li").hover(function() {
// over
//鼠标移入当前列透明度为1 其他列为0.5
//$(this).css("opaacity", "1").siblings("li").addClass("opacity_li"); var $imgsrc = $(this).find("img").attr("src");
var $div = "<div><img src='" + $imgsrc + "'/></div>";
$("body").append($div);
$("div img").attr("src", $imgsrc);
}, function() {
// out
//鼠标移出的时候把其他列透明度去掉
//$(this).siblings().removeClass("opacity_li"); $("div").remove();
}).mousemove(function(e) {
$("div").css({
position: "absolute",
left: e.pageX + 10,
top: e.pageY + 10
}); //设置div绝对定位 坐标就是距离鼠标当前的位置
});;
})
</script>
</head> <body>
<ul>
<li>
<img src="data:images/问奈何.png" alt="" />
</li>
<li>
<img src="data:images/夏承凛.png" alt="" />
</li>
<li>
<img src="data:images/怀璧明罪问奈何.png" alt="" />
</li>
</ul>
</body> </html>

jQuery 鼠标移入图片 显示大图并跟随鼠标移动的更多相关文章

  1. JQuery - 点击图片显示大图

    效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  2. jQuery-鼠标经过显示大图并跟随鼠标效果方法封装

    //copyright c by zhangxinxu 2019-1-15 /*由于大图绑定在href属性中,故一般而言,需使用a标签的href指向大图.仅支持png,gif,jpg,bmp四种格式的 ...

  3. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  4. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  5. checkbox下面的提示框 鼠标移入时显示,移出时隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

  7. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. selenium 怎么查找定位鼠标移上去显示,移开鼠标就消失的内容

    场景:鼠标移动到一级菜单上二级菜单才显示,移开鼠标二级菜单就消失,如何查找定位二级菜单 操作: 1.打开F12,点击sources 2.鼠标移动到一级菜单“工单管理” 3.按下键盘“Ctrl+\”,暂 ...

  9. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

随机推荐

  1. web前端学习(一) j2ee环境搭配+jsp中的编码问题

    jsp中的编码问题 pageEncoding是jsp文件本身的编码  contentType的charset是指服务器发送给客户端时的内容编码 我安装tomcat的方法是 安装j2ee的eclipse ...

  2. 详解PPP模式下的产业投资基金运作【基金管理】

       详解PPP模式下的产业投资基金运作[基金管理]     点击标题下「搏实资本」可快速关注 搏实资本 研究型的投资机构,实操型的专家团队 ﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌ 一.产业投资基金概述 ...

  3. C#5.0 异步编程async/await用法

    微软在发布VS2012的同时推出了C#5.0,其中包含了async和await 代码如下: class Program { private static readonly Stopwatch watc ...

  4. navicat修改mysql用户密码,前提是能登陆

    幸亏之前已经连上了数据库后边才忘记密码

  5. Java方法传参的问题

    1.基本数据类型(byte,short,int,long,float,double,boolean,char)的值传递,不改变其值 2.引用数据类型的值传递,改变其值 3.String类型虽然是引用数 ...

  6. java项目小手册

    集合了一些常用的小片段 1. 字符串有整型的相互转换 Java代码 String a = String.valueOf(2); //integer to numeric string int i = ...

  7. 洛谷P2381 圆圆舞蹈

    P2381 圆圆舞蹈 题目描述 熊大妈的乃修在时针的带领下,围成了一个圆圈舞蹈,由于没有严格的教育,奶牛们之间的间隔不一致. 奶牛想知道两只最远的奶牛到底隔了多远.奶牛A到B的距离为A顺时针走和逆时针 ...

  8. leetcode 1-20 easy

    1.Two Sum Given an array of integers, return indices of the two numbers such that they add up to a s ...

  9. OWIN启动类检测

    每个OWIN应用程序都有一个启动类,可以在这个类里为应用程序管道指定组件.有不同的方式可以将启动类与运行时关联起来,这依赖于选择的托管模型(OwinHost,IIS,IIS-Express).本教程中 ...

  10. WatchKit编程指南:概览--Watch应用的体系结构

    Apple Watch应用程序包含两个部分:Watch应用和WatchKit应用扩展.Watch应用驻留在用户的Apple Watch中,只含有故事板和资源文件,要注意它并不包含任何代码.而Watch ...