分享一个动态图片列表样式【附下载】

{:soso_e100:}最近做了几个幻灯和图片动态列表样式

下面开始(图片列表样式)：
1、将下面解压包内的js文件夹上传到根目录www下（js文件夹和template文件夹并列显示）

2、打开页面diy，添加框架——添加帖子模块（必须含图片附件），之后点击 确定
3、点击本模块的编辑，点击上方的模块模版选项，将如下代码复制进去，之后点击 更新

1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   
2. <script language="javascript" >        var jq = jQuery.noConflict();</script>
   
3. <script>
   
4.         jq(document).ready(function()
   
5. {
   
6.         jq('.galleryImage').hover(
   
7.                 function()
   
8.                 {
   
9.                
   
10.                 jq(this).find('img').animate({width:100, marginTop:10, marginLeft:10}, 500);
    
11.                   
    
12.                  },
    
13.                  function()
    
14.                  {
    
15.                         
    
16.                          jq(this).find('img').animate({width:300, marginTop:0, marginLeft:0},300);
    
17.                         
    
18.                  });
    
19. });
    
20. </script>
    
21. <style>
    
22. .galleryContainer {width: 1024px;}
    
23. .galleryImage { background-color:black; width:300px; height:300px; overflow:hidden; margin:5px; float:left;}
    
24. .info    { margin-left:10px; font-family:arial;padding:3px;}
    
25. .info h2 { color:gray;}
    
26. .info p { color:white}
    
27. .clear { clear:both; margin-top:10px;}
    
28. </style>
    
29. <div class="galleryContainer cl">
    
30. [loop]
    
31.   <div class="galleryImage cl">
    
32.       <img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" />
    
33.       <div class="info">  
    
34.           <h2><a href="{url}" title="{title}"{target}>{title}</a></h2>
    
35.           <p>
    
36.               {summary}
    
37.           </p>
    
38.       </div>
    
39.     </div>
    
40.     [/loop]
    
41.   </div>

复制代码

Ps：关于鼠标滑过后图片大小的修改，在上传到根目录的js/zoominfo.js（使用编辑器打开即可）内修改
具体修改参：
width:100（滑过后图片宽度） marginTop:10（距离上边框） marginLeft:10（距离左边框）500（无需修改）
width:325（未滑过图片宽度） marginTop:0 （距离上边框marginLeft:0（距离左边框）300（无需修改）

1. $(this).find('img').animate({width:100, marginTop:10, marginLeft:10}, 500);
   
2.                   
   
3.                  },
   
4.                  function()
   
5.                  {
   
6.                         
   
7.                          $(this).find('img').animate({width:325, marginTop:0, marginLeft:0},300);

复制代码

好吧，本图片列表实用性不大，仅供各位站长试用交流


★★★明日推出一款幻灯，请大家随时关注本 ID (仿照tmall商城的图示样式）★★★




帮客户做个外链...塘沽广告公司

占楼编辑

喜欢，不错啊，嘿嘿。

是 商场系统吧

四格少一个图片样式

非常感谢分享，对我很有帮助

樵夫Totem 发表于 2013-11-6 22:24
非常感谢分享，对我很有帮助

不客气