jquery实现 悬浮显示,例子显示图片
来源:互联网 发布:extmail windows ad 编辑:程序博客网 时间:2024/05/02 00:26
无聊写的一个小demo
html:
js:
效果图:
html:
<style type="text/css"> #preview {position:absolute;background:#fff;padding:10px;display:none;}</style><a id="apreview" title="qqqqqq" class="btn" href="">立即注册</a>
js:
this.imagePreview = function () { this.xOffset = 250; this.yOffset = -330; this.imgSr = "images/tmp_0002.jpg"; $("#apreview").hover(function (e) { this.t = this.title;//显示在图片下的标题 this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $("body").append("<p id='preview'><img src='" + imgSr + "' alt='Image preview' />" + c + "</p>"); $("#preview") .css("top", (e.pageY - xOffset) + "px") .css("left", (e.pageX + yOffset) + "px") .fadeIn("fast"); }, function () { this.title = this.t; $("#preview").remove(); }); $("#apreview").mousemove(function (e) { $("#preview") .css("top", (e.pageY - xOffset) + "px") .css("left", (e.pageX + yOffset) + "px"); }); }; $(document).ready(function () { imagePreview(); });
效果图:
1 0
- jquery实现 悬浮显示,例子显示图片
- jquery实现 鼠标悬浮 显示图片
- jquery列表页悬浮显示图片 分页显示
- Extjs实现在Ext.grid列鼠标悬浮显示图片
- Qt 实现被鼠标悬浮的图片放大显示
- Android实现页面悬浮显示
- jquery实现图片显示上下左右翻滚
- jquery实现图片显示上下左右翻滚
- Jquery插件实现图片显示【客户端】
- JQuery实现input上传图片显示缩略图
- jQuery实现图片的隐藏、显示、切换
- Jquery实现图片的显示和隐藏
- JQuery实现input上传图片显示缩略图
- jquery悬浮窗,根据鼠标位置显示
- html+css鼠标悬浮显示图片
- jquery 滑动图片显示
- Jquery 滚动显示图片
- 图片鼠标悬浮预览 jquery 实现
- Android5.X (六) : RecycleView
- live555资源创建与释放
- Xcode中针对警告(黄色叹号)的忽略消除处理
- java集合:set 和 map
- DSP在线升级程序步骤
- jquery实现 悬浮显示,例子显示图片
- java集合常见的处理
- logback介绍
- lua table 遍历
- Django
- BAT Levels
- Error:Execution failed for task ':transformClassesWithDexForDebug'.
- Your database instance is running with full workload after database creation. You have decided to us
- linux 配置 php 扩展curl