JavaScript和CSS实现详情图片显示大图特效

<!doctype html>
<html>
<head><title>JavaScript和CSS实现详情图片显示大图特效</title><meta http-equiv="content/text" charset="utf-8"><style type="text/css">BODY {FONT-SIZE: 14px;LINE-HEIGHT: 1.5;TEXT-DECORATION: none;FONT-FAMILY: simsun, Arial, "宋体";background-color: #FFFFFF;}td a:HOVER {color: red;background-color:#89d9fa;}#lookImg /*新增加大图样式*/{margin: 0 auto;border: 1px solid #0F0F0F;padding: 20px;height:660px;width: 480px;background: #FFFFFF;display: none;position: absolute; /*  这个对显示鼠标的位置很重要，如果不是绝对位置的话，将显示的地方不一样*/vertical-align: middle;text-align: center;font-family: Arial;}</style><script src="http://code.jquery.com/jquery-1.11.2.js"></script><script>$(function(){$(".lookImages").mouseover(function (e) {var p=$(this).attr("p");var lookImg = "<div id = 'lookImg'>";lookImg+= "<img src ='"+p+"'  height='460px' width='460px' />";lookImg+= "</div>";$("body").append(lookImg);$("#lookImg").css({"bottom": (e.pageY/2) + "px","right": (e.pageX/2) + "px"}).show("slow"); }).mouseout(function () {$("#lookImg").remove();}).mousemove(function (e) {$("#lookImg").css({"bottom": (e.pageY/2) + "px","right": (e.pageX/2) + "px"});});//----mouseover--end});</script></head><body><div><a class="lookImages" style="color: blue;cursor: pointer;"p="http://weilailm.duapp.com/wechat/resource/images/qrcode_for_med.jpg">lookImages</a></div></body></html>

JavaScript和CSS实现详情图片显示大图特效相关推荐

CSS让一个图片显示在另一个图片上面
CSS让一个图片显示在另一个图片上面思路,在两个图片的父元素上设置 position:relative , 然后给小图片设置 position:absolute ,位置通过top,bottom,le ...
CSS3鼠标悬停图片显示遮罩特效
transform:translateY(50px); transform:translateY(0px); 这两行代码实现了元素从下向上移动 opacity:0; opacity:0.5; 遮罩是通 ...
html点击小图标显示全屏查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof .exampleImg { height:100 ...
点击图片显示大图（有多张图片可以左右滑动）
需求:项目中用到了就是在列表展示的时候会出现图片,点击图片展示大图. 思路:用dialog来实现.因为这里在列表里会用到,点击进入动态详情也会用到,所以直接写进工具类. 上代码: 全屏显示在于参数后面 ...
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
今天找到了一个我用了很好的方法,点击缩略图,放大居中展示,且参数可调,亲测可靠. 代码使用意见,将下面的代码放到本地测试效果,可以用一张自己的照片,点击会放大,再次点击还原. 一.需求点击图片查看 ...
php图片点击查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏_javascript技巧...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof 三.技巧因为移动端无法添加热点,最终一个解决方 ...
css3 图片圆形显示如何CSS将正方形图片显示为圆形图片布局
正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化. 正方形图片实现圆形布局一.图片实现圆形条件 - TOP 原本不是圆形图片,通过CS ...
css的背景图片不显示,wepback打包时，css的背景图片显示不出来，求教！
如题.项目环境使用 webpack 构建的,webpack 这块配置的相关代码是 module: { loaders: [ { test: /\.(js|jsx)$/, exclude: /node_ ...
css让背景图片显示透明遮罩_CSS项目测试（支持深色模式）
*事先声明:本文章教程教学.文章封面来源自[CSS]聚光灯项目 by CodingStartup起码课,且已经CodingStartup起码课授权允许转载! 为了保持原有风格,本文始终保持与@Codi ...

JavaScript和CSS实现详情图片显示大图特效

JavaScript和CSS实现详情图片显示大图特效相关推荐

最新文章

热门文章