body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用。
一、HTML代码
<!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=utf-8" />
<title>jquery图片放大插件鼠标滑过图片放大效果</title>
<meta name="description" content="jquery图片放大插件制作一个当鼠标滑过图片,图片按等比例缩放放大效果。动画图片放大展示特效。jQuery插件。" />
</head><body><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zoomImgRollover.js"></script>
<script type="text/javascript">
$(document).ready(function() {$("#testimg").zoomImgRollover();
});
</script><style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:544px;margin:20px auto;}
</style><div class="demo"><a href='http://www.3mooc.com/' style="border:1px solid #000;"><img id="testimg" width="400" height="564" src="data:images/132ad.jpg" alt="" border="0"></a>
</div></body>
</html>
二、插件代码(插件名称:jquery.zoomImgRollover.js)
(function(jQuery){ jQuery.fn.zoomImgRollover = function(options) {var defaults = {percent:30,duration:600}; var opts = jQuery.extend(defaults, options);// static zoom functionfunction imageZoomStep(jZoomImage, x, origWidth, origHeight){var width = Math.round(origWidth * (.5 + ((x * opts.percent) / 200))) * 2;var height = Math.round(origHeight * (.5 + ((x * opts.percent) / 200))) * 2;var left = (width - origWidth) / 2;var top = (height - origHeight) / 2;jZoomImage.css({width:width, height:height, top:-top, left:-left});}return this.each(function(){var jZoomImage = jQuery(this);var origWidth = jZoomImage.width();var origHeight = jZoomImage.height();// add css ness. to allow zoomjZoomImage.css({position: "relative"});jZoomImage.parent().css({overflow: "hidden", display:"block", position: "relative", width: origWidth, height: origHeight});jZoomImage.mouseover(function(){jZoomImage.stop().animate({dummy:1},{duration:opts.duration, step:function(x){imageZoomStep(jZoomImage, x, origWidth, origHeight)}});});jZoomImage.mouseout(function(){jZoomImage.stop().animate({dummy:0},{duration:opts.duration, step:function(x){imageZoomStep(jZoomImage, x, origWidth, origHeight)}});});});};})(jQuery);
body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果相关推荐
- html鼠标感应图片,jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 超个性的感应鼠标悬停图片色彩渐显效果 ul.gallery { width: 750px; /* ...
- html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)...
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法. 当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了.实现这样的动态效果主要是为了突出产 ...
- css鼠标悬停图片剪辑路径效果
下载地址 一款css鼠标悬停图片剪辑路径效果,当鼠标悬停在图片上时,图片按一定路径放大的动画特效,生动形象,让图片灵活起来. dd:
- 通过CSS3实现:鼠标悬停图片360度旋转效果
效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
- CSS滤镜实现鼠标悬停图片变黑白(灰色)
文章目录 前言 一.思路分析 1.样式代码 二.具体实现 1.全部源码 2.效果 结语 前言 这几天在清理电脑文件夹,发现了N年前的一些小demo,顺手记录一下,都是一些比较简单的案例,话不多说了 ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- css3鼠标悬停图片特效,图片悬停效果
css3鼠标悬停图片特效,图片悬停效果 代码如下: <title>css3鼠标悬停图片特效,图片悬停效果源码</title><style>*{box-sizing: ...
- CSS3鼠标悬停图片显示遮罩特效
transform:translateY(50px); transform:translateY(0px); 这两行代码实现了元素从下向上移动 opacity:0; opacity:0.5; 遮罩是通 ...
- CSS 中鼠标悬停 图片旋转
CSS 中鼠标悬停 图片旋转 w3school 中 transfrom 说明 主要使用的属性就是 transfrom 第一种情况 1.1 说明 当鼠标放到图片上之后 图片旋转, 这里的图片给的是背景图 ...
最新文章
- 图表+笔记-python语言-第5章:数字/5.11 位操作
- sql 修改时间戳语句_从 0 到 1 搭建技术中台之 SQL 审核平台
- 循环相关函数range、enumerate、zip
- S3C2440与SDRAM的地址连线分析
- 常用个人密码管理软件 .
- Spring Cloud Bus + RabbitMq 自动刷新
- AngularJs ngList、ngRepeat、ngModelOptions
- 书籍推荐系列之一 -- 《凤凰项目:一个IT运维的传奇故事》
- ideaIU-2017安装破解及汉化全包
- noip2015初赛入围名单
- 三剑客python自学笔记--02
- 关于前辈RPC学习的经验分享:我的DedSec RPC
- 如何做快手副业?怎么在快手上赚工资?快手发视频怎么赚钱?
- echart 实现地图坐标轴带图标
- 神兽归笼,又是一波斗智斗勇?这款QLED电视机让你带娃更省心
- Windows 定时启动 关闭软件
- 安防监控流媒体服务器对接宇视摄像机配置OCX插件安装时出现Failed to register ocx, error code 14001错误问题分析
- 201421440018王坤的作业一
- Java多线程Callable接口
- 考研科目计算机系统结构,计算机系统结构