鼠标控制图片反方向移动

css

.transformBox{
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

html

<div class="col-lg-4 transformBox">
<div style="transform: translateZ(100px);">
<img src="images/bannerPic.png" />
</div>
</div>

js

$(‘.transformBox‘).mousemove(function (e) {
var xx = e.pageY/100;
var yy = e.pageX/100;
$(this).find(‘.aa‘).css({
"transform": "rotateX(" +xx+"deg) rotateY("+yy+"deg)"
//"transform":(+y)+"px"
});

});

时间: 2024-11-05 18:54:29

鼠标控制图片反方向移动的相关文章

jquery版相片墙(鼠标控制图片聚合和散开)

原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一年前无意间看到的动画效果(现在已经忘记是哪位大神制作的了,引用了他的图片),刚看到这个很炫的动画超级激动,哇!怎么可以这么牛!我制作出来的没那边炫,但是还是制作出来了,算是对我的一种激励!希望能有碰到问题就要解决它的精神,即使不是现在但会是不久的将来! 一.演示效果 散开状态: 聚合状态: 二.html代码 <div class="box&

js鼠标控制图片的特效,滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {

鼠标移入--图片遮罩显示

效果:当鼠标移入图片时,图片被一块半透明黑色块遮住,并显示色块上按钮或文本. 原理:1.将图片位置创建<div>,固定宽高,绝对定位,并添加溢出隐藏. 2.添加两个<div>,第一个<div>用来装图片 3.第二个<div>添加半透明黑色背景,相对定位,并设置宽高.  4.添加js动画控制. 效果图: 代码: 引入jquery. css: ul{list-style: none;} ul>li{width: 100px;height: 120px;te

浅谈CSS和JQuery实现鼠标悬浮图片放大效果

对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3和HTML,Java的小伙伴不要绕道~~~ 言归正传,那么我们首先要完成什么样的图片处理呢? 一.CSS3图片的放大 css3中,有一个属性transform,官方的解释是:允许向元素应用2D或3D的转换.这些转换当然就包含旋转.缩放.移动或倾斜了.有兴趣的同学可以继续了解http://www.w3

用电脑键盘鼠标控制安卓手机或平板的应用——DeskDock

如果你同时使用多台电脑,可能早已听过Synergy.Input Director.无界鼠标等神奇的工具了,它们可以让你只使用一套键鼠即可控制操作多台不同电脑,让鼠标自由"穿梭"不同屏幕,非常方便. 不过上述软件都只能支持Win.Mac.Linux 等桌面系统,然而今天的主角DeskDock则可以让你使用电脑的鼠标键盘来控制 Android 安卓手机或平板!对于想借助安卓设备实现双屏工作提高效率的,或者经常要与 Android 平台的 APP 打交道的朋友来说可能非常实用,键鼠操作也更加

鼠标悬停图片移动的效果

当前很多购物网站,像京东,蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移,下移,左移或者右移效果, 实现代码很简单,就用css3的transform便可实现. 下列代码实现的是鼠标悬停,div向上移动30px,鼠标拿开div恢复原始位置. css: <style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//让移动效果变得平滑自

css3实现小米商城鼠标移动图片上浮阴影效果

今天在编程爱好者编码库看见一个好玩的程序,代码如下. <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">     <meta http-eq

鼠标悬停图片上方显示图片文字

//代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title> <style> img{border:0}/* css 注释说明:设置图片边框为0 */ body{behavior:url("csshover.htc");text

纯css3鼠标经过图片显示描述特效

http://www.w2bc.com/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   源码下载 我们一起学习下此案例的代码. html代码: <div align="center"> <div class="carre_couleur base_hov" style=""> <a ta