jquery实现简单鼠标经过图片预览效果
2024-08-27 12:15:44
html结构:
<div class="prebtn"><img src=""/></div> css代码:
#preview{
position:absolute;
border:2px solid #333;
background:#333;
padding:0px;
display:none;
color:#fff;
}
#preview img{ height:auto; width:auto; max-width: 500px; margin: 0; display: block; }
javascript代码:
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
$(".prebtn").hover(function(e){
var imgsrc=$(this).find("img").attr("src");
$("body").append("<p id='preview'><img src='"+imgsrc+"' alt='Image preview' /></p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
$("#preview").remove();
}); $(".prebtn").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
$(function(){
//鼠标经过预览图片
imagePreview();
});
最新文章
- GroupBy(..)的四种声明方式的理解及调用
- OC中的字典
- IT学习网站集结
- sql server 本地复制订阅 实现数据库服务器 读写分离(转载)
- mybatis mapper.xml 配置文件问题(有的错误xml是不报的) 导致服务无法启动 。
- Linux 下动态库 / 静态库(依赖)
- Android 使用shape来画线
- Java开发 Eclipse使用技巧(转)
- jQuery简单导航示例
- Bootstrap学习-环境安装
- Laravel 源码解读系列第四篇-Auth 机制
- MSBuild Tools解决办法
- 12.Git分支-推送(push)、跟踪分支、拉取(pull)、删除远程分支
- 软件工程(FZU2015) 赛季得分榜,第10回合(alpha冲刺)
- 将一个字符(char)或者一个整形(int)的二进制形式输出
- static_assert enable_if 模板编译期检查
- requirejs案例
- vue 解决页面闪烁问题
- Linq基础知识小记一
- MySQL 性能比较测试:MySQL 5.6 GA -vs- MySQL 5.5