JQuery实现鼠标移动到图片上显示边框效果_jquery

复制代码 代码如下:

以下为程序代码:<!DOCTYPE html/>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".v").mouseover(function() {
var x = $("<div class='vs'></div>");
x.appendTo($('body'));
x.css({
width : $(this).width() - 6,
height : $(this).height() - 6,
left : $(this).offset().left,
top : $(this).offset().top
});
$($.browser.msie ? this : x).mouseout(function(){
x.remove();
});
});
});
</script>
<style>
.vs {z-index:1000;position:absolute;border:3px solid red;}
</style>
</head>
<body>
<a href="#"><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg border="0" class="v" /></a>
<a href="#"><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg border="0" /></a>
<a href="#"><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg border="0" class="v" /></a>
</body>
</html>

点击查看演示:http://biyuan.tk/u/upload/201311131123292656.html

时间: 2024-07-28 15:25:23

JQuery实现鼠标移动到图片上显示边框效果_jquery的相关文章

要求 图片循环滚动 左右控制,鼠标指针放到图片上显示该图片的名称,下面代码在ie8下正常显示,但在ie6 ie7下显示不正常

问题描述 要求图片循环滚动左右控制,鼠标指针放到图片上显示该图片的名称,下面代码在ie8下正常显示,但在ie6ie7下显示不正常!请各位大侠帮下小弟!另发现在ie8下第一遍图片滚动完毕后第二遍图片下面没有显示文字<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlx

js鼠标悬停在图片上显示文字提示效果

第一幅 好久不见的向日葵 第二幅 纯手工雕刻的哦 第三幅 小桥流水人家 第四幅 又一幅小桥流水人家 第五幅 游民咖啡店 第六幅 动物世界

鼠标移到图片上显示跟随鼠标移动的层

提示:您可以先修改部分代码再运行 相对定位和绝对定位实例--作者:唐国辉 最新单曲 01 爱的文身 黄圣依 歌名:爱的文身 歌手:黄圣依 介绍:黄圣依唱片主打歌的确是她个人的内心写照,<爱的文身>由香港音乐大师金培达作曲,制作人陈少琪亲自填词. 02 累了 阿信 歌名:累了 歌手:阿信 介绍:青春校园偶像剧----[提示:您可以先修改部分代码再运行

javascript-html视频播放进度条上如何加入点号,并且鼠标移动到点号上显示关键帧图片

问题描述 html视频播放进度条上如何加入点号,并且鼠标移动到点号上显示关键帧图片 问题是这样的:最近正在做html进行视频处理,想在html视频播放进度条上加入点号,并且鼠标移动到点号上显示关键帧图片. 就像爱奇艺视频播放的下面的效果: 有哪位朋友知道该如何做出点号吗?难道是用若干个点的图片贴在视频进度条下方?我用的是html5中, <video src="0.mp4" controls="controls" style="width:450px;

jquery cycle js-jquery.cycle.js进行图片切换的时候如何在图片上显示标题

问题描述 jquery.cycle.js进行图片切换的时候如何在图片上显示标题 jquery.cycle.js进行图片切换的时候如何在图片上显示标题

jquery插件-jquery哪个插件可以实现:将鼠标移到图片上,会出现大图,就像京东那样?

问题描述 jquery哪个插件可以实现:将鼠标移到图片上,会出现大图,就像京东那样? jquery哪个插件可以实现:将鼠标移到图片上,会出现大图,就像京东那样? 解决方案 http://www.jb51.net/jiaoben/259626.html

jquery实现鼠标滑过小图时显示大图的方法

 这篇文章主要介绍了jquery实现鼠标滑过小图时显示大图的方法,涉及图片及鼠标操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <

Jquery实现鼠标移动放大图片功能实例

 这篇文章主要介绍了Jquery实现鼠标移动放大图片功能,实例分析了jQuery操作鼠标与图片的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一

jQuery实现鼠标滑过图片移动特效_jquery

在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他"交流",从而增加用户在页面的逗留时间,以及增加深层次访问的可能性. 今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置. 首先,我们先来做如下图所示的页面布局: 页面布局部分: <ul> <li><img src="images/1.jpg&qu