body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果
生活随笔
收集整理的這篇文章主要介紹了
body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
都知道jquery都插件是非常強(qiáng)大的，最近分享點(diǎn)jquery插件效果，方便效果開發(fā)使用。
一、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圖片放大插件鼠標(biāo)滑過圖片放大效果</title> <meta name="description" content="jquery圖片放大插件制作一個(gè)當(dāng)鼠標(biāo)滑過圖片，圖片按等比例縮放放大效果。動(dòng)畫圖片放大展示特效。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="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);總結(jié)
以上是生活随笔為你收集整理的body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server学习之路（一）：建立
- 下一篇： TextArea换行 滚动条