標籤：js css html5 javascript jquery
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ChouTiZhanShi.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">body{background:url("img/bg.jpg")no-repeat}*{margin:0px; padding:0px;}#imgs{width:1218px ; height:233px ;border-radius:9px;box-shadow:0px 0px 8px #000;margin:20px auto;}#imgs ul {list-style-type:none;padding:6px 0px;}#imgs ul li{display:block;width:290px;height:200px;border:2px solid #FFF;overflow:hidden;border-radius:9px;margin:10px 5px;float:left;box-shadow:0px 0px 5px #000;position:relative;}#imgs ul li .tip h4{text-align:center;margin:3px;}#imgs ul li .tip p{text-align:center;margin:3px;font-family:"微軟雅黑"}#imgs ul li img{border-radius:9px;}#imgs ul li .tip{width:300px;height:200px;background:#CDCDCD;position:absolute;top:0px;left:300px;border-radius:9px;}#imgs ul li.first{width:600px;}#imgs ul li.first img{width:290px;}#imgs ul li.first .tip h4{text-align:center;margin:3px;}#imgs ul li.first .tip p{text-align:center;margin:2px;font-family:"微軟雅黑"}#imgs ul li {width:186px;}#imgs ul li img{width:186px;}</style> </head> <body> <div id="imgs"> <ul> <li class="first"> <img src="img/1.jpg"width=290px height=200px/> <div class="tip"> <h4>我的小跑車</h4> <p>飛呀 看那紅色蜻蜓飛在藍色天空<br>遊戲在風中不斷追逐他的夢天空是永恒的<br>家大地就是他的王國飛翔是生活我們的童年也像追逐成長吹來的風<br>輕輕地吹著夢想 慢慢地升空<br>紅色的蜻蜓是我小時侯的小小英雄<br>多希望有一天能和他一起飛<br> </p> </div> </li> <li> <img src="img/2.jpg"width=290px height=200px/> <div class="tip"> <h4>我的小跑車</h4> <p>飛呀 看那紅色蜻蜓飛在藍色天空<br>遊戲在風中不斷追逐他的夢天空是永恒的<br>家大地就是他的王國飛翔是生活我們的童年也像追逐成長吹來的風<br>輕輕地吹著夢想 慢慢地升空<br>紅色的蜻蜓是我小時侯的小小英雄<br>多希望有一天能和他一起飛<br> </p> </div> </li> <li> <img src="img/3.jpg"width=290px height=200px/> <div class="tip"> <h4>我的小跑車</h4> <p>飛呀 看那紅色蜻蜓飛在藍色天空<br>遊戲在風中不斷追逐他的夢天空是永恒的<br>家大地就是他的王國飛翔是生活我們的童年也像追逐成長吹來的風<br>輕輕地吹著夢想 慢慢地升空<br>紅色的蜻蜓是我小時侯的小小英雄<br>多希望有一天能和他一起飛<br> </p> </div> </li> <li> <img src="img/4.jpg"width=290px height=200px/> <div class="tip"> <h4>我的小跑車</h4> <p>飛呀 看那紅色蜻蜓飛在藍色天空<br>遊戲在風中不斷追逐他的夢天空是永恒的<br>家大地就是他的王國飛翔是生活我們的童年也像追逐成長吹來的風<br>輕輕地吹著夢想 慢慢地升空<br>紅色的蜻蜓是我小時侯的小小英雄<br>多希望有一天能和他一起飛<br> </p> </div> </li> <!-- <li><img src="img/5.jpg"width=290px height=200px/></li> <li><img src="img/6.jpg"width=290px height=200px/></li> <li><img src="img/7.jpg"width=290px height=200px/></li> <li><img src="img/8.jpg"width=290px height=200px/></li> --> </ul> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $("#imgs ul li").hover(function(){ //alert("wew"); $(this).stop(true,true).animate({width:"600px"},800).siblings().stop(true,true).animate({width:"186px"},800); $(this).siblings().find("img").stop(true,true).animate({width:"186px"},800); $(this).find("img").stop(true,true).animate({width:"290px"},800) },function(){ $("#imgs ul li").stop(true,true).animate({width:"290px"},800); $(this).siblings().find("img").stop(true,true).animate({width:"290px"},800); }); </script> </body></html></span></strong>
html+css實現圖片滑移效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
