jQuery 鼠标移入图片 显示大图并跟随鼠标移动
<!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 鼠标移入图片 显示大图并跟随鼠标移动的更多相关文章
- JQuery - 点击图片显示大图
效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...
- jQuery-鼠标经过显示大图并跟随鼠标效果方法封装
//copyright c by zhangxinxu 2019-1-15 /*由于大图绑定在href属性中,故一般而言,需使用a标签的href指向大图.仅支持png,gif,jpg,bmp四种格式的 ...
- 30款css3实现的鼠标经过图片显示描述特效
今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- checkbox下面的提示框 鼠标移入时显示，移出时隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 纯css3鼠标经过图片显示描述特效
http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览 ...
- js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- selenium 怎么查找定位鼠标移上去显示，移开鼠标就消失的内容
场景:鼠标移动到一级菜单上二级菜单才显示,移开鼠标二级菜单就消失,如何查找定位二级菜单 操作: 1.打开F12,点击sources 2.鼠标移动到一级菜单“工单管理” 3.按下键盘“Ctrl+\”,暂 ...
- 使用jQuery动态改变图片显示大小
当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...
随机推荐
- GIL(全局解释器锁) 理解
GIL 锁,全局解释器锁,作用就是,限制多线程同时执行,保证同一时间内只有一个线程在执行. 线程非独立的,所以同一进程里线程是数据共享,当各个线程访问数据资源时会出现竞状态,即数据可能会同时被多个 ...
- PHP搜索优化 sphinx 搭建测试
安装.环境:win7 64位 1.下载sphinx文件包 下载地址:http://sphinxsearch.com/downloads/archive/ 2.解压到D:/sphinx.新建文件夹dat ...
- Hackerrank--Ashton and String(后缀数组）
题目链接 Ashton appeared for a job interview and is asked the following question. Arrange all the distin ...
- 读书笔记--Head First JavaScript 目录
1.交互式网络 2.存储数据 3.探索客户端 4.决策 5.循环 6.函数 7.表单与验证 8.驾驭网页 9.为数据带来生命 10.创建自定义对象 11.除错务尽 12.动态数据
- java 7,8 排序异常
排序报 java.lang.IllegalArgumentException: Comparison method violates its general contract! 要明确返回-1, 0, ...
- Mybatis insert返回主键ID
Mybatis insert语句书写 <insert id="insertSelective" useGeneratedKeys="true" keyPr ...
- JSP向后台传 递 参 数 的四种方式
一.通过Form表单提交传值 客户端通过Form表单提交到服务器端,服务器端通过 Java代码 request.getParameter(String xx); 来取得参数(xx)为参数名称.通过ge ...
- Ubuntu18.04 修改IP地址、查看网关、防火墙
1. Ubuntu18.04 修改IP地址 修改 sudo vim /etc/netplan/50-cloud-init.yaml文件 # This file is generated from in ...
- Oracle 优化效率
一.链接: ORACLE多表查询优化 oracle的 分表 详解 -----表分区 Oracle数据库查询优化方案(处理上百万级记录如何提高处理查询速度) 数据库SQL优化大总结之 百万级数据库优化方 ...
- 【洛谷P1827】【USACO】 美国血统 American Heritage 由二叉树两个序列求第三个序列
P1827 美国血统 American Heritage 题目描述 农夫约翰非常认真地对待他的奶牛们的血统.然而他不是一个真正优秀的记帐员.他把他的奶牛 们的家谱作成二叉树,并且把二叉树以更线性的&q ...