js实现图片显示局部,鼠标经过显示全部的效果
这个是例如了CSS的margin负值和相对定位做的一个图片放大的效果。图片开始只是局部的,鼠标放上去显示整个图片。
无标题文档
body{ font-size:12px; }
ul,li,ol{ margin:0; padding:0; list-style:none; }
.box{ margin:100px; clear:both; border:1px solid #000; }
.box ul li{ list-style:none; float:left; width:60px; height:60px; margin-left:10px; text-align:center; border:1px solid #ccc; }
.box ul li a{ display:block; background:#f2f2f2; width:60px; height:60px; overflow:hidden; }
.box a img{ margin:-25px 0px 0px -25px; border:0; }
.box a:hover{ width:105px; height:140px; border:4px solid #f2f2f2; margin:-40px -50px -80px -50px; padding:1px; position:relative; }/* 设置相对定位后才能盖住后面的层 */
.box a:hover img{ margin:0; border:0; }
.clear{clear:both;overflow:hidden;height:0;}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
一个简单的JS鼠标悬停特效具体方法
首先,需加载jquery库(略过). 其次,将下面 Javascript代码加到页面的头部: 复制代码 代码如下: <script type='text/javascript'> jQuery(document).ready(function($){ $('a').hover(function() { $(this).stop().animate({'left': '5px'}, 'fast'); }, function() { $(this).stop(
-
JS实现鼠标移动到缩略图显示大图的图片放大效果
一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;
-
javascript鼠标滑过显示二级菜单特效
本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下 1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById
-
js 事件对象 鼠标滚轮效果演示说明
Mouse Wheel Data .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:rela
-
一个简单的js鼠标划过切换效果
上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS. 核心JavaScript代码:点此查看DEMO 复制代码 代码如下: //@Mr.Think获取对象属性兼容方法 function $(objectId) { if(document.getElementById && document.getElementById(objectId)) { return document.getElementById(o
-
js 鼠标放图片上抖动效果
在线演示: 鼠标移至图片后抖动的JS代码 .shakeimage{position:relative; left:100px; top:100px;} var typ=["marginTop","marginLeft"],rangeN=10,timeout=20; function shake(o,end){ var range=Math.floor(Math.random()*rangeN); var typN=Math.floor(Math.random()*t
-
js 鼠标拖动对象 可让任何div实现拖动效果
js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){ var d=document;if(!a)a=window.event; if(!a.pageX)a.pageX=a.clientX; if(!a.pageY)a.pageY=a.clientY; var x=a.pageX,y=a.pageY; if(o.setCapture) o.setCapture();
-
js控制鼠标事件移动及移出效果显示
鼠标事件的移动及移出效果都可以使用js来自定义,下面有个示例,效果为当事件发生改变时背景颜色也随着改变,适合新手朋友 <style type="text/css"> .style0{ background-color:#FFFF00; } .style1{ background-color:#00FFFF; } </style> </head> <body> <table width="576" height=&
-
鼠标滑上去后图片放大浮出效果的js代码
复制代码 代码如下: <script> function GetAbsPosition(obj) { var curleft = 0, curtop = 0; do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return [curleft,curtop]; } function ShowFloatingImage(image, width, height) {
-
JavaScript鼠标特效大全
本文实例为大家分享了js鼠标特效实例代码,供大家参考,具体内容如下 实例一:禁用鼠标右键 <script type="text/javascript"> //为文档的鼠标按下事件定义回调 document.onmousedown = function(event){ //判断事件的值是否为鼠标右键 if (event.button == 2){ alert('禁用鼠标右键!'); //提示用户禁用鼠标右键 } } </script> 0 没按键 1 按左键 2
随机推荐
- SQl 语句(常见)
- Java源码解析Integer方法解读
- asp.net开发中怎样去突破文件依赖缓存
- ASP.NET中 CheckBox复选框控件的使用
- php中通过虚代理实现延迟加载的实现代码
- Android编程之防止反编译的实现方法
- PHP超牛逼无限极分类生成树方法
- js实现字符串转日期格式的方法
- json格式的javascript对象用法分析
- Java中自定义异常详解及实例代码
- centos下编译安装mysql报错解决方案
- 假冒IE图标,DDOS.EXE的解决方案
- jqPlot 基于jquery的画图插件
- Bootstrap Multiselect 常用组件实现代码
- Flex中最好的MVC框架Mate框架
- IIS真正能用的ISAPI-Rewrite图片防盗链规则写法
- C语言实现的统计php代码行数功能源码(支持文件夹、多目录)
- Spring Boot 整合mybatis 与 swagger2
- Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等
- PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析