css3和js实现鼠标滑过图片微移动 平滑过渡

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
	<script src="jquery-1.11.1.min.js"></script>

<body>

<div class="item">
	<a href="">
		<img src="11.jpg">
	</a>
</div>

<div class="item">
	<a href="">
		<img src="11.jpg">
	</a>
</div>

<style type="text/css">
.item{  position:relative; width:295px; height:190px;  overflow:hidden; border:1px solid;  margin:10px;}
.item a{ display:block;width:295px; height:190px;}
.item a img{
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
	position:absolute;
	left:0
}
.item a:hover img{
	position:absolute; left:-10px;
}
</style>
<script>
$(".item").bind("mouseenter", function(){
	$(this).find("img").stop(!0).animate({"left": "-10px"});
}).bind("mouseleave", function(){
	$(this).find("img").stop(!0).animate({"left": "0px"});
});
</script>
</body>
</html>

  

css3和js实现鼠标滑过图片微移动 平滑过渡

时间: 2024-12-25 11:52:36

css3和js实现鼠标滑过图片微移动 平滑过渡的相关文章

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

css3鼠标滑过图片文字动画特效

在线预览   源码下载 css3鼠标滑过图片文字动画特效是一款常用的5种纯css3实现的鼠标滑过图片动画效果.悬停效果有:1.鼠标悬停图片变大文字消失.2.鼠标悬停文字消失.3.鼠标悬停整体旋转.4.鼠标悬停整体旋转放大.5.鼠标悬停整体上升 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览   源码下载 使用方法 使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样 主要的方法 $(".section  ul li").hover(function() //伪类的触发 $(this).find(".r

JS跟随鼠标旋转的图片

<html> <head> <title>JS跟随鼠标旋转的图片丨Daniel wellington</title> <script> <!-- Beginning of JavaScript - var x,y var step=5 var flag=1 var pause var timersmall var timerbig var isbigcircle=1 var pause=50 var bigradius var smallr

CSS3扇形动画菜单 鼠标滑过扇形展开动画

详细内容请点击 我们之前已经分享过很多CSS3菜单了,很多都比较实用,有部分CSS3菜单外观比较炫酷.今天要分享的这款CSS3菜单外观是扇形的,并且在鼠标滑过菜单时,扇形菜单项将会以动画的方式展开,并且支持多级下拉菜单.  在线演示源码下载 学习来源:http://www.html5tricks.com/css3-sector-menu.html 更多html5内容请点击

css3—产品列表之鼠标滑过效果

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>实例: css3技巧--产品列表之鼠标滑过效果</title> <style> .main *{ padding:0; margin:0; font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace; box-

鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法

1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示 <div class="date7"> <a href=""><div class="date7a"><span class="abcabc">30</span></div></a> <a href=""><div class="dat