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="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" class="v" /></a>
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" /></a>
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" class="v" /></a>
</body>
</html>
点击查看演示:http://biyuan.tk/u/upload/201311131123292656.html
相关推荐
-
jquery给图片添加鼠标经过时的边框效果
一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s
-
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="image" src="img/newselect.png"/> <input class="dBox3Ulimg" type="image" src="img/yesselect.png" style=&quo
-
JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS鼠标滑过显示边框菜单</title> </head> <body> <style> .menulines{ border:1px solid white; } .menulines a{ text-decoration:none; color:red; } </style> <
-
jQuery实现鼠标经过显示动画边框特效
原效果用addClass 改为slideUp,纯学习 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css" rel="external nofo
-
js实现鼠标悬浮给图片加边框的方法
本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href=&qu
-
JQuery实现鼠标移动到图片上显示边框效果
复制代码 代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function() { $(".v&quo
-
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能.分享给大家供大家参考,具体如下: 1 . 效果截图 2 . 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery图片变换</title> </head> <style type="text/css"
-
jQuery鼠标移动图片上实现放大效果
首先界面上要有图片,下面是图片 <img id="big-circle" src="images/pic2.jpg" alt=""/>其次在script代码段中加入如下代码,进行适量修改即可 $(document).ready(function () { var x = 10; var y = 20; $("#big-circle").mouseover(function (e) { var tooTip = &q
-
jQuery实现鼠标滑过图片移动特效
在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他"交流",从而增加用户在页面的逗留时间,以及增加深层次访问的可能性. 今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置. 首先,我们先来做如下图所示的页面布局: 页面布局部分: <ul> <li><img src="images/1.jpg&qu
-
Jquery实现鼠标移动放大图片功能实例
本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一会就把自己搞糊涂了,使用jquery技术直接根据标签的id,class等等,就可以辨识出来触发条件,直接作出回应(百度百科上说这是jquery很大的一
-
在图片上显示左右箭头类似翻页的代码
使用JS实现在图片上显示左右箭头的翻页代码,预览效果网址:http://www.keleyi.com/keleyi/phtml/picnext/ 本实例使用了javascript的onmousemove 事件.onmousemove 事件会在鼠标指针移动时发生. 语法 onmousemove="SomeJavaScriptCode" SomeJavaScriptCode是必需参数.规定该事件发生时执行的 JavaScript. 下面是核心代码(完整代码请在效果页面查看源代码): 复制代
-
jquery实现鼠标滑过小图时显示大图的方法
本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> </head> <style type="text/css&
-
jQuery实现鼠标滑动切换图片
本文实例为大家分享了jQuery实现鼠标滑动切换图片的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me
-
jQuery实现的网站banner图片无缝轮播效果完整实例
本文实例讲述了jQuery实现的网站banner图片无缝轮播效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片轮播</title&g
-
利用jQuery实现一个简单的表格上下翻页效果
前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&
随机推荐
- windows 下安装nodejs 环境变量设置
- ASP生成静态htm页面基本代码
- Linux shell知识点汇总
- 基于Python Shell获取hostname和fqdn释疑
- JavaScript定义类和对象的方法
- 详解Nodejs之静态资源处理
- arm linux利用alsa驱动并使用usb音频设备
- Python的Django框架中的select_related函数对QuerySet 查询的优化
- .NET中的异步编程-EAP/APM使用方法及案例介绍
- js基础之DOM中元素对象的属性方法详解
- JavaScript实现点击单选按钮改变输入框中文本域内容的方法
- 一个高效的JavaScript压缩工具下载集合
- Asp.net使用HttpModule压缩并删除空白Html请求的实现代码
- asp.net简单实现单点登录(SSO)的方法
- 基于ASP.NET实现日期转为大写的汉字
- Php中文件下载功能实现超详细流程分析
- Android左右滑出菜单实例分析
- 兼容各大浏览器的JavaScript阻止事件冒泡代码
- Easyui Datagrid自定义按钮列(最后面的操作列)
- jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果