js实现图片显示局部鼠标经过显示全部的效果

2016-02-19 08:59 96 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享js实现图片显示局部鼠标经过显示全部的效果的教程，热爱PS的朋友们快点看过来吧！

【 tulaoshi.com - Web开发】

这个是例如了CSS的margin负值和相对定位做的一个图片放大的效果。图片开始只是局部的，鼠标放上去显示整个图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> 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;} </style> </head> <body> <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140" > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  > <img src="http://img.tulaoshi.com/image/20160219/c23da214bb91c491a76b9df89d68676c.jpg" widt="105" height="140"  ></body> </html> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1589058.html

上一篇：在Javascript类中使用setTimeout
下一篇： Android获取SD卡中选中图片的路径(URL)示例

看过《js实现图片显示局部鼠标经过显示全部的效果》的人还看了以下文章更多>>

实现鼠标经过超链时的提示图层

标签： Web开发

代码如下： SCRIPT var oPopup = window.createPopup(); function rdl_doClick(){ var oMessage=document.all("oMessage"); with (oPopup.document.body) { style.backgroundColor="lightyellow"; style.border="solid black 1px"; innerHTML=oMessage.value; } oPopup.show(70, 70, 180, 60); } /SCRIPT Input id=oMessage size=40 valu...

Android 网络图片查看显示的实现方法

标签：编程语言网络编程

我们的应用或多或少都会从网络获取图片数据然后进行显示，下面就将实现一个这样的例子，获取网络中的图片！首先：我们来看一下效果图界面中有三个控件，一个EditText，一个Button，一个ImageView 1、下面是具体布局文件 EditText android:id="@+id/picturepagh" android:layout_width="fill_parent" android:layout_h...

iOS开发中实现显示gif图片的方法

标签：编程语言网络编程

我们知道Gif是由一阵阵画面组成的，而且每一帧画面播放的时常可能会不相等，观察上面两个例子，发现他们都没有对Gif中每一帧的显示时常做处理，这样的结果就是整个Gif中每一帧画面都是以固定的速度向前播放，很显然这并不总会符合需求。于是自己写一个解析Gif的工具类，解决每一帧画面并遵循每一帧所对应的显示时间进行播放。 &nbs...

Word2010如何实现鼠标指向自动显示提示文字

标签：电脑入门

在对Word文档进行操作时，经常需要给一些关键地方添加提示文字，但又不能让提示影响到原文的视图和打印效果。因此想让提示文字只在鼠标靠近时自动显示，当鼠标移开时就得自动消失。请问在Word中是否有办法可实现类似的效果呢? 在Word2010中有两种方法可以达到你要求的鼠标指向自动显示和隐藏的效果：使用超链接和尾注，他们各有优劣，图老师小...

用css改变鼠标显示

标签： Web开发

一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。但用css可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。用css控制的语法如下: span style="cursor:*"文本或其它页面元素/span 把 * 换成如下15个效果的一种： hand、crosshair、text、wait、default、help、e-resize、ne-resize...

查看更多精彩>>