Skip to content

Commit 260a461

Browse files
committed
鼠标移动滑块
前端特效
1 parent dfd8f40 commit 260a461

File tree

9 files changed

+453
-0
lines changed

9 files changed

+453
-0
lines changed

鼠标移动滑块/.idea/.name

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

鼠标移动滑块/.idea/encodings.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

鼠标移动滑块/.idea/misc.xml

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

鼠标移动滑块/.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

鼠标移动滑块/.idea/workspace.xml

Lines changed: 252 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

鼠标移动滑块/.idea/鼠标移动滑块.iml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

鼠标移动滑块/index.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6+
<meta name="Generator" content="EditPlus®">
7+
<meta name="Author" content="">
8+
<meta name="Keywords" content="">
9+
<meta name="Description" content="">
10+
<title>Demo</title>
11+
<style>
12+
*{margin:0;padding:0;}
13+
ul,li{list-style:none;}
14+
div{font-family:"Microsoft YaHei";}
15+
body{width: 900px;}
16+
ul{overflow: hidden;}
17+
ul li{float:left;}
18+
ul li .outer{width:300px; height:250px;}
19+
ul li .outer .inner{width:300px; height:250px; background:rgba(0, 0, 0, .3);}
20+
</style>
21+
</head>
22+
<body>
23+
<ul>
24+
<li>
25+
<div class="outer">
26+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" />
27+
<div class="inner">
28+
这是描述。。。
29+
</div>
30+
</div>
31+
</li>
32+
<li>
33+
<div class="outer">
34+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" />
35+
<div class="inner">
36+
这是描述。。。
37+
</div>
38+
</div>
39+
</li>
40+
<li>
41+
<div class="outer">
42+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" />
43+
<div class="inner">
44+
这是描述。。。
45+
</div>
46+
</div>
47+
</li>
48+
<li>
49+
<div class="outer">
50+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" />
51+
<div class="inner">
52+
这是描述。。。
53+
</div>
54+
</div>
55+
</li>
56+
<li>
57+
<div class="outer">
58+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" />
59+
<div class="inner">
60+
这是描述。。。
61+
</div>
62+
</div>
63+
</li>
64+
<li>
65+
<div class="outer">
66+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" />
67+
<div class="inner">
68+
这是描述。。。
69+
</div>
70+
</div>
71+
</li>
72+
<li>
73+
<div class="outer">
74+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" />
75+
<div class="inner">
76+
这是描述。。。
77+
</div>
78+
</div>
79+
</li>
80+
<li>
81+
<div class="outer">
82+
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" />
83+
<div class="inner">
84+
这是描述。。。
85+
</div>
86+
</div>
87+
</li>
88+
</ul>
89+
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
90+
<script src="js/mouseslide.js"></script>
91+
<script>
92+
$(".outer").each(function(i){
93+
$(this).show($(".inner").eq(i));
94+
});
95+
</script>
96+
</body>
97+
</html>

0 commit comments

Comments
 (0)