鼠标移入图片左右移动
<!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>纯CSS图片特效</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
@charset "utf-8";
/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "微软雅黑"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{ background: #FFF; padding: 10px 50px 50px; }
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
#mindscape { width: 900px; height: 417px; overflow: hidden; border: 1px solid #999999; }
#monsteck_variketch { width: 900px; height: 400px; overflow: hidden;border: 1px solid #999999; }
/* 效果CSS结束 */
</style>
</head>
<body>
<div style="width:850px;margin:0 auto;">
<h3 style="line-height:36px; font-size:16px; text-align:center">Demo 1</h3>
<ul id="mindscape">
<li><img src="http://www.internetke.com/jsEffects/2014120902/mindscape/mindscape1.jpg" /></li>
<li><img src="http://www.internetke.com/jsEffects/2014120902/mindscape/mindscape2.png" /></li>
</ul>
<h3 style="line-height:36px; font-size:16px; text-align:center">Demo 2</h3>
<ul id="monsteck_variketch">
<li><img src="http://www.internetke.com/jsEffects/2014120902/monsteck_variketch/1.jpg" /></li>
<li><img src="http://www.internetke.com/jsEffects/2014120902/monsteck_variketch/2.png" /></li>
<li><img src="http://www.internetke.com/jsEffects/2014120902/monsteck_variketch/2.png" /></li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#mindscape').smart3d(750,200);
$('#monsteck_variketch').smart3d(750,200);
});
//, first_is_static, last_is_static
(function($) {
$.fn.smart3d = function(frame_width,frame_height) {
var _this = this;
var width = _this.width();
var height=_this.height();
var offset = frame_width - width;
var offseth= frame_height - height;
// if (last_is_static == undefined)
// last_is_static = false;
// if (first_is_static == undefined)
// first_is_static = false;
_this.css('padding', '0');
_this.css('overflow', 'hidden');
_this.css('position', 'relative');
_this.css('list-style', 'none');
var lis = _this.find('li');
lis.css('padding', '0');
lis.css('margin', '0');
lis.css('position', 'absolute');
//lis.css('top', '0');
lis.css('width', frame_width);
lis.css('height', frame_height);
lis.css('left', (width - frame_width) / 4);
lis.css('top', (height - frame_height) / 4);
_this.pos = 0;
_this.poh = 0;
_this.mousemove(function(e){
var x = e.clientX - _this.offset().left;
var y = e.clientY - _this.offset().top;
_this.pos = x / width * offset - offset / 2;
_this.poh = y / height * offseth - offseth / 2;
});
function _jpvol_animate(){
for (var i=1; i<=lis.length; i++){
// if ((last_is_static) && (i == lis.length))
// continue;
// if ((first_is_static) && (i == 1))
// continue;
var cur_l = parseFloat(jQuery(lis[i-1]).css('left'));//左右移动
var cur_t = parseFloat(jQuery(lis[i-1]).css('top')); //上下移动
var new_l = _this.pos * (i / lis.length) - offset / 2;
var new_t = _this.poh * (i / lis.length) - offseth / 2;
//if (Math.abs(cur_l - new_l) > 1)
jQuery(lis[i-1]).css('left', (new_l + cur_l*5) / 7);
jQuery(lis[i-1]).css('top', (new_t + cur_t*5) / 7);
}
}
setInterval(_jpvol_animate, 30);
return this;
};
})(jQuery);
</script>
</html>
