jquery鼠标悬停图文切换特效代码下载


jquery鼠标悬停图文切换特效代码下载
jquery鼠标悬停图文切换特效代码下载以及鼠标悬停、图文切换等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

2. HTML代码

<!-- 第一个demo -->
<div id="wrap">
	<h1>DEMO 1</h1>
	<ul class="item1">
    	<li>
			<img src="images/demo01.jpg" width="157" height="203" />
			<div>
            	<h3>自助下单</h3>
	            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
            </div>
		</li>
        <li>
			<img src="images/demo01.jpg" width="157" height="203" />
			<div>
            	<h3>自助下单</h3>
	            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
            </div>
		</li>
        <li>
			<img src="images/demo01.jpg" width="157" height="203" />
			<div>
            	<h3>自助下单</h3>
	            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
            </div>
		</li>
        <li>
			<img src="images/demo01.jpg" width="157" height="203" />
			<div>
            	<h3>自助下单</h3>
	            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
            </div>
		</li>
    </ul>
</div>
<!-- 第二个demo -->
<div id="wrap">
	<h1>DEMO 2</h1>
	<div class="item2">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item2-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
    <div class="item2">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item2-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
    <div class="item2">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item2-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
    <div class="item2">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item2-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
</div>
<!-- 第三个demo -->
<div id="wrap">
	<h1>DEMO 3</h1>
	<div class="item3">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerTL"> </div>
      	<div class="cornerTR"> </div>
     	<div class="cornerBL"> </div>
     	<div class="cornerBR"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item3">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerTL"> </div>
      	<div class="cornerTR"> </div>
     	<div class="cornerBL"> </div>
     	<div class="cornerBR"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item3">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerTL"> </div>
      	<div class="cornerTR"> </div>
     	<div class="cornerBL"> </div>
     	<div class="cornerBR"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item3">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerTL"> </div>
      	<div class="cornerTR"> </div>
     	<div class="cornerBL"> </div>
     	<div class="cornerBR"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
</div>
<!-- 第四个demo -->
<div id="wrap">
	<h1>DEMO 4</h1>
	<div class="item4">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item4-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
    <div class="item4">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item4-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
    <div class="item4">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item4-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
    <div class="item4">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <div class="item4-txt">
        	<h3>菁英团队</h3>
        </div>
      	<div class="caption">
            <h3>菁英团队</h3>
            <p>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</p>
      	</div>
    </div>
</div>
<!-- 第五个demo -->
<div id="wrap">
	<h1>DEMO 5</h1>
    <div class="item5">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerTL"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item5">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerTR"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item5">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerBL"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item5">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerBR"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>    
</div>
<!-- 第六个demo -->
<div id="wrap">
	<h1>DEMO 6</h1>
    <div class="item6">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerCC"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item6">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerCC"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item6">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerCC"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
    <div class="item6">
    	<img src="images/demo01.jpg" width="157" height="203" />
        <h2><p>111</p></h2>
        <div class="cornerCC"> </div>
        <dl>
        	<dt><h3>111</h3></dt>
            <dd>自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单自助下单</dd>
        </dl>
    </div>
</div>

相关推荐

发表评论

相关文章