图片放大方法一：

<style type="text/css">
.xt{ width:230px; height:230px;}
.tp{ width:230px; height:230px; overflow:hidden;}
.tp img{transition:all 1s ease-out 0s; margin-left:0px; margin-top:0px; perspective-origin:bottom;}
</style>

<body>

<div class="tp">
　　<img class="xt" onmouseover="Bian(this)" onmouseout="Hui(this)" src="c320_20160923147459793296513.jpg"/>
</div>

</body>

<script type="text/javascript">
function Bian(a)
　　{
　　　　a.style.marginTop = "-10px";
　　　　a.style.marginLeft = "-10px";
　　　　a.style.height=" 260px";
　　　　a.style.width= "260px";

　　}
function Hui(a)
　　{
　　　　a.style.height=" 230px";
　　　　a.style.width= "230px";
　　　　a.style.marginTop = "0px";
　　　　a.style.marginLeft = "0px";
}
</script>

  1. 图片放大方法二：（只调整鼠标样式实现图片放大）
  2. <style type="text/css">
  3.  
  4. *{ margin:0px auto; padding:0px; font-size:15px; font-family:微软雅黑;}
  5. #a{ width:300px; height:300px; margin-top:150px; overflow:hidden;}
  6. .b{width:300px; height:300px; cursor:pointer; margin-top:0px; margin-left:0px; }
  7. .b:hover{ width:350px; height:350px; margin-top:-25px; margin-left:-25px;  transition: all 1s ease-in-out 0s; }
  8.  
  9. </style>
  10.  
  11. </head>
  12. <body>
  13.  
  14. <div id="a">
  15.     <img class="b" src="a6.png" />
  16. </div>
  17.  
  18. </body>
  1. 菜单栏的位置随滚轮移动固定方法：
  2.  
  3. <style type="text/css">
  4.  
  5. .t{ width:990px; height:80px; background-color:#F00; font-size:23px;}
  6.  
  7. </style>
  8.  
  9. <body>
  10.  
  11. <div style="width:100%; height:80px; background-color:#000; position:fixed;"></div>
  12.  
  13. <div style="width:200px; height:300px; background-color:#00F;"></div>
  14.  
  15. <div class="t"></div>
  16.  
  17. <div style="width:800px; height:1000px; background-color:#09F;"></div>
  18.  
  19. </body>
  20.  
  21. <script type="text/javascript">
  22.  
  23. $(document).ready(function(e)
  24. {
  25. 　　var off=$(".t").offset();  //当前DIV离浏览器边框四边的距离
  26. 　　var of=off.top-160;  //DIV离顶部的距离-本身DIV高度加顶部DIV高度的总高；（160PX视个人制作的DIV离上边框的距离而定）
  27. 　　$(window).scroll(function()
  28. 　　　　{
  29. 　　　　　　var scr=$(window).scrollTop();  //获取滚动条Y轴距离
  30. 　　　　　　　　if(scr>of)
  31. 　　　　　　　　　　{
  32. 　　　　　　　　　　　　$(".t").css("position","fixed");
  33. 　　　　　　　　　　　　$(".t").css("top","80px");  //根据需要调整
  34. 　　　　　　　　　　　　$(".t").css("background-color","#906");   //根据需要调整
  35. 　　　　　　　　　　　　$(".t").css("left","275px");  //根据需要调整
  36. 　　　　　　　　　　　　$(".t").css("width","800px");  //根据需要调整
  37. 　　　　　　　　　　　　$(".t").css("height","60px");  //根据需要调整
  38.  
  39. 　　　　　　　　　　}
  40. 　　　　　　　　if(scr<of)
  41. 　　　　　　　　　　{
  42. 　　　　　　　　　　　　$(".t").css("position","absolute");
  43. 　　　　　　　　　　　　$(".t").css("top","230px");   //根据需要调整
  44. 　　　　　　　　　　　　$(".t").css("background-color","#F00");   //根据需要调整
  45. 　　　　　　　　　　　　$(".t").css("left","180px");  //根据需要调整
  46. 　　　　　　　　　　　　$(".t").css("width","990px");  //根据需要调整
  47. 　　　　　　　　　　　　$(".t").css("height","80px");  //根据需要调整
  48. 　　　　　　　　　　}
  49.  
  50. 　　　　})
  51. });

图片放大方法、、菜单栏的位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；的更多相关文章

  1. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  2. 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  3. Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  4. 认识图片放大工具PhotoZoom的菜单栏

    使用PhotoZoom能够对数码图片无损放大,备受设计师和业内人员的青睐,它的出现时一场技术的革新,新颖的技术,简单的界面,优化的算法,使得它可以对图片进行放大而没有锯齿,不会失真.本文为您一起来认识 ...

  5. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  6. WPF图片放大后模糊的解决方法

    原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...

  7. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  8. jq随手写图片放大

    html: <img id="img1" src="<?php echo $info->business_licence_img; ?>" ...

  9. 【前端】特效-Javascript实现购物页面图片放大效果

    实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...

随机推荐

  1. Zookeeper的功能以及工作原理

    1.ZooKeeper是什么?ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,它是集群的管理者,监视着集群中各个节点的状态根据节点提交的 ...

  2. VMware安装、配置CentOS

    出处:http://www.cnblogs.com/jlily/ 1. 准备CentOS安装镜像文件 官网下载地址:http://www.centos.org/download/ 官方有三个版本:DV ...

  3. 二分搜索 UVALive 6076 Yukari's Birthday (12长春K)

    题目传送门 题意:问使得sum (k^i) = n || n -1 (1 <= i <= r) 的min (r*k)组合的r和k  分析:r的最大不会超过40,枚举r,二分搜索k.注意会爆 ...

  4. 判断 ACdream 1202 Integer in C++

    题目传送门 /* 分情况讨论,在long long范围里可以直接比较 sscanf 直接读到n中去 */ #include <cstdio> #include <iostream&g ...

  5. js对象数组按属性快速排序

    前一篇<关于selector性能比赛>中提到,目测觉得在$("div,p,a")这样有逗号时,sizzle耗时异常(600多个元素,花了200ms),说是它可能没有优化 ...

  6. ios cocos2d TexturePacker生成文件后的使用方法

    (1)将*.pvr.ccz文件转换为CCSpriteBatchNode (2)   将对应的plist文件读到CCSpriteFrameCache中 (3) 从CCSpriteFrameCache获取 ...

  7. 转：Web前端，高性能优化

    高性能HTML 一.避免使用iframe iframe也叫内联frame,可将一个HTML文档嵌入另一个HTML文档中. iframe的好处是,嵌入的文档独立于父文档,通常也借此使浏览器模拟多线程.缺 ...

  8. 禁止ViewState的3种解决方法

    默认情况下,ViewState是被启用的,比如提交表单后,表单中输入的值会自动保留.但是如果不需要保留,也可以将其禁用,这样可以节省资源.   下面3种方式就可以分别禁用某一个控件.某一个页面和整个应 ...

  9. IP地址在数据库里面的存储方式

    大多数公司的表结构都需要经过DBA进行审核,有时候你会看到存储IP地址采用varchar(15),这种方式都是传统的做法,这种方法需要占用15个字节,那么有更省空间的做法么?肯定是有的,那就是用int ...

  10. Lucene搜索方法总结

    转自:summerbell http://www.iteye.com/topic/569358 1.多字段搜索 使用 multifieldqueryparser 可以指定多个搜索字段. query q ...