一个跟随鼠标的图片放大效果，与FF兼容

<div align=center style="overfow: hidden; width: 100px; height: 100px"><img src="http://zsrimg.ikafan.com/upload/2007426163751315.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)">
</div>
<div align=center style="overfow: hidden; width: 100px; height: 100px">
<img src="http://zsrimg.ikafan.com/upload/200742616381460.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)">
</div>
<div align=center style="overfow: hidden; width: 100px; height: 100px">
<img src="http://zsrimg.ikafan.com/upload/200742616383849.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)">
</div>
<div id="enlarge_images" style="position: absolute; z-index:2"></div>

<SCRIPT>        
function show(_this) {
    document.getElementById("enlarge_images").innerHTML = "<img src='" + _this.src + "' >";
}
function hide(_this) {
    document.getElementById("enlarge_images").innerHTML = "";
}
function move_layer(event){
    event = event || window.event;
    enlarge_images.style.left=event.clientX+document.body.scrollLeft+10;
    enlarge_images.style.top=event.clientY+document.body.scrollTop+10;
}
document.onmousemove =move_layer;
</SCRIPT>

function show(_this) {
document.getElementById("enlarge_images").innerHTML = "";
}
function hide(_this) {
document.getElementById("enlarge_images").innerHTML = "";
}
function move_layer(event){
event = event || window.event;
enlarge_images.style.left=event.clientX+document.body.scrollLeft+10;
enlarge_images.style.top=event.clientY+document.body.scrollTop+10;
}
document.onmousemove =move_layer;

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

赞 (0)

相关推荐

  • javascript跟随鼠标x,y坐标移动的字效果

    跟随鼠标x,y坐标移动的字效果 function oMove() { var x=event.x; var y=event.y; if (y>0&&y200&&x 移动的字! 移动的字! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 当鼠标移动到图片上时跟随鼠标显示放大的图片效果

    当鼠标移动到图片上时跟随鼠标显示放大的图片效果

    原始状态:  鼠标经过:   复制代码 代码如下: <!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

  • javascript实现图片跟随鼠标移动效果的方法

    本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g

  • 基于jquery实现人物头像跟随鼠标转动

    基于jquery实现人物头像跟随鼠标转动

    一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动.其实现原理即同一张图片上作出人物上下左右不同面向的效果,利用JS调用背景图片的位置,以此实现人物"转脸"的jquery特效效果. 先给大家展示效果图,需要的朋友可以下载源码 效果演示  源码下载 具体实现过程不多说了,直接给大家贴代码了. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

  • jquery实现的提示浮层跟随鼠标移动

    jquery实现: jquery实现简单文字提示 #preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;} 把鼠标放到这里1 把鼠标放到这里2 把鼠标放到这里3 把鼠标放到这里4 把鼠标放到这里5 this.imagePreview = function(){ /* CONFIG */ xOffset = 10; yOffset

  • javascript跟随鼠标的文字带滚动效果

    比较简单常用的跟随鼠标文字滚动效果 跟随鼠标的文字带滚动效果 var scroller_msg='欢迎进入我的站点' var dismissafter=0 var initialvisible=0 if (document.all) document.write(''+scroller_msg+'') function followcursor(){ //move cursor function for IE if (initialvisible==0){ curscroll.style.vis

  • 给blog添加效果（计数器、天气预报、精美flash时钟、跟随鼠标的萤火虫、跟随鼠标的文字、状态栏文本、副标

    示例:http://blog.csdn.net/kvw3000本文收集整理而来,感谢各段代码提供者! 整理:回家念经(王结太) 1. 公告和计数器2. 天气预报 3. 跟随鼠标的萤火虫4. 状态栏文本5. 跟随鼠标的文字6. 每次打开的时候自动在顶部副标题位置显示一条不同格言7. flash精美时钟(新增) 在"选项"->"配置"的"静态新闻/声明"中加入下面相应的语句就可以实现相应的功能: 1. 公告和计数器代码: 代码填写在静态新闻/声

  • jquery背景跟随鼠标滑动导航

    jquery背景跟随鼠标滑动导航

    本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords"

  • js实现文字跟随鼠标移动而移动的方法

    本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:

  • 一个跟随鼠标的图片放大效果，与FF兼容

    一个跟随鼠标的图片放大效果，与FF兼容

    <div align=center style="overfow: hidden; width: 100px; height: 100px"><img src="http://files.jb51.net/upload/2007426163751315.jpg" width="100" height="100" border="0" onmouseover="show(this)

  • Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/partyMember/getPartyMembersByOrgCode', //width : 1500, height : 'full', cols : [ [ //标题栏 {checkbox : true,LAY_CHECKED : false,filter : 'test'},

  • js实现鼠标移入图片放大效果

    js实现鼠标移入图片放大效果

    使用原生js编写一个鼠标移入图片放大效果,供大家参考,具体内容如下 目标 给图片添加鼠标移动放大方法效果,移到哪里放大哪里 先看看效果是不是你想要的,再看代码 移入前 移入后 html <!-- css看着写 -->     <div class="Box" style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidde

  • 一个简单的javascript图片放大效果代码

    一个简单的javascript图片放大效果代码

    一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域 4.opacity:float,放大时图片被遮罩的区域的透明度 效果1: 调用的js代码: 复制代码 代码如下: $E({berviary:"currentPic&

  • JS实现鼠标移动到缩略图显示大图的图片放大效果

    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;

  • js 图片放大效果 修正版

    首先:我们需要一个可以移动的DIV 复制代码 代码如下: <div style="border:1px solid #CCC;position:absolute; width:200px; height:100px; cursor:move;" id="jelle_test_divquot;> 这个DIV 可以移动,你可以测试下. </div> <script type="text/javascript"> var ge

  • cloudgamer出品ImageZoom 图片放大效果

    一般用于放大查看商品图片,在凡客,京东商城,阿里巴巴等都有类似的效果. 好处是能在原图附近对图片进行局部放大查看,而且可以通过鼠标控制查看的部位. 前一阵子看到sohighthesky的图片放大效果,心血来潮自己也写一个看看. 这个程序有以下特点: 1,支持使用原图放大或新图片设置大图: 2,大图完成载入前使用原图放大代替,减少操作等待时间: 3,支持鼠标滚动缩放大图: 4,可以通过设置显示范围或显示框大小设置显示尺寸: 5,可以设置是否自动隐藏显示框: 6,支持插件形式的扩展来实现更多的功能(

  • JS图片放大效果简单实现代码

    本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #div1 { width:300px; height:300px; position:relative; margin:30p

  • iOS tableView实现下拉图片放大效果

    本文实例为大家分享了iOS实现下拉图片放大效果展示的具体代码,供大家参考,具体内容如下 #import "ViewController.h" #define kScreenbounds [UIScreen mainScreen].bounds #define kScreenWidth [UIScreen mainScreen].bounds.size.width #define kScreenHeight [UIScreen mainScreen].bounds.size.height

  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果

    气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text

随机推荐