jquery鼠标滑动图片移位特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标滑动图片移位特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标滑动图片移位</title>
 <style type="text/css">
            h1{
                font-size: 20px
            }
            h2{
                font-size: 16px;
                color: red;
            }
            pre{
                padding: 4px;
                border: #F90 dotted 1px;
            }
        </style>
        <link href="css/images_hover_move.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/images_hover_move.js"></script>
        <script language="javascript" type="text/javascript">
            $(function() {
                $("#images_hover_move").images_hover_move({
                    window_width: '600',//slideshow window width
                    window_height: '190',//slideshow window height
                    border_color: '#999',
                    title_color: '#333',
                    title_background_color: '#CCC',
                    background_color: '#f5f5f5'
                });
                $("#images_hover_move1").images_hover_move({
                    window_width: '600',//slideshow window width
                    window_height: '100',//slideshow window height
                    border_color: '#999',
                    title_color: '#333',
                    title_background_color: '#CCC',
                    background_color: '#f5f5f5'
                });
            });
        </script>
    </head>
    <body>
        <h1>Image Hover Move- simple and practical navigation or featured image jQuery plugin</h1>
        <h2>Demo1(featured image style)</h2>
        <div id="images_hover_move" class="images_hover_move">
            <ul>
                <li><a href="#"><img src="images/slideshow_large_1.jpg" title="title1" wdith="259" height="194" /></a></li>
                <li><a href="#"><img src="images/slideshow_large_2.jpg" title="title2" wdith="259" height="194" /></a></li>
                <li><a href="#"><img src="images/slideshow_large_3.jpg" title="title3" wdith="203" height="203" /></a></li>
                <li><a href="#"><img src="images/slideshow_large_4.jpg" title="title4" wdith="259" height="194" /></a></li>
            </ul>
        </div>
        <h2>Demo1(navigation style)</h2>
        <div id="images_hover_move1" class="images_hover_move">
            <ul>
                <li><a href="#"><img src="images/slideshow_large_1.jpg" title="Navigation1" wdith="259" height="194" /></a></li>
                <li><a href="#"><img src="images/slideshow_large_2.jpg" title="Navigation2" wdith="259" height="194" /></a></li>
                <li><a href="#"><img src="images/slideshow_large_3.jpg" title="Navigation3" wdith="249" height="203" /></a></li>
                <li><a href="#"><img src="images/slideshow_large_4.jpg" title="Navigation4" wdith="259" height="194" /></a></li>
            </ul>
        </div>
        <h2>Usage</h2>
        <h3>Include js files.</h3>
        <pre>&lt;link href=&quot;css/images_hover_move.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script src=&quot;js/images_hover_move.js&quot;&gt;&lt;/script&gt;
        </pre>
        <h3>Add html.</h3>
        <pre>
&lt;div id=&quot;images_hover_move&quot; class=&quot;images_hover_move&quot;&gt;<br />  &lt;ul&gt;<br />        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/001.jpg&quot; title=&quot;title1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;<br />        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/003.jpg&quot; title=&quot;title2&quot; /&gt;&lt;/a&gt;&lt;/li&gt;<br />        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/004.jpg&quot; title=&quot;title3&quot; /&gt;&lt;/a&gt;&lt;/li&gt;<br />        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/006.jpg&quot; title=&quot;title4&quot; /&gt;&lt;/a&gt;&lt;/li&gt;<br />    &lt;/ul&gt;<br />&lt;/div&gt;
        </pre>
        <h3>Add startup script.</h3>
        <pre>
&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;<br />    $(function() {<br />        $(&quot;#images_hover_move&quot;).images_hover_move({<br />            window_width: '600',<br />            window_height: '250',<br />            border_color: '#999',<br />            title_color: '#333',<br />            title_background_color: '#CCC',<br />            background_color: '#f5f5f5'<br />        });<br />    });<br />&lt;/script&gt;
        </pre>
</body>
</html>

JS代码(images_hover_move.js):

// Copyright 2010 htmldrive.net Inc./** * @projectHomepage:http://www.htmldrive.net/s/view/id/605 * @projectDescription:Stylish featured image slideshow jQuery plugin. * @author htmldrive.net * More script and css style:htmldrive.net * @version 1.0 * @license http://www.apache.org/licenses/LICENSE-2.0 */
(function(a){
	a.fn.images_hover_move=function(p){
	var p=p||{
}
;
	var window_width=p&&p.window_width?p.window_width:"600";
	var window_height=p&&p.window_height?p.window_height:"250";
	var border_color=p&&p.border_color?p.border_color:"#999";
	var background_color = p&&p.background_color?p.background_color:"#f5f5f5";
	var title_color = p&&p.title_color?p.title_color:"#333";
	var title_background_color = p&&p.title_background_color?p.title_background_color:"#CCC";
	window_width = parseInt(window_width);
	window_height = parseInt(window_height);
	var images_array = new Array();
	var title_array = new Array();
	var g=a(this);
	var current = -1;
	var y=g.children("ul").children("li").length;
	if(y==0){
	g.append("Require content");
	return null}
var thumb_width = (window_width-2-8-(y-1)*4)/y;
	var thumb_height = window_height-2-8;
	g.children("ul").children("li").each(function(i){
	images_array[i] = $(this).find("img").attr("src");
	title_array[i] = $(this).find("img").attr("title");
}
);
	init();
	function init(){
	g.css('width',window_width+'px').css('height',window_height+'px') g.children("ul").css('border-color',border_color).css('width',(window_width-2)+'px').css('height',(window_height-2)+'px').css('background-color',background_color);
	g.children("ul").children('li').css('width',thumb_width+'px').css('height',thumb_height+'px');
	g.children("ul").children('li').children('a').css('width',thumb_width+'px').css('height',thumb_height+'px');
	g.children("ul").children('li').children('a').children('img').hide();
	g.children("ul").children("li").each(function(i){
	$(this).children('a').css('background-image','url('+images_array[i]+')');
	$(this).append('<p>'+title_array[i]+'</p>');
}
);
	g.children("ul").children("li").children("p").css('width',thumb_width+'px').css('color',title_color).css('background-color',title_background_color);
	g.children("ul").children("li").children("a").show();
	g.children("ul").children("li").children("p").slideUp();
	g.children("ul").children("li").children("a").hover( function(){
	var image_width = parseInt($(this).children("img").attr("width"));
	var image_height = parseInt($(this).children("img").attr("height"));
	$(this).animate({
	backgroundPosition:-(image_width-thumb_width)}
,1000 );
	$(this).parent().children("p").slideDown();
}
,function(){
	$(this).animate({
	backgroundPosition:0}
,1000 );
	$(this).parent().children("p").slideUp();
}
);
}
}
}
)(jQuery);

CSS代码(images_hover_move.css):

.images_hover_move{/* display:none;*/
}
.images_hover_move ul{margin:0px;border-width:1px;border-style:solid;padding:0px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-khtml-border-radius:5px;}
.images_hover_move ul li{margin:0px;padding:0px;list-style:none;float:left;margin-left:4px;margin-top:4px;position:relative;}
.images_hover_move ul li a{display:none;position:absolute;background-repeat:no-repeat;background-position:0 50%;display:block;}
.images_hover_move ul li p{bottom:0px;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;font-size:20px;font-weight:bold;text-align:center;margin:0px;padding:0px;position:absolute;display:block;}

附件:下载该文件资源,减少时间成本(增值服务)