zoukankan      html  css  js  c++  java
  • jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 

    以下是完整源代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现鼠标经过图片变亮效果 - 何问起</title><base target="_blank" />
    <style type="text/css">
    a {color:white;}
    body{background:#000;}
    body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}
    .hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}
    .hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}
    </style>
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $('.hovertreebox li').mouseover(function (e) {
    $(this).siblings().stop().fadeTo(500,0.4);
    });
    $('.hover'+'treebox li').mouseout(function (e) {
    $(this).siblings().stop().fadeTo(500,1);
    });
    })
    </script>
    </head>
    
    <body>
    <div style="color:white">jQuery突出图片列表中鼠标经过项
    <br /><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm">原文</a> <a href="http://hovertree.com/texiao/">更多特效</a></div>
    <div class="hovertreebox" id="hovertreelist">
    <ul>
    <li><img src="http://hovertree.com/texiao/jquery/1/images/01.jpg" width="200" height="186" /></li>
    <li><img src="http://hovertree.com/texiao/jquery/1/images/02.jpg" width="200" height="186" /></li>
    <li><img src="http://hovertree.com/texiao/jquery/1/images/03.jpg" width="200" height="186" /></li>
    <li><img src="http://hovertree.com/texiao/jquery/1/images/04.jpg" width="200" height="186" /></li>
    <li><img src="http://hovertree.com/texiao/jquery/1/images/05.jpg" width="200" height="186" /></li>
    <li><img src="http://hovertree.com/texiao/jquery/1/images/06.jpg" width="200" height="186" /></li>
    </ul>
    </div>
    
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:white;">
    <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
    <p>来源:<a href="http://hovertree.com/" target="_blank">HoverTree</a></p>
    </div>
    </body>
    </html>

    转自:http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm

    web前端资源:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    ubuntu下ssh服务相关操作
    搜索引擎的基础-倒排索引
    mysql重置密码
    mysql 服务器配置
    Activiti如何替换已部署流程图
    循环select查询结果集
    存储过程范例,有输入输出参数,带回滚
    sql server中字符串无法替换空格的问题
    Myeclipse实用快捷键总结
    Linux中添加用户与删除用户
  • 原文地址:https://www.cnblogs.com/jihua/p/bianliang.html
Copyright © 2011-2022 走看看