鼠标划上图片放大

//大图
        $(".li_left img").on({
            "mouseover":function(){
                if(!$(this).is(":animated")){
                    $(this).animate({
                        width: ‘382px‘,
                        height: ‘272px‘,
                        marginLeft: ‘-25px‘,
                        marginTop: ‘-25px‘
                    }, 400 );
                }
            },
            "mouseout":function(){
                    $(this).animate({
                        marginLeft: 0,
                        marginTop: 0,
                        width: ‘332px‘,
                        height: ‘222px‘
                    }, 0 );
            }
        });

图片放大:
.CardLists .List .img img    {width: 100%;transition: all 0.8s;}
.CardLists .List:hover .img img {transform:scale(1.2);}

  

时间: 2024-10-30 00:40:17

鼠标划上图片放大的相关文章

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效

各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌.今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效.在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果.希望大家明白我的用心.好了不废话,直接进入今天的主题吧. 在今天这个案例里,我准备3个素材,一张背景图,两张风景图片.这个大家可以到网上自行下载. 在写代码之前,我先给大家展示一下,动画特效的效果图. 鼠标花过前: 当鼠标划过图片时,图片将逐渐变

鼠标移上图片滑出文字提示

本效果演示了一个响应鼠标的提示功能,鼠标移上图片后会滑出一个带背景的提示框,用CSS去控制它的大小和样式,用JS去控制它的滑出和速度,图文混排的时候这个能用得上. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

简单的鼠标滑动上去图片放大Jquery特效代码

<!DOCTYPE html> <html lang="en"> <head> <meta  charset=utf-8" /> <title>文字提示</title>  <!--   引入jQuery -->  <script src="scripts/jquery1.7.js" type="text/javascript"></sc

鼠标移入,图片放大

原理:放大的图片实际上是一张大图: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #wrap { position: relative; } #left { width: 430px; height: 4

鼠标划上 滑动切换图片

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" href="http://s0.ifengimg.com/2014/10/11/comm

鼠标经过时图片放大

HTML: <div> <img src="引用图片.png"> </div> CSS: div img{ width:160px; height:120px; -webkit-transition:-webkit-transform 1s ease 0s; transition:transform 1s ease 0s; -webkit-transform-origin:center; transform-origin:center; } div

鼠标悬停,图片放大

代码转载:http://blog.csdn.net/u014175572/article/details/51535768 示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px;

css 鼠标移上去图片放大效果

img { width:100px; height:100px; transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } img:hover { transform: scale(1.1); -ms-transform: scale(1.1);

js 鼠标滚轮控制图片放大缩小

<img :src="ImgUrl" alt="" width="100%" @mousewheel="zoomimg($event)" id="ScrollImg"> // 缩放图片 zoomimg(event) { var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wh